Support NeoGAF

[Otaking]

It's been a few months since we've had a discussion on website design, so I figured why the hell not. What type of techniques does everyone use? What programs do you use? Where do you get your inspiration? My site's latest design was coded using <div> tags and uses CSS to define the layout. It's not very technical, but it gets the job done. Now if I was only artistic enough to make a good design. My inspiration comes from staring at a blank screen for a long time. Sometimes I'll get ideas from other designs, but I consider that cheating. My program of choice is Dreamweaver's text editor. It color codes your strings and numbers them, making it easy to find your place in code. I'm also tossing around an idea of changing my site's name. Otaku, so I've been told, are bad things and one should never refer to him or her self as one. But that's getting off topic. I'm anxious to hear what others do for web design.

 

[UtadaBarkley]

Wow.. For some reason I REALLY like that site, and I do webdesign myself. Is that a custome php script you made, or is it an existing script that you customized to fit your needs?


I was looking into doing a site with a similar layout because it would be necesarry for the site's content.


you can peep my work at www.getitright-records.com duh... lol.

 

[karasu]

i use folderblog, because i'm a lazy bitchant.

 

[geogaddi]

here something i was working on RIGHT NOW for band:

1.)I slice it up in photoshop

2.)compress the images "Save for Web as" option for fast loading sites (not too many artifacts but just about right)

3.)manually create tables on dreamweaver that correspond to the slices I made on photoshop and use spacers for stability. I dont use photoshop table maker crap.

 

[Otaking]

Wow.. For some reason I REALLY like that site, and I do webdesign myself. Is that a custome php script you made, or is it an existing script that you customized to fit your needs?


I was looking into doing a site with a similar layout because it would be necesarry for the site's content.


you can peep my work at www.getitright-records.com duh... lol.

Mixture of both actually. I'm using Invision (back when it was free) and using the IPB SDK to work the member system in with the forum. But everythign else was coded myself. The code is in dire need of cleanup. The site manager I made is very messy, but it gets the job done. Eventually I hope to make it more user friendly for my staffers.

I really like your stuff too. It works extremely well for it's purpose. I like how you used Flash too. Really good for a music site.

I used, in the beginning, PHPNuke for the backbone of my first site. I found it too constricting, so I moved onward to just making my own. It works much better for my purposes, once I get the code cleaned up and everything.

*edit*

here something i was working on RIGHT NOW for band:

Damn, I really like that. You'll have to show us the finished product.

 

[automagnus]

Me and a group of friends work on www.titaniumforums.com

It's pretty generic because we can't afford anything, but we got some cool stuff like the scrolly thread thing on the left and a java IRC client, which would be nice to have on GA.

We've only been up for a month.

I like getitright's main page, but your forum seems to dark IMO.

 

[Crazymoogle]

Sometimes I'll get ideas from other designs, but I consider that cheating.

What you call "cheating" is often the best way to learn, especially with CSS. Anyhow, Dreamweaver is great as always. Dreamweaver + Movable Type = reasonably easy.

I think I spend too much time on websites occasionally, hence my anime site here, my game site here, and my blogger site (using default materials) here.

Not that I'm satisfied with the designs of any of them, but I'll settle for "Easy to post" until a more exciting design comes to mind.

 

[UtadaBarkley]

Yeah, it is a little on the dark side, I tried to lighten it up, but it didn't fit the overall theme of the website so I just kept it as is.

I'm working on another site... www.lohanfreestyle.com it's not online yet, but I'll let you guys know when it goes live. I need to reformat my pc, so i can do a clean install of PS, DWMX, etc. My pc is a mess so it's hindering my creativiy. I think I will start on that tonight... *wishes he had a dvd burner to just back everything up in one fell swoop*

 

[UtadaBarkley]

here something i was working on RIGHT NOW for band:

1.)I slice it up in photoshop

2.)compress the images "Save for Web as" option for fast loading sites (not too many artifacts but just about right)

3.)manually create tables on dreamweaver that correspond to the slices I made on photoshop and use spacers for stability. I dont use photoshop table maker crap.

Nice image you're working with btw.

 

[Crazymoogle]

Yeah, it is a little on the dark side, I tried to lighten it up, but it didn't fit the overall theme of the website so I just kept it as is.

Color values seem fine to me, although I guess I'm really picky on color calibration. Nice site, too - loads damn fast considering the kind of content, which is both a bravo to the provider and a bravo to the page code involved. I've seen lesser flash style content bring high end PCs to their knees.

 

[UtadaBarkley]

Color values seem fine to me, although I guess I'm really picky on color calibration. Nice site, too - loads damn fast considering the kind of content, which is both a bravo to the provider and a bravo to the page code involved. I've seen lesser flash style content bring high end PCs to their knees.

Thanks man...I love hearing that. I spent an insane amount of time trying to optimize the content to load as fast as possible. It could be better, bu I'm pretty satisfied.

 

[UtadaBarkley]

What you call "cheating" is often the best way to learn, especially with CSS. Anyhow, Dreamweaver is great as always. Dreamweaver + Movable Type = reasonably easy.

I think I spend too much time on websites occasionally, hence my anime site here, my game site here, and my blogger site (using default materials) here.

Not that I'm satisfied with the designs of any of them, but I'll settle for "Easy to post" until a more exciting design comes to mind.

All of your site slook good. hey I never really looked into moveable type, is that free somehow or do you have to pay? I'm digging the clean look of those sites.

 

[automagnus]

All of your site slook good. hey I never really looked into moveable type, is that free somehow or do you have to pay? I'm digging the clean look of those sites.

You mean from titanium? Yeah its free.

 

[Otaking]

What you call "cheating" is often the best way to learn, especially with CSS.

I know. But there just aren't enough anime + gaming sites that I can get examples from. I'm pleased with the current design and I guess will stay with it unless I change the site name. I want a decent logo too, but again, I'm getting off topic.

It took me quite a few days to get down the basics of coding with CSS. I'm getting better with it, and learn something new almost every time I sit down to work. I'm using a few weird tricks to get the links on my header to work right. It's actually a transparent gif of the same size so I can place the circular links. It gets the job done, but when you take away the stylesheet in Firefox, you can tell plainly what I was doing. I'm thinking of adding more subtle images to each section, to make it more eye pleasing. I just won't be going overboard.

*edit*
I, too, enjoy the clean look of your sites. Simple and clean are always nice ways to take a site design. Not too much clutter to look at. It gets your content across in a nice way too.

 

[Crazymoogle]

I want a decent logo too, but again, I'm getting off topic.

That's possibly the hardest part to get down. Usually you either figure it out right off the bat or struggle with experiments for years.

It's actually a transparent gif of the same size so I can place the circular links. It gets the job done, but when you take away the stylesheet in Firefox, you can tell plainly what I was doing.

Exactly what I've been doing, although my alignment is off. Some sort of bug in the CSS code I haven't tracked down.

All of your site slook good. hey I never really looked into moveable type, is that free somehow or do you have to pay? I'm digging the clean look of those sites.

Movable Type doesn't really give you the "clean look", it just gives the relatively easy database support that, for example, let's me post an anime review using a webform (sort of like posting on GAF) and then have my "latest articles" list and reviews list pages automatically update with the new information.

As with most blogs, it uses CSS (style sheets) so you can basically take a site design and apply it like a skin. (Obviously, you need to go through the design iterations to make something reasonably unique and avoid ripping somebody off).

For this reason, I highly recommend newbies to blog systems check out Google's Blogger service first - it's free, there are no mandatory ads (just a helpful topbar like you can see on moogle.net), and you can set it up to host on your own domain instead of username.blogger.com (which eliminates any requirement for bars or whatnot). You can alter the core site CSS template, and basically the only thing holding you back is a lack of flexibility (can't assign post categories, not as many entry extras)

 

[fennec fox]

Hello men and women,

There's a website I'd like to design, and I'd like your opinions on the best/fastest/e-ziest way to implement it.

Basically I'd like to make a site devoted to game magazines. There would be lots of pages that represent individual magazines; each one would have a standard set of features like a cover pic, publishing information, description, that sort of thing. You'd get to these pages via a main index, that would lay out all the issues of a magazine in a grid so's you can click on an issue to get details on it.

There could eventually be lots of entries on this website, and it seems like making them all manually would be a bore. So it sounds like a MySql thing is what I need, but how does one get started with that?

 

[demi]

here something i was working on RIGHT NOW for band:

1.)I slice it up in photoshop

2.)compress the images "Save for Web as" option for fast loading sites (not too many artifacts but just about right)

3.)manually create tables on dreamweaver that correspond to the slices I made on photoshop and use spacers for stability. I dont use photoshop table maker crap.

That's hot.

Do you do this as a profession, or freelance type stuff?

 

[sc0la]

I would link you guys to something I threw together for my dad but I wouldn't want GA to end his bandwidth in a fiery rage =/

:lol

what could it hurt though?
hang on

EDIT:::
This is for my Dad's business he runs. I threw this together in about 2 hours a few nights ago, Ignore the text as its all placeholder crap untill my dad writes some more, ignore the adds I figured you guys could bomb on 250free.com instead of my bandwidth :lol

http://scola.250free.com/temp.html

edit2: require flash 7 I think, I haven't optimized it for 5 yet which I think is a fair target for most machines.

 

[explodet]

There could eventually be lots of entries on this website, and it seems like making them all manually would be a bore. So it sounds like a MySql thing is what I need, but how does one get started with that?

First you'd need a host with a database, say MySQL for a linux server or MSSQL or Access for a windows server (Access is kinda slow, though). Then you need to insert the information into the database, and then develop scripts that display that info.

As for getting started, well, designing the templates in HTML is one thing, but scripting the templates, designing the database and writing the SQL is something different. If you're not familiar with that you'll probably need someone to help you, unless you have the time to learn it yourself.

I'm not sure of any pre-packaged scripts that do exactly what you're looking for, although there may be similar packages that are close. I have a example website that's PHP/MySQL driven (I do it for a living), and it's on videogames, but the content sucks and I'm reluctant to give it out.

 

[Crazymoogle]

You'd get to these pages via a main index, that would lay out all the issues of a magazine in a grid so's you can click on an issue to get details on it.

This part would probably be as easy as generating the list using Movabletype's excerpt section and making sure the excerpt for each article contains a picture.

I'm not sure if you'd save much time considering all of the typing, linking and code involved to get each entry to look right anyway, but I suppose it would possible to make some sort of brute force SQL script for intaking all of the information.

I'm not an SQL guru though, so I won't be of any help in that regard.

 

[Crazymoogle]

This is for my Dad's business he runs. I threw this together in about 2 hours a few nights ago, Ignore the text as its all placeholder crap untill my dad writes some more, ignore the adds I figured you guys could bomb on 250free.com instead of my bandwidth :lol

Interesting.

++++Clean
--contrast is pretty low
-bright orange ads are choking out your line of action
-animated spheres can't seem to handle moving off/on without restarting the animation
=I'd normally recommend a bar or something behind the logo
=You'll need scrollbars to handle the text overflow.

I gather you probably know about most of those problems already, so you're basically nearly done. I find it slightly hard to read with that kind of contrast, but for what appears to be a say-nothing-but-the-company-line site, it's pretty good. The flash put basically no strain on my system, which is always a good sign.

 

[sc0la]

Yeah I already have most of those problems on my to do list.
-The Ads will be gone on our servers.
-I self taught myself flash so I need to do a bit more learning untill I can get the actionscript to turn the animation around right as you leave the button area.
- That is a good idea, I will probably define the logo area a bit more when I go back and actually select the final fonts. I need to meet with my dad to actually design a logo at some point. Thanks
-I was actually going to add a button within the text area for text overflow (to "next page" the info) but perhaps a scroll bar is a better option. The biggest problem with a scroll bar is either building it from scratch, or skinning another. This site is only a temp untill we can get something that fits him better up and running, but this is better than a coming soon page in the meantime. Do think there are any specific advantages to a scroll bar that would make the extra time worth it in this scenario?

The site doesn't need to deliver too much info, it is essentially an advertising tool for him. Since its a one man show he just needs a site to land prospective clients before they meet with him to give them a first taste. so flash is a good fit. I think the whole thing is like 28k right now and I want to keep this thing trim

The contrast is a big problem, I need to address that, it was even worse when I started but I had a pallete picked out from the BG of an aborted project and I didn't have any inspiration handy so... when I first showed it to my dad the text was a different color and he couldn't read it because he is b/g color blind and all that shit was grey to him =/ I felt so shitty. I can go in and change the whole pallete but I would rather not since this thing will be gone again in a few months. I really want to spend less than 10 hours when all is said and done.

Thanks for the feedback I really appreciate it. I will need all this stuff that I learn when I do my digital portfolio for my architecture work here soon