SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2001
    Location
    Northern California
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm curious how others go about laying out their pages before actually creating it in a WYSIWYG program. I'm not sure how much this pertains to the hard-core hand coders out there.

    Do most of you create a mockup of the page in a graphics package and "cut out" the various pieces to use on the page, buttons/tabs, backgrounds, edging, etc? If so, what's the best way to figure out how your tables should be laid out? I'm learning by trial and error, but I thought I'd through out the question anyway.

    What about hand sketching pages on paper to get started? I do this at the very beginning but have never used any kind of graph paper or template to keep things to scale. I end up figuring out the sizes of everything all over again in Photoshop. Any comments?

    Dino

  2. #2
    Bimbo With A Brain! silver trophy Saz's Avatar
    Join Date
    Mar 2001
    Location
    Kent, United Kingdom
    Posts
    5,275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I play around with ideas in my head first, then when I have a mental idea of what I want it to look like, I start playing with graphics on the pc. I rarely put pen to paper, unless I'm trying to explain something to somebody and I don't have access to my pc!!

    I mess around with possible colour schemes and logos in a graphics program.....and if I hit on something I really like, I'll save the images I need and then start recreating what I did in the graphics program in html........usually with a wysiwyg editor, but I'm trying more and more to code straight into html.
    Saz: Naturally Blonde, Naturally Dizzy!
    No longer Editor of the Community Crier.

    Don't mind me, I'm having a BLONDE moment!

  3. #3
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Photoshop!!!

    Here is a link to my template that I use when designing a site:
    http://www.gravitydigital.com/misc_uploads/template.psd

    It is a layered Photoshop file that contains screencaps of IE at 640x480 and 800x600 (the two most common resolutions). It makes it very easy to visualize what your site will look like when it is complete.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  4. #4
    SitePoint Addict Macromedia's Avatar
    Join Date
    Nov 2000
    Location
    New York, NY
    Posts
    249
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I usually start playing around in Fireworks and see if I can come up with something I like. Sometimes I play around with designs in my head or on paper. Then when I get something I wand in Fireworks I start cutting up the image and laying it out in Dreamweaver.
    -Nick

  5. #5
    SitePoint Zealot micmar's Avatar
    Join Date
    Apr 2001
    Location
    Melbourne, Australia
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Creole - your template is a cool idea, it not only helps you design for the size but it also gives it an instant website "feel" with all the IE stuff around it.

    The way I usually get my ideas from my head to the browser is as follows... (note: this is for static pages, dynamic content takes a lot more thought- for me anyway!)

    1.) visualise how I want the site to look. The layout idea usually comes to me when I am almost asleep for some reason, dont ask me why

    2.) then I fire up photoshop, and get it EXACTLY how I want it to look.

    3.) next is probably the most crucial step. I look at the image I have created and think of the most effective, user friendly, fast loading way to implement it in HTML. If you take your time with this step and really think about it, you can save yourself a lot of time and headaches in the future!

    4.) next I code it using homesite.

    Thats it!

    There are tons of ways that you can do it but the best solution is the one that you feel comfortable with. That feeling comes with experience. Once you find your solution you will probably stick to it for the most part. I know I do.
    http://www.avgallery.com.au/ - Your ticket to high-end audio!

  6. #6
    SitePoint Zealot
    Join Date
    Apr 2001
    Location
    Northern California
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the replies! Sounds like I'm doing things fairly similar to what others are doing. I agree with micmar that like everything else, it comes with experience. I started out struggling with button and tab images, making one at a time, cropping coming out all messed up, blah blah blah. After doing it long enough I figured out how to take advantage of layers in Photoshop, duplicating images, etc. Now buttons and tabs are a piece 'o cake.

  7. #7
    SitePoint Zealot honging's Avatar
    Join Date
    Jan 2001
    Location
    Chapel Hill, NC
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I throw around ideas in my head first, then make a very rough sketch using pencil and paper. I don't add color in yet...

    I take this sketch and throw it into Photoshop. I usually design at 755 pixels x 500 pixels (bad of me not to design for those 640 res people, but alas...). I then cut the layout up, and throw it into my WYSIWYG editor (Frontpage '97!). Then, hand code some stuff (FP '97 doesn't support a lot of things...). Throw in some CSS, split the SSIs, then I'm done

  8. #8
    SitePoint Zealot micmar's Avatar
    Join Date
    Apr 2001
    Location
    Melbourne, Australia
    Posts
    188
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by honging
    I throw around ideas in my head first, then make a very rough sketch using pencil and paper. I don't add color in yet...
    Colour schemes are a big part of any design and there are a lot of factors to be considered when choosing which colours you will use on a new site. Of course like any part of designing a site, having a creative flair always helps (unfortunately my creativity likes to take long holidays).

    Personally I like to see sites that have a unique spin on a colour scheme, much like sitepoint! I think the light blue, orange and bluey-grey work very well together.

    Having an effective and original colour scheme can really help set a site out from the rest.
    http://www.avgallery.com.au/ - Your ticket to high-end audio!

  9. #9
    SitePoint Guru
    Join Date
    Sep 1999
    Location
    Singapore
    Posts
    854
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I work two ways, depending on the site in question.

    If I already know what's supposed to be on the design (e.g. news, latest discussions, etc.) I play around with the layout on paper, at this point I don't worry about the colours, like honging.

    Then I lay out the site in Photoshop, pretty standard procedure I guess. But I always check that the colours I have picked have different saturation levels by converting to greyscale.

    If I'm feeling experimental, usability be damned, I'll just start messing around in Photoshop.

  10. #10
    SitePoint Enthusiast heth2bthere's Avatar
    Join Date
    May 2001
    Location
    Texas
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    most of the time, I've already got an idea in my head of what I want it to look like then I draw it out and then work with my html to see how it actually looks in a browser window... then go/edit from there.
    *Heth*
    www.plusoneplanet.com
    www.tvguide.cjb.net
    Halo Promotions

  11. #11
    Don't get too close, I bite! Nicky's Avatar
    Join Date
    Jul 1999
    Location
    Lancashire, UK
    Posts
    8,277
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I use Illustrator to lay out my basic structure, then import into Photohop for special effects. I even add a layer of text in Photoshop so that I can see what the layout will look like BEFORE I convert into HTML. I think it is pointless to convert into HTML until the client has approved the design.

  12. #12
    PHP Developer W1LL's Avatar
    Join Date
    Apr 2001
    Location
    Leicester, UK
    Posts
    459
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I come up with an idea in my head. If I'm at work or something I'll draw a rougn draught out so I don't forget. Then I hard-code it in Notepad. If there's a complex series of tables in it, I'll draw them out to know what goes where. That's about it!

    - Will

  13. #13
    SitePoint Guru
    Join Date
    Dec 2000
    Location
    Karachi, Pakistan
    Posts
    913
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, I am totally different here.

    Well, when I need to design a website, what I usually do is, start the graphic package and I am off with it. Usually I work on more than two packages on a time, and import export images from and in both the softwares.

    After sometime, I pause to see what I have come up with and what more modifications do I have to do.

    I use bitmap to layout the template layout if I have much time in hand.


    Thanks,
    36Host.com - $36/year web hosting [affiliates earn 30%]
    * Affordable Small Business Web Hosting since 2003! *
    "500mb space, 10gb bandwith, 50 pop/ftp accounts, php,
    mysql, pre-installed php scripts, 24/7 support & more...."



  14. #14
    SitePoint Zealot Haakon's Avatar
    Join Date
    Jan 2001
    Location
    Up North
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I`m doing it really simple in the start. I only create rektangular boxes in flash and then change colors of the boxes and see if the colorflow is nice and consistent but not too simple. After that, I create a ghost template that is empty and I can start putting in pieces

  15. #15
    Skills to Pay the Bills Sparkie's Avatar
    Join Date
    Jul 1999
    Location
    A cave with 47 computers and an internet feed
    Posts
    3,559
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I usually visualize and then sketch out the website layout, so I'll have a good idea of where every piece goes before I fire up Photoshop. Its a great way to get ideas for proportions, resolutions and color schemes.

    Good luck!
    Sherice Jacob - Web Improvement Expert
    Improve Website Conversions | eBook Covers
    Follow Me on Twitter!

  16. #16
    Yugo full of anvils bronze trophy hillsy's Avatar
    Join Date
    May 2001
    Location
    :noitacoL
    Posts
    1,859
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I normally do a bit of visualisation with pencil and paper to get general look & feel going in my mind. The hard bit's often capturing what the customer wants tho...

    I have a couple of laminated colour pix of blank browser windows, which are just the ticket for throwing round ideas with people who don't have much idea of what they want, how it should be laid out, or how it should look. Just draw on them with coloured whiteboard markers.

    Then it's into Paint Shop Pro or Fireworks to do some mocking up, lorem ipsum and all.

    Depending on the requirements, I might just start coding it, or use a tracing image in Dreamweaver. Then tweak and tidy by hand.
    that's me!
    Now A Pom. And a Plone Nut
    Broccoli Martinez Airpark

  17. #17
    SitePoint Wizard silver trophy
    beley's Avatar
    Join Date
    May 2001
    Location
    LaGrange, Georgia
    Posts
    6,117
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    I usually design on paper first - just come up with 5-10 rough sketches on a blank screenshot from IE (800x600) I've printed and copied. Then I choose two or three to go ahead with and design them in Photoshop with the same screenshot. I've found that on typical 15" monitors at 800x600 with all the menus at the top of IE... the viewable area is 750 x 400 (approximately). As long as it fits in that (I usually don't worry about the length, just the width) I'm okay.

    I usually cut the pieces I need out of slices manually and hand-code my tables from the drawings I made and the pics I cut out. It works pretty well.

  18. #18
    SitePoint Zealot Overgrow's Avatar
    Join Date
    Jan 2001
    Location
    Your basement
    Posts
    192
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not to be repetitive, but I think it's essential to start on paper *before* Photoshop. Photoshop locks you into the tools you're used to while paper and pencil allow a quicker flow of ideas and at least for me, I get a better sense of balance with the page.

    Pencil, paper ->

    Photoshop ->

    ImageReady ->

    EditPlus............. the web.
    Overgrow the Government: The Edge Forums
    presented by Overgrow Marijuana Magazine

    *warning: adult content

  19. #19
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would have to disagree with overgrow and beley.

    Photoshop IS my pencil and paper. I can create much more effectively digitally than I ever could on paper.

    Photoshop is my muse...
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  20. #20
    SitePoint Zealot Overgrow's Avatar
    Join Date
    Jan 2001
    Location
    Your basement
    Posts
    192
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't spend long on paper... usually 30 minutes or an hour on a first draft design, then it's into Photoshop. I can sketch much more quickly on paper so I can block out the major sections of the page and find that balance quicker than I can if I started right in Photoshop. I work very low detail on paper which allows me to see the flow and kilter of a page rather than determining what font style to use.

    I think we're both just as chained to PS, I just hold off a slight bit more before diving in.
    Overgrow the Government: The Edge Forums
    presented by Overgrow Marijuana Magazine

    *warning: adult content

  21. #21
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    right on...

    I should probably use that method but typically by the time I have opened Photoshop, I already have an idea in my mind.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  22. #22
    SitePoint Member
    Join Date
    Dec 2000
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have clients go out and look at other sites and send examples if they can, then when I layout I try to create something which is already in the client's eye, yet allows me to create something within the scope of the client's budget, my workflow, and basically what is easiest to accomplish.

    [editor's note - run on alert!]

    -tg

  23. #23
    SitePoint Member
    Join Date
    Dec 2000
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So then it would go...

    Paper with the client as a storyboard.

    Graphic in Photoshop/Illustrator/Freehand..etc.. IF such micromanagement on the look, feel, and nvigation is required..

    Mock up..first milestone..sign off..

    Content finalization...milestone..sign off

    Final Draft...milestone..sign off..

  24. #24
    SitePoint Wizard wdmny's Avatar
    Join Date
    Jul 2000
    Location
    Here
    Posts
    1,010
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I design a site, I just HAVE to be inspired. Something good just pops into my head and then I make it. The problem that drives me crazy is when I can't come up with anything I like. I most commonly run into this problem when developing my own sites and especially my design site. I don't know about everyone else but I think the hardest site to make is one for your web design services. I personally don't even like my current design for my design site.

    As for making it, if I have access to a computer I just fire up Photoshop. If I am in the car then I just draw it out on paper as soon as possible.

  25. #25
    SitePoint Enthusiast Fringey's Avatar
    Join Date
    Apr 2001
    Location
    Washington
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The majority of my layouts are VERY graphics intense - since my site is just a personal site that gets som three hits a day, cross browser isn't that important to me.

    I've tried making a sketch of the design on paper but it never has worked for me. I design around IMAGES, often just taking a picure i like and tweaking it and adding shapes or lines or words so it is a wrapping laout that encloses my words, so it's hard for me to see what it would be on paper.

    I don't usually know what i want it to look like until i load up the picture and a blank image in psp, i do a lot of cropping magnifying coloring and decoloring. After that i crop it through psp, translate the table layout that psp provides me with to something more usable that doesn't have all these blank usless gifs and am done. I always code it up so i'll know if i have to have some sort of html effect to make it finished, and half the time don't even end up using it.
    Alone last
    Just nostalgia and I
    We were sure to have a blast...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •