How do you design a website?

[Ikke]

Hi everybody,

First of all: I am a software developer, not a designer. When I start
designing a website, first of all I list the things that need to be shown.
Then I surf around for a while, looking for ideas, color combinations,
layouts, etcetera...

After all that, I start writing html/css and keep on altering what I have
until I end up with a design I like.

At my previous workplace, the designers always started out in Photoshop,
creating the site until all the details were finished, after which they
handed the result to the developers.

I'd like to know which method people prefer, or if there are other ways of
handling the design process.

Thanks in advance for all suggestions and ideas!

Ikke

 

[Ed Seedhouse]

Hi everybody,

First of all: I am a software developer, not a designer. When I start
designing a website, first of all I list the things that need to be shown.
Then I surf around for a while, looking for ideas, color combinations,
layouts, etcetera...

After all that, I start writing html/css and keep on altering what I have
until I end up with a design I like.

At my previous workplace, the designers always started out in Photoshop,
creating the site until all the details were finished, after which they
handed the result to the developers.

I'd like to know which method people prefer, or if there are other ways of
handling the design process.

All this and not a word about the content! Do people use a website
because it looks cool or because it has content they want or need? I
suggest it is the latter and if I am right then you have your design
process rather backwards, don't you?

How about this. Start with the content you want to give to people.
Split it up into page size chunks. Now take the first chunk and mark it
up with html according to it's meaning - that is, to use a chatch word,
"semantically".

Don't style it at all yet, just code it semantically and take a look at
the result in a browser. Then think about how the content will best be
laid out to make it most useable to the user. Remember all the things
you don't have any control over, that some people possibly will use your
page yet never see it, and that the web is not paper.

Now create any html hooks you need for your CSS, such as grouping
elements and so on, then code your CSS to achieve the layout you decided
will best server your users and make it look good.

Just for your consideration...

 

[dorayme]

All this and not a word about the content! Do people use a website
because it looks cool or because it has content they want or need? I
suggest it is the latter and if I am right then you have your design
process rather backwards, don't you?

How about this. Start with the content you want to give to people.
Split it up into page size chunks. Now take the first chunk and mark it
up with html according to it's meaning - that is, to use a chatch word,
"semantically".

Don't style it at all yet, just code it semantically and take a look at
the result in a browser. Then think about how the content will best be
laid out to make it most useable to the user. Remember all the things
you don't have any control over, that some people possibly will use your
page yet never see it, and that the web is not paper.

Now create any html hooks you need for your CSS, such as grouping
elements and so on, then code your CSS to achieve the layout you decided
will best server your users and make it look good.

Just for your consideration...

Good advice indeed and well put. When it does come time to do how
you want it to look, there is no particular method. Just remember
the design constraints: people do not always have big scrreens,
some people do and want to be able to use them to advantage. You
will not please everyone but you can try your best by not putting
too many artificial limits on stuff like widths, use ems where
possible, let things grow as naturally as possible. Look up the
FAQs here for links to fluid design ideas.

 

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

Ikke wrote :

Hi everybody,

First of all: I am a software developer, not a designer. When I start
designing a website, first of all I list the things that need to be shown.
Then I surf around for a while, looking for ideas, color combinations,
layouts, etcetera...

After all that, I start writing html/css and keep on altering what I have
until I end up with a design I like.

At my previous workplace, the designers always started out in Photoshop,
creating the site until all the details were finished, after which they
handed the result to the developers.

I'd like to know which method people prefer, or if there are other ways of
handling the design process.

Thanks in advance for all suggestions and ideas!

Ikke

Start with content. Then structure it. Then describe it with the best
semantic markup. Then make it accessible (with proper use of
accessibility elements/attributes: label, accesskey, summary, alt,
scope, etc.). If you do these first parts correctly, then your webpage
should render accordingly in various media (screen, print, handheld,
aural, etc). Then, and only then, style it with CSS. And then
javascript, if needed to enhance presentation, is after styling.

Ed Seedhouse gave you an excellent answer.

Gérard

 

[mbstevens]

At my previous workplace, the designers always started out in Photoshop,
creating the site until all the details were finished, after which they
handed the result to the developers.

They had people who knew the most about web design implementing the
designs of people who knew the least.

The photoshop design was a picture. A web page may appear to be a picture
on one browser and display. However, it will actually be viewed on many
browsers, and different displays, under many visitor preferences; so it
is not, in fact, one picture at all. A good web page is adaptive, the
design of a picture is not. The program must be able to convey the
information of the page in many different environments, from hand-held
devices and text browsers to huge wide-screen monster displays.

 

[K A Nuttall]

First of all: I am a software developer, not a designer. When I
start designing a website, first of all I list the things that
need to be shown. Then I surf around for a while, looking for
ideas, color combinations, layouts, etcetera...

After all that, I start writing html/css and keep on altering what
I have until I end up with a design I like.

At my previous workplace, the designers always started out in
Photoshop, creating the site until all the details were finished,
after which they handed the result to the developers.

I'd like to know which method people prefer, or if there are other
ways of handling the design process.

I'm a web site developer, and general techie. Where I work, 'concepts'
are sold to the customer. They are shown rough alternative designs,
created in Photoshop, together with wireframe storyboards and site
maps. A developer provides a verbal overview of the operation.

Usually, the customer knows very little (if anything) about cross-
agent, semantic markup and accessibility issues, but will gladly take
our word that these are things to be concerned about.

Once the content, structure and style are agreed upon. The job is
passed to the graphic designer, who has limited experience of web site
development, and has learned what is 'good' and what is 'bad' from
having to redo things when asked. At the same time, content and
specific images are harvested from the customer and stock libraries.

It is only when most of this has been done, that the job is passed to
the end developer. This is more through necessity than by choice. I
personally would like to be involved at an earlier stage, but I can
appreciate why I am not (too many cooks). However, being the last in
line, I am endowed with a certain amount of 'carte blanche', after all,
the designs are only 'concepts'.

I look at the content and the design, and come up with a sensible
markup and navigation strategy, then incorporate the suggested style as
best I can, without sacrificing meaning and usability.

I'm not saying it's the best way to do things, but it's the way I work
at the moment, and this has been forced by commercial reality rather
than academic desires.

 

[Ganesh]

because it looks cool or because it has content they want or need? I
suggest it is the latter and if I am right then you have your design
process rather backwards, don't you?

How about this. Start with the content you want to give to people.
Split it up into page size chunks. Now take the first chunk and mark it
up with html according to it's meaning - that is, to use a chatch word,
"semantically".

Don't style it at all yet, just code it semantically and take a look at
the result in a browser. Then think about how the content will best be
laid out to make it most useable to the user. Remember all the things
you don't have any control over, that some people possibly will use your
page yet never see it, and that the web is not paper.

Now create any html hooks you need for your CSS, such as grouping
elements and so on, then code your CSS to achieve the layout you decided
will best server your users and make it look good.

Just for your consideration...

Let me know if this is right....

If I have a online software tool to sell. With the following content.
1. Features
2. Cost
3. Price Comparison
4. Feature comparison
5. A short literature.
6. More details

I'll
1. break these things down in to different sections and see first how
everything fits right on the page.
2. Then work out a web page design that I think would fit right.
3. Then plan the css file.

Is this how one should go. Let me know if this is a good plan.

Ganesh

 

[Travis Newbury]

At my previous workplace, the designers always started out in Photoshop,
creating the site until all the details were finished, after which they
handed the result to the developers.
I'd like to know which method people prefer, or if there are other ways of
handling the design process.

There is no correct way, and it totally depends on the site. There is
little need to create a site like google with Photoshop. On the other
hand, it would be almost impossible to design a site like Cartoon
Network's site without it.

I prefer the Photoshop method because you can get more "artsy", but it
lends itself better to a fixed width site which some people around here
don't like.

Something to think about, unless you are artistic in nature, (or want a
blocky looking bland site) let a designer design the site and you make
it happen.

Just a thought

 

[Travis Newbury]

All this and not a word about the content! Do people use a website
because it looks cool or because it has content they want or need? I
suggest it is the latter and if I am right then you have your design
process rather backwards, don't you?

I thought the question was beyond content and more a discussion of
methods used in design.

How about this. Start with the content you want to give to people.
Split it up into page size chunks. Now take the first chunk and mark it
up with html according to it's meaning - that is, to use a chatch word,
"semantically".

Yea, that is one (snore) way to go...

 

[Andy Dingley]

At my previous workplace, the designers always started out in Photoshop,
creating the site until all the details were finished, after which they
handed the result to the developers.

That's the "professional" approach to web design. It's usually favoured
by people who used to be paper-based designers and ought to stay there.
The result is crappy unusable websites that assume every view window is
the same size in pixels and then fail badly if this isn't the case.
They may also be sluggish to load and generally light on content, but
those are minor problems in comparison.

If you meet a dezyner who thinks that web design starts with
Potatoshop, break their fingers.

 

[Chaddy2222]

Hi everybody,

First of all: I am a software developer, not a designer. When I start
designing a website, first of all I list the things that need to be shown.
Then I surf around for a while, looking for ideas, color combinations,
layouts, etcetera...

After all that, I start writing html/css and keep on altering what I have
until I end up with a design I like.

At my previous workplace, the designers always started out in Photoshop,
creating the site until all the details were finished, after which they
handed the result to the developers.

I'd like to know which method people prefer, or if there are other ways of
handling the design process.

Thanks in advance for all suggestions and ideas!

Ikke

I tend to grab the content first, or if I don't have any, I throw in
some stuff where the content should go and then tweek the CSS till the
site looks how I want it, then I tweek it a bit more if need be.

 

[Bergamot]

I prefer the Photoshop method because you can get more "artsy", but it
lends itself better to a fixed width site

Bollocks. It only lends itself better to a fixed width site if you lack
the imagination necessary to envision a flexible design.

 

[Neredbojias]

Hi everybody,

First of all: I am a software developer, not a designer. When I start
designing a website, first of all I list the things that need to be
shown. Then I surf around for a while, looking for ideas, color
combinations, layouts, etcetera...

After all that, I start writing html/css and keep on altering what I
have until I end up with a design I like.

