How do you design a website?

Discussion in 'HTML' started by Ikke, Dec 4, 2006.

  1. Ikke

    Ikke Guest

    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
     
    Ikke, Dec 4, 2006
    #1
    1. Advertising

  2. Ikke

    Ed Seedhouse Guest

    On Mon, 04 Dec 2006 00:01:20 GMT, 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.


    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...
     
    Ed Seedhouse, Dec 4, 2006
    #2
    1. Advertising

  3. Ikke

    dorayme Guest

    In article <>,
    Ed Seedhouse <> wrote:

    > On Mon, 04 Dec 2006 00:01:20 GMT, 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.

    >
    > 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.

    --
    dorayme
     
    dorayme, Dec 4, 2006
    #3
  4. 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
    --
    remove blah to email me
     
    =?ISO-8859-1?Q?G=E9rard_Talbot?=, Dec 4, 2006
    #4
  5. Ikke

    mbstevens Guest

    On Mon, 04 Dec 2006 00:01:20 +0000, Ikke wrote:

    > 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.
     
    mbstevens, Dec 4, 2006
    #5
  6. Ikke

    K A Nuttall Guest

    Ikke wrote:

    > 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.

    --
    K A Nuttall
    www.yammer.co.uk
    Re-type the e-mail address how it sounds, remove .invalid
     
    K A Nuttall, Dec 4, 2006
    #6
  7. Ikke

    Ganesh Guest

    On Dec 4, 6:05 am, Ed Seedhouse <> wrote:
    > On Mon, 04 Dec 2006 00:01:20 GMT, 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.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...


    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
     
    Ganesh, Dec 4, 2006
    #7
  8. Ikke wrote:
    > 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, Dec 4, 2006
    #8
  9. Ed Seedhouse wrote:
    > 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...
     
    Travis Newbury, Dec 4, 2006
    #9
  10. Ikke

    Andy Dingley Guest

    Ikke wrote:

    > 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.
     
    Andy Dingley, Dec 4, 2006
    #10
  11. Ikke

    Chaddy2222 Guest

    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

    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.
    --
    Regards Chad. http://freewebdesign.cjb.cc
     
    Chaddy2222, Dec 4, 2006
    #11
  12. Ikke

    Bergamot Guest

    Travis Newbury wrote:
    >
    > 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.

    --
    Berg
     
    Bergamot, Dec 4, 2006
    #12
  13. Ikke

    Neredbojias Guest

    To further the education of mankind, Ikke <> vouchsafed:

    > 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'?

    --
    Neredbojias
    Infinity has its limits.
     
    Neredbojias, Dec 4, 2006
    #13
  14. Ikke

    Ed Seedhouse Guest

    On 4 Dec 2006 02:46:40 -0800, "Travis Newbury"
    <> wrote:

    >Ed Seedhouse wrote:
    >> All this and not a word about the content!


    >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.

    >> 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...


    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, Dec 4, 2006
    #14
  15. Ikke

    Ed Seedhouse Guest

    On Mon, 04 Dec 2006 06:33:32 -0600, Bergamot <> wrote:

    >Travis Newbury wrote:
    >>
    >> 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.


    People still do fixed width sites?

    Do they design cars that still require a hand crank to start as well?
     
    Ed Seedhouse, Dec 4, 2006
    #15
  16. Ed Seedhouse wrote:
    > >Travis Newbury wrote:
    > >> 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.

    > 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.
     
    Travis Newbury, Dec 4, 2006
    #16
  17. Ikke

    Ikke Guest

    Ed Seedhouse <> wrote in
    news::

    <snip>
    > 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...

    <snipped your advice>
    > 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, Dec 4, 2006
    #17
  18. Ikke

    Ikke Guest

    mbstevens <> wrote in
    news:p:

    > On Mon, 04 Dec 2006 00:01:20 +0000, Ikke wrote:
    >
    >> 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.


    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, Dec 4, 2006
    #18
  19. Ikke

    Ikke Guest

    Neredbojias <http://www.neredbojias.com/fliam.php?cat=alt.html> wrote in
    news:Xns988F4F178BBAFhttpwwwneredbojiasco@208.49.80.251:

    > To further the education of mankind, Ikke <> vouchsafed:
    >
    >> 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.


    Thanks :)

    >> 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.


    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.

    >> 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.


    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 :)

    >> Thanks in advance for all suggestions and ideas!
    >>
    >> Ikke

    >
    > 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 :)
     
    Ikke, Dec 4, 2006
    #19
  20. Ikke

    dorayme Guest

    In article <Xns988FEC9C613ECikkehierbe@195.130.132.70>,
    Ikke <> wrote:

    > mbstevens <> wrote in
    > news:p:


    > > 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.
    >


    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.

    --
    dorayme
     
    dorayme, Dec 4, 2006
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.

Share This Page