Website Building Process - What's yours?

SYAWEDIS · Jul 12, 2012

Hi,

I've been designing websites for like 3 or 4 months now, and I always make them from scratch. I look around for inspiration and what not, but it's always from the ground up.

I was just wondering what most web designers do -do you usually start with a template or draw out a frame first? Do you get them online or make your own?

I tried searching for a thread like this but I had no luck, so if this is somehow a duplicate thread I apologize and feel free to delete / lock it (but please redirect me first!

)

Thanks,

agente808 · Jul 12, 2012

I start with 960.gs for the layout or "frame" (http://960.gs)
It helps with alignment of elements.

from there I design in photoshop from scratch

for converting into a usable template, I have a framework for the coding already set up to make conversion faster

SYAWEDIS · Jul 12, 2012

agente808 said:
I start with 960.gs for the layout or "frame" (http://960.gs)
It helps with alignment of elements.

from there I design in photoshop from scratch

for converting into a usable template, I have a framework for the coding already set up to make conversion faster

Thanks for the link. At first I was like huh? o.0 but after reading a bit and looking through their slideshow it makes a lot of sense to use the grid system. I normally just do the math myself, which isn't so bad because I like the numbers, but when it comes to efficiency and speed I can see how the grid system can be a valuable tool.

I'm gonna look into this some more

kralcx · Jul 13, 2012

I second the 960 grid system. I sometimes use a template; either way I hand draw a wireframe to start. Get my ideas on paper. I then make a Style Guide Documentation http://www.alistapart.com/articles/writingainterfacestyleguide/ so I know about fonts, colors, background images, accessibility, etc.. I use http://colorschemedesigner.com/ to keep me from messing up my colors. I then gather illustrations and pictures that I will use (sometimes I pay for these). Then mockup in Adobe Fireworks; which makes sending editable pdf files (for feedback) to a client a breeze. Then I hand code in Dreamweaver. Lastly I'm sure to do cross browser testing.

I make sure my css and javascript is external as much as possible; it makes it easier for future edits (for example if I want to make the site responsive). And I also make sure to keep all original files such as text files, MS Word files, psd, firework png files, etc. Never know when you might need these in the future.

Zapdos · Jul 13, 2012

The 960 grid system is becoming a standard quickly. I see so many themes based off of it.

As for how I do it, I do it from scratch or a template. Depends on how lazy or how inspirational I'm feeling. Also depends on if I can find a good template and if not, I go from scratch. Normally I first determine what I'm trying to accomplish and all the ways to do it. Will a front page rotation be beneficial or detrimental? Do I need to keep an user bar in the view or no? What colors will make them convert better? Will it fit with the logo? Then I go into photoshop and start doing basic design. Get the boxes where they should be, give some color and add text. Does it look good? If so, continue and refine it with a typography layout. If not, redo.

Unfortunately I'm hitting brick walls on ideas for my latest project and not finding any suitable themes. Sucks to be me lol.

Edit:
To the previous poster who recommended colorschemedesigner, that's a good idea. Done it before, but with a different website. Infact, its adobe and people share some nice contrasting and complimentary colors. http://kuler.adobe.com

SYAWEDIS · Jul 14, 2012

kralcx said:
I second the 960 grid system. I sometimes use a template; either way I hand draw a wireframe to start. Get my ideas on paper. I then make a Style Guide Documentation http://www.alistapart.com/articles/writingainterfacestyleguide/ so I know about fonts, colors, background images, accessibility, etc.. I use http://colorschemedesigner.com/ to keep me from messing up my colors. I then gather illustrations and pictures that I will use (sometimes I pay for these). Then mockup in Adobe Fireworks; which makes sending editable pdf files (for feedback) to a client a breeze. Then I hand code in Dreamweaver. Lastly I'm sure to do cross browser testing.

I make sure my css and javascript is external as much as possible; it makes it easier for future edits (for example if I want to make the site responsive). And I also make sure to keep all original files such as text files, MS Word files, psd, firework png files, etc. Never know when you might need these in the future.

Thanks for contributing.

The grid system seems like a logical way to design websites for sure, still trying to wrap my head around it though.

Colorschemedesigner confuses me a little, though. Maybe I just need to practice with it, but the color combinations it suggests don't seem that tasteful, or at all common, imo.

SYAWEDIS · Jul 14, 2012

Zapdos said:
The 960 grid system is becoming a standard quickly. I see so many themes based off of it.

As for how I do it, I do it from scratch or a template. Depends on how lazy or how inspirational I'm feeling. Also depends on if I can find a good template and if not, I go from scratch. Normally I first determine what I'm trying to accomplish and all the ways to do it. Will a front page rotation be beneficial or detrimental? Do I need to keep an user bar in the view or no? What colors will make them convert better? Will it fit with the logo? Then I go into photoshop and start doing basic design. Get the boxes where they should be, give some color and add text. Does it look good? If so, continue and refine it with a typography layout. If not, redo.

Unfortunately I'm hitting brick walls on ideas for my latest project and not finding any suitable themes. Sucks to be me lol.

Edit:
To the previous poster who recommended colorschemedesigner, that's a good idea. Done it before, but with a different website. Infact, its adobe and people share some nice contrasting and complimentary colors. http://kuler.adobe.com

I like the adobe link much better for color combinations, thanks for the share!

Is there a good source somewhere with a number of different layout templates?

Irukichan · Jul 14, 2012

I disagree and believe the 960 grid system is quickly becoming outdated in today's web design.

Sure, you still see a lot of people on Themeforest touting their 960 grid perfection, but let's face it--they are usually the last people to adapt to new web trends. The new design trend is moving towards wider layouts to match the growing screen real estate and especially towards responsive design.

I never touch Dreamweaver, I think it's a design crutch in a lot of ways. I also think that it's better to have a typography boilerplate and design text in-browser as it's quicker, easier, and more true-to-form than doing it in Photoshop. I used to design using Thesis as a starting point for Wordpress (and I sill often have requests for it), but now I much prefer using my own code base. It's not a framework because I don't want uselessly bulky code--just a good boilerplate for a fresh design. I try to keep my designs as clean and image-free as possible for loading time so I do progressive enhancement for all browsers.

For color schemes, http://www.colourlovers.com/ is totally awesome and crowd sourced, and most of my textures come from http://subtlepatterns.com/.

I TRY to use responsive design everywhere that I can, but there are some situations where it just becomes very difficult and mobile sites or apps are the more logical solution.

SYAWEDIS · Jul 14, 2012

Irukichan said:
I disagree and believe the 960 grid system is quickly becoming outdated in today's web design. Sure, you still see a lot of people on Themeforest touting their 960 grid perfection, but let's face it--they are usually the last people to adapt to new web trends. The new design trend is moving towards wider layouts to match the growing screen real estate and especially towards responsive design. I never touch Dreamweaver, I think it's a design crutch in a lot of ways. I also think that it's better to have a typography boilerplate and design text in-browser as it's quicker, easier, and more true-to-form than doing it in Photoshop. I used to design using Thesis as a starting point for Wordpress (and I sill often have requests for it), but now I much prefer using my own code base. It's not a framework because I don't want uselessly bulky code--just a good boilerplate for a fresh design. I try to keep my designs as clean and image-free as possible for loading time so I do progressive enhancement for all browsers. For color schemes, http://www.colourlovers.com/ is totally awesome and crowd sourced, and most of my textures come from http://subtlepatterns.com/. I TRY to use responsive design everywhere that I can, but there are some situations where it just becomes very difficult and mobile sites or apps are the more logical solution.

Thanks for the input, your replies are always very informative. I agree on dreamweaver, I was always told it's a bad habbit to stay away from which is why I jumped into hand-writing all my html from the get-go. I haven't touched WP yet, but I've been meaning to look into it, I just have a lot on my plate right now. I don't know what a typography boilerplate is but I've heard you mention it before, gonna look into it. I tried looking into google fonts but had a hard time finding a narrow + tall font, and kind of gave up. What's your thoughts on google fonts? You said you try to use as few images as possible (me too) , but do you ever use PNGs or do you color match the background to your image and save it as a jpg for faster load time? TY TY for the color link and especially those patterns, been looking for something like that.

DeskCoder · Jul 14, 2012

I usually start with something like bootstrap - http://twitter.github.com/bootstrap/ - to get a responsive web design. There are other frameworks out there, but I like this one the best. It also comes with a grid system, which is nice.

I always start building the HTML only to start. I don't worry about CSS or colors or anything like that. I stub out the HTML ... layout all the sections I want (header, main content, sidebar, footer). After I get everything in place with the HTML, I finish the layout with CSS.

Another cool thing about Bootstrap is that it comes with LESS - http://twitter.github.com/bootstrap/less.html - this saves me from having to choose colors because I can name variables for the colors (like @mainColor, @secondaryColor), and I can change these at anytime. After I get the layout done ... which means floating and positioning everything where I want it.

Finally I work on color. I second Kuler, I really like that site. I also look for inspiration from CSS galleries and places like that. But somehow I also go to my fallback - blue and orange (Detroit Tiger colors).

NOTE: I don't do a lot of PHP, but I am getting into it, so I may have to tweak this style to compensate.

Zapdos · Jul 14, 2012

I love google fonts. Open Sans is my default for now, with Muli as a close second. http://designshack.net/articles/css/10-great-google-font-combinations-you-can-copy/ Some great combinations there
Will likely start using @font-face though and see what works better.

Never use PNGs unless you need lossless quality (running a HDRI image site) or transparency. PNG is just a waste of space and bandwith unless you need it to look 100% original or transparent. They also sometimes help when working with grain in patterns since JPG alters colors a little and can throw it off.

FunkyWaltz · Jul 14, 2012

960 grid is the only way to go.

Open up the photoshop template, and the possibilities are endless. Makes for a very quick process at that.

Bazinga · Jul 14, 2012

PSD > Slicing > Templating using getskeleton > WP Themeing using Toolbox/TwentyEleven

blackhatdamo · Jul 14, 2012

Hi there I have been making websites for a few years now and usually start with a rough mock-up / wireframe of the layout and sizes. Then I code the basic layout, do graphics, put it all together, Unless its for wordpress then I do the wp integration after the code.

The 960 grid system is good, you cant really go wrong if you use this. Also for responsive layouts there is one out called bones which is HTML5.

Also for making WP themes there is a blank theme called starkers, although I found it easier disecting the twenty ten theme.

Zapdos · Jul 14, 2012

DeskCoder said:
I usually start with something like bootstrap - http://twitter.github.com/bootstrap/ - to get a responsive web design. There are other frameworks out there, but I like this one the best. It also comes with a grid system, which is nice.

[...]

Another cool thing about Bootstrap is that it comes with LESS - http://twitter.github.com/bootstrap/less.html - this saves me from having to choose colors because I can name variables for the colors (like @mainColor, @secondaryColor), and I can change these at anytime. After I get the layout done ... which means floating and positioning everything where I want it.
[...]

I've been reading up on bootstrap and LESS (have heard of it before, didn't look into it much back then) and it seems to be a great way to start out. Definitely look to speed up the process and make it more consistent on both the layout and css part. Always hated copy+pasting colors from a secondary text file describing all the colors.

Thanks for the links!

Irukichan · Jul 15, 2012

SYAWEDIS said:
I haven't touched WP yet, but I've been meaning to look into it, I just have a lot on my plate right now. I don't know what a typography boilerplate is but I've heard you mention it before, gonna look into it. I tried looking into google fonts but had a hard time finding a narrow + tall font, and kind of gave up. What's your thoughts on google fonts? You said you try to use as few images as possible (me too) , but do you ever use PNGs or do you color match the background to your image and save it as a jpg for faster load time?

A boilerplate is just something that can be used and reused in different contexts--a general starting point for a design. One pretty cool typography boilerplate can be found here: http://type-a-file.com/#seafarer. I used it as a basis for creating my own boilerplate that I use to start every project. Also, I can never really find fonts I want to use from Google's API so I usually use font-squirrel's @font-face generator. The only bad thing I can think of for Google fonts is that you can have a flash of unstyled content when users view your website. Some visitors will see your website styled in default system fonts for a second before the actual fonts load.

As already mentioned, PNGs should only be used in circumstances where they are needed. I have several transparent "texture" PNGs that I use to overlay background colors and of course it's much easier than colormatching everything. It does require the workaround for IE6, but that's not too bad.

If you're looking to get into WP in the future, I'd like to reinforce that it's not difficult at all. It only takes a few days if you've already got the HTML/CSS thing down. I can be impressively bad at PHP and still do fine

SYAWEDIS · Jul 15, 2012

DeskCoder said:
I usually start with something like bootstrap - http://twitter.github.com/bootstrap/ - to get a responsive web design. There are other frameworks out there, but I like this one the best. It also comes with a grid system, which is nice.

I always start building the HTML only to start. I don't worry about CSS or colors or anything like that. I stub out the HTML ... layout all the sections I want (header, main content, sidebar, footer). After I get everything in place with the HTML, I finish the layout with CSS.

Another cool thing about Bootstrap is that it comes with LESS - http://twitter.github.com/bootstrap/less.html - this saves me from having to choose colors because I can name variables for the colors (like @mainColor, @secondaryColor), and I can change these at anytime. After I get the layout done ... which means floating and positioning everything where I want it.

Finally I work on color. I second Kuler, I really like that site. I also look for inspiration from CSS galleries and places like that. But somehow I also go to my fallback - blue and orange (Detroit Tiger colors).

NOTE: I don't do a lot of PHP, but I am getting into it, so I may have to tweak this style to compensate.

Thank you for these useful links! I haven't heard of bootstrap but you make it sound pretty useful, especially the LESS color thing.

Irukichan said:
A boilerplate is just something that can be used and reused in different contexts--a general starting point for a design. One pretty cool typography boilerplate can be found here: http://type-a-file.com/#seafarer. I used it as a basis for creating my own boilerplate that I use to start every project. Also, I can never really find fonts I want to use from Google's API so I usually use font-squirrel's @font-face generator. The only bad thing I can think of for Google fonts is that you can have a flash of unstyled content when users view your website. Some visitors will see your website styled in default system fonts for a second before the actual fonts load.

As already mentioned, PNGs should only be used in circumstances where they are needed. I have several transparent "texture" PNGs that I use to overlay background colors and of course it's much easier than colormatching everything. It does require the workaround for IE6, but that's not too bad.

If you're looking to get into WP in the future, I'd like to reinforce that it's not difficult at all. It only takes a few days if you've already got the HTML/CSS thing down. I can be impressively bad at PHP and still do fine

I'm kind of confused about boilerplate still, and that link didn't really explain it for me, but it was a good read nonetheless. I really don't like the sounds of the flash of unstyled content with google fonts. You use a font generator you said?

I know that you only should use PNGs where you have to, but I was wondering if people go a step beyond that and just color match the background to your logo for example, and save it as a jpg instead of a transparent png.

BTW, is IE6 still part of standard cross-browser testing?

SYAWEDIS · Jul 15, 2012

Zapdos said:
I love google fonts. Open Sans is my default for now, with Muli as a close second. http://designshack.net/articles/css/10-great-google-font-combinations-you-can-copy/ Some great combinations there
Will likely start using @font-face though and see what works better.

Never use PNGs unless you need lossless quality (running a HDRI image site) or transparency. PNG is just a waste of space and bandwith unless you need it to look 100% original or transparent. They also sometimes help when working with grain in patterns since JPG alters colors a little and can throw it off.

I forgot to mention thanks for that link, btw! There are some great combinations for sure.

WPRipper · Jul 15, 2012

Zapdos said:
I love google fonts. Open Sans is my default for now, with Muli as a close second. http://designshack.net/articles/css/10-great-google-font-combinations-you-can-copy/ Some great combinations there
Will likely start using @font-face though and see what works better.

Never use PNGs unless you need lossless quality (running a HDRI image site) or transparency. PNG is just a waste of space and bandwith unless you need it to look 100% original or transparent. They also sometimes help when working with grain in patterns since JPG alters colors a little and can throw it off.

Complete nonsense.

SYAWEDIS · Jul 15, 2012

RedDeezer said:
Complete nonsense.

what part is nonsense?

Website Building Process - What's yours?

Regular Member

Regular Member

Regular Member

Junior Member

Power Member

Regular Member

Regular Member

Registered Member

Regular Member

Regular Member

Power Member

Junior Member

Newbie

Registered Member

Power Member

Registered Member

Regular Member

Regular Member

Elite Member

Regular Member

Main Menu

Marketplace

Making Money

BlackHat World