Layout: How do you design your site?

started by Bradanderson on Feb 23, 2005 — RSS Feed

Bradanderson Bradanderson
Posts: 10

Hey again,
Another question for those who design web sites out there. How do you initially "visualize" or design your site? I just drew out on paper what I was thinking, then went to Fireworks and started making my elements- buttons, graphics, etc.
Then I went to DW and started putting together these things into my page. That was before the wonderful world of CSS.
Now I design and write the CSS together along with my html page and change things as the need arises. I also try different font and color combinations until I find what I like and what fits the theme of the page.
So, my question is how many people design the individual elements and then assemble them later vs something else

Joe Gillespie Joe Gillespie
Posts: 528

The first thing to do is to design a plain vanilla page with no styling but with all the content semantically marked up in the (X)HTML and validated. That is the 'design' phase. Now your content can be 'styled' for desktop computers, printouts, PDAs, mobile phones, Web-enabled microwave oven or whatever.

I think that producing the 'style' first and then trying to design around it is the wrong way to go - no matter what you are designing - buildings, cars, audio equipment. Design is about making something work best for its purpose. Design first, then embellish.

In BBEdit, I can add the styles in the source code and see the effect (in real time as I type) in a second window. I have Dreamweaver MX and GoLive CS but neither of them produce good CSS and I don't use them.

Quite often at an early stage, I just assemble the divs with temporary coloured backgrounds to see how they fit together, interact and behave across browsers. Then, it's just a matter of tweaking the selectors. I usually start with the CSS on the same page as the HTML until the design is finalised (and validated) and then move it out into an external file so that it can be accessed by other pages in the same set.

Bradanderson Bradanderson
Posts: 10

Thanks for your reply. I've also read in other forums from designers who actually put everything together using Photoshop and then cut it up and make their pages from there. I understnad that helps to visualize the finished product, but is this still a "standard" way to do things?

Joe Gillespie Joe Gillespie
Posts: 528

A lot of people design their whole pages in Photoshop but that usually produces fixed size designs that work at one monitor size - which is dangerous. The size and resolutions of monitors is changing daily - up and down.

Designing the 'look' and separate elements of a page in Photoshop is fine. I do that.

Milosz Nasadowski Milosz Nasadowski
Posts: 1

John Smith said:
I generally use Photoshop & Coreldraw for designing my website.

Exactly the same as me but in different order . That's weird because only few people use such a combination just because Corel Draw has not the best advertising and it's only on PCs AND it is not designed for designing websites.
However, for me personally Corel Draw is better than Illustrator and because I feel free and fluent in Corel it is much much much easier and even faster to create website layouts.

Possibly Photoshop is generally better tool but personally for flexibility or quick changes to show to a client as a jpg it's perfect.

Well, the only problem is that all the graphical part of the design goes through Photoshop anyway because PS has got better 'export for web options' and colour compatibility...

Anyway actually all of my website designs were designed or partially designed in Corel Draw.

James Farrell James Farrell
Posts: 3

I start with paper. From there I move to Photoshop.

At that stage I agree a design with the client and then once that's confirmed I begin to code it...


Ken Liang Ken Liang
Posts: 4

I usually start off in a mind maping software. Once I have all the information nicely structured (wiring diagram) then I would move to the visuals. First I would work on the layout, either on paper or Photoshop depending on the size of the project. Then follow by choosing the right colour scheme, photographs and design elements. Once all the page designs are approved I would use Topstyle for coding HTML and CSS.

Hope that helps.

Scott Thompson Scott Thompson
Posts: 9

When i designed up my personal site I designed it out on paper. BUT... if you are going to work on adding more stuff to your site, the design will likely change drastically over time.

Within 1 year i had to change coder profiles layout and design 3 times to get to what i have now. I'm currently drawing out the rest of the sites applications on paper so i can visualize exactly how everything will fit together.

You can also see exactly how i update to site via checking out the development blog but it's not all design related because i also do the programming etc behind the site.

Hope that helps.

Kind regards,

If you enjoy programming, then checkout my coder profile

Jason Hyman Jason Hyman
Posts: 13

Always begin with the end in mind. Think of it like a blueprint for a house. Map out exactly what you want first then build your site.
do you want a 4 bedroom? 3 bedroom? The differnce with your site is you can always add and remove easier, however, if you customize your graphics and then want to add more later, you might not have the room in the meny system.
Try and think it through. Franklin Covey uses that quote, begin with the end in mind.

That is short and sweet.

St Louis Web Design | St Louis SEO

Hossam Elnaghy Hossam Elnaghy
Posts: 7

Good website design isn't just about pretty colors, groovy graphics, and knocking out code with software like Dreamweaver. While a terrible look can certainly kill a site, even the fanciest design can't help a site that doesn't provide reliable information of value to visitors in a sensible and easy-to-use format. Good website design requires substantial planning, and takes into consideration not just visual design but also content, tone and the way information is arranged, as well as accessibility and usability for people with varying degrees of ability.

Rob Kristie Rob Kristie
Posts: 4

I always do the layout last. If you use CSS you can change the layout real easy, so I make sure the site structure is in place before I think about laying it out. I want to make sure the site works first.

Than, I usually start with Illustrator. I don't like laying stuff out in Photoshop, it takes too long. I am just faster in Illustrator. Then, I export it to photoshop and add any effects I need on certain elements.

David Taylor David Taylor
Posts: 2

Hi, we have a strict process starting with Marketing Messages (not part of the design phase), then the design phase which includes data architecture design, designing wireframes, then designing the look & feel (all in photoshop). All of the visual design is done with CSS/XHTML in mind and whether the site is liquid or fixed. Finally we are into the coding phase. Sounds long winded but it doesn't have to be. Hope this helps!

Web Design Oxfordshire UK

Mike G Mike G
Posts: 5

When designing and developing a website, first, its important to understand the site objectives, messaging and content and functionality. Next, construct a wireframe to define the larger layout divisions - initially on paper but then in photoshop/fireworks. Then begin coding the site so that the structure is in working order with valid HTML. Then, push the visual design through CSS styling, while periodically checking for cross-browser compatibility.

MASSMEDIUMS | Cincinnati Web Design

Chris Strupp Chris Strupp
Posts: 13

Mainly fireworks then exporting into dreamweaver, but it really depends on the task because I do certain tasks in other apps easier to save time. I am a internb though so I am still learning the best way to do stuff.

Digital Extreme Media Group

David Alford David Alford
Posts: 7

We design our site using photoshop. The layout of the site is designed using photoshop then we slice it up and code it in using html and css. We can easily apply it to joomla, drupel, magento or any other opensource platform.

Rohit  Tripathi Rohit Tripathi
Posts: 6

Everytime i come up with an idea or design and have followed it up till the stage where design n implementation has been done, only to realise that i don't like the whole design/idea which seems to be good idea at first

it happens quite often even though in the early planning stage everything seems to be fine and perfect

probably because i am not that creative

Herman Brummer Herman Brummer
Posts: 14

hey Brad, I normally scour the net for a couple of weeks and visit sites like smashing magazine to see what other top website designers are doing.

Once I find a couple of idea's and elements I like, I will start on the design process.

You must login to reply