Basically you are saying you assemble your content then surveil and
experiment with formats and layouts until you get a pleasing result.
Kudos, so do most of us.

At my previous workplace, the designers always started out in
Photoshop, creating the site until all the details were finished,
after which they handed the result to the developers.

....And what do the developers do, undesign it? Photoshop isn't needed for
website design though it may help with the graphics, of course.

I'd like to know which method people prefer, or if there are other
ways of handling the design process.

People prefer many things, most of them disharmonious.

Thanks in advance for all suggestions and ideas!

Ikke

Is that 'Ikke' like in 'ichy' or 'Ikke' like in 'Ikey' or just plain 'ich'?

 

[Ed Seedhouse]

I thought the question was beyond content and more a discussion of
methods used in design.

Design without content is just mental masturbation if you ask me. It's
like discussing how to build a house without considering the foundation
because that's not the really interesting part of the house.

Yea, that is one (snore) way to go...

Oh how clever! None of that silly old reason or logic to show me I'm
wrong. Just a one word put-down! Yep, that sure convinces me that I
was wrong alright </irony>.

 

[Ed Seedhouse]

Bollocks. It only lends itself better to a fixed width site if you lack
the imagination necessary to envision a flexible design.

People still do fixed width sites?

Do they design cars that still require a hand crank to start as well?

 

[Travis Newbury]

People still do fixed width sites?

I prefer fixed width sites

Do they design cars that still require a hand crank to start as well?

Ahhh, you are implying that it is obsolete.

 

[Ikke]

All this and not a word about the content! Do people use a website
because it looks cool or because it has content they want or need? I
suggest it is the latter and if I am right then you have your design
process rather backwards, don't you?

Not really - of course it is all about the content, it should be the main
reason for people to visit my site.

Perhaps I frased it a bit strange, but what I wanted to ask was how to do the
design once you know what your content is, and how your website will look.

Do you jump right in and start writing html/css, do you create a mockup on
paper first, do you use tools like Photoshop, etcetera...

Just for your consideration...

Thanks for your advice, and thanks to everyone who replied. I've learned a
lot from these posts.

Personally, I'm not very fond of using Photoshop or something like that, so
I'll stick to the method I'm using at the moment.

Thanks again!

Ikke

 

[Ikke]

They had people who knew the most about web design implementing the
designs of people who knew the least.

I'm afraid I have to disagree on this one - please read on to see why.

The photoshop design was a picture. A web page may appear to be a
picture on one browser and display. However, it will actually be
viewed on many browsers, and different displays, under many visitor
preferences; so it is not, in fact, one picture at all. A good web
page is adaptive, the design of a picture is not. The program must be
able to convey the information of the page in many different
environments, from hand-held devices and text browsers to huge
wide-screen monster displays.

You are correct in stating that a web page is something entirely
different from a picture, given the variety of screens, browsers,
settings and even the devices itself that connect to the internet.

But where I work, taking all that into consideration is the task of the
developer. A designer creates a picture of what the site *should* look
like, to present to a customer in order to show him what the final result
will look like.

Making sure that the design can actually be viewed by any and all is our
task. Designers do not write html, nor do they write css, all that is the
developers task.

The entire process starts as a picture, but the end result is far from a
picture, allthough it looks like the original picture.

Thanks,

Ikke

 

[Ikke]

Basically you are saying you assemble your content then surveil and
experiment with formats and layouts until you get a pleasing result.
Kudos, so do most of us.

Thanks

...And what do the developers do, undesign it? Photoshop isn't needed
for website design though it may help with the graphics, of course.

The designers at work don't only use it for the graphics, they actually
create a snapshot of what (for example) the homepage would look like.
Altering that snapshot to create a website that can be shown on the net
in all browsers and on all devices is the task of the developer.

People prefer many things, most of them disharmonious.

True - I still prefer doing the layout in some sort of trial-and-error
process based on the content I'm looking to present. I was merely
wondering what benefit other tools might offer.

At the very beginning, I even shun away from writing html, and I try to
do the layout on a piece of paper - title goes there, news items there,
main content here, etc... But it's hard to try and look through your
visitors eyes sometimes

Is that 'Ikke' like in 'ichy' or 'Ikke' like in 'Ikey' or just plain
'ich'?

If you're thinking of 'ich' as the German for 'I' then you are almost
correct. Both 'ikke' and 'ik' mean 'I' in Dutch.

Ikke

 

[dorayme]

You are correct in stating that a web page is something entirely
different from a picture, given the variety of screens, browsers,
settings and even the devices itself that connect to the internet.

But where I work, taking all that into consideration is the task of the
developer. A designer creates a picture of what the site *should* look
like, to present to a customer in order to show him what the final result
will look like.

Making sure that the design can actually be viewed by any and all is our
task. Designers do not write html, nor do they write css, all that is the
developers task.

The entire process starts as a picture, but the end result is far from a
picture, allthough it looks like the original picture.

What you are missing is perhaps this: this method is letting folk
who know little about web design straightjacket those who know
better That is, if it really has to "look like the original". If
"like" is loose and vague, then you run the risk of not giving
the customer what is promised.