SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Nov 2007
    Location
    Minnesota
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Question about sketching

    When you guys sketch out a website, do you have the whole website pictured? What I mean is, do you have all the pages pictured and sketched out or do you just have that part figured out roughly.

    I hope this makes sense.
    Ruth R

  2. #2
    SitePoint Addict
    Join Date
    Aug 2008
    Location
    Coimbatore- India
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so far i havent sketched or paper worked any layout. I refer to some sample sites and start doing in photoshop. But i knew it is not the professional way.

  3. #3
    SitePoint Zealot iScrawl's Avatar
    Join Date
    Mar 2009
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's a great question!

    In the professional theory, you should have the entire website in your mind, especially the areas in the website you want the users to get to.
    But in most cases, I got the website's skeleton programmed and the designers did their magic.

    There is no one way that will include all the websites.
    Hanan Moiseyev
    Online games and Videos - http://www.playwithroger.com
    Share your art - http://www.iscrawl.com

  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    ruthrusch01, while I agree entirely with iScrawl that pictured in your mind you should have a general idea of how you want your website to look there are three general approaches I recommend in terms of information architecture (basically how to visualise your site on paper)
    • Concept art – this is where you “skin” your ideas by drawing different ways your stuff can be represented onscreen, usually this is done through apps like Photoshop and are almost a “visual photocopy” of your mind’s eye view of the finished site (taking into account the possibility of changes as required).
    • Wireframe – this is where you draw basic shapes and labels to represent a skeletal structure of your website and is usually performed when you know exactly what you need to include in your site to meet the concept art requirements and can just be as simple as doodles on a napkin.
    • Prototype – this generally speaking where you mock-up a test version of website functionality or the site itself (basically slapped together) to test the limits of what you can achieve and if the final result will be worth the hassle of coding it properly of if you should abandon the idea at the start (think of it as selective beta testing).

    Hope the above is helpful.

  5. #5
    SitePoint Zealot iScrawl's Avatar
    Join Date
    Mar 2009
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great stuff Alex!
    Hanan Moiseyev
    Online games and Videos - http://www.playwithroger.com
    Share your art - http://www.iscrawl.com

  6. #6
    SitePoint Member
    Join Date
    Nov 2007
    Location
    Minnesota
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, thanks a ton everyone. All of the above information really helped me to better understand what the process should/could/would be. I appreciate the quick responses.
    Ruth R

  7. #7
    Non-Member a_samuel90's Avatar
    Join Date
    Apr 2009
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well it's good to have a general idea of what your website should be like but I personally don't plan out every detail I like to follow my instinct

  8. #8
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I've become a lot more efficient using wireframes first before even thinking about opening up photoshop or any other graphics programme. That means, no photoshop mockup, no visual design before the general structure is set. This approach does not mean you should completely ignore to develop the creative visual ideas you have for the site in your mind. But, if you start with a visual design first, chances are, you're in for big and not so desirable changes once you're in the coding/prototyping stage. Changes are bound to be made to the functionality, information architecture, etc. during the coding and testing phases which might cause you unecessary workload and changes to the design. This process allows you to minimize the possible flaws, graphic decisions and hours needed.

    Therefore, I recommend drawing & sketching out the design first, then testing your naked design with just CSS/HTML/Javascript, making sure that your chosen information architecture, dynamic and static functionalities are logical and easy to grasp as well as in tune with the site's goal. Only after this I'd start with the really creative process of creating a visual design for your site.

    This is merely my own experience though and every designer has his/her own methodology that works best. I've fallen into the trap of being all too visual first, and I noticed that I've wasted many many hours based on the false premise of function following form, when the reverse seems a lot more logical, at least to me.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  9. #9
    SitePoint Member
    Join Date
    Nov 2007
    Location
    Minnesota
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess maybe that's exactly why I asked this question. I think I have fallen into the same trap. I've got a visual and can't seem to get past that before getting the structure. I was wondering how to break that.

    Thanks for your reply.
    Ruth R

  10. #10
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I'm a very visual thinker myself, so I know how hard it can be. But that isn't necessarily a bad thing. I always have a visual idea immediately when I start on a new project. However, I start with a blank sheet, (in my mind I cut that sheet into pieces) and then place the single content modules on my blank sheet. Some of the main modules for a homepage would be:

    - Branding module
    - Main Navigation module
    - Main Content module
    - Sub Content module
    - Supplemental Content module
    - [...]

    Like a puzzle, I put those single pieces of information onto my blank sheet, place it where I feel they make most sense and are in logical order. Of course, how I put together these different pieces depend on what the site is for, how much content will need to have room, my target audience, et cetera.
    Even in this early stage, you can already make some decisions based on what your visual idea for the site is. You can try various placements, see how these interact with one another and so on.

    With a prototype (a barebone sample of the final version), you can test out the functionalities, see how well they play together (by applying CSS for layout and placing the content as per your vision of how the site should then be translated visually with graphics, colours, shapes, lines, and so on).

    This approach felt most unnatural to me when I made the decision to no longer use my old process. After a while it felt more intuitive the more sites I built based on this method.

    PS: This is not to say that you should get away from designing the visuals first. There are quite a few profressionals who go straight into Photoshop and design everything at once (wireframe, branding, etc.) and work well and efficiently that way. I remember a debate on this about a year or two ago, and there really isn't a wrong and right. It's about what is best suited for you. The daunting task will be to find out what is right for you.

    So, my recommendation is trying out for yourself what methodology makes you produce the best end-product.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  11. #11
    SitePoint Member
    Join Date
    Nov 2007
    Location
    Minnesota
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Again, thank you. It's really nice to be able to ask a question and get so much good advice.

    Do you feel like the whole process is more streamlined and maybe doesn't take quite as long? When you first decided to use this approach, did it actually take you longer to complete this portion of the project just because you weren't used to it?
    Ruth R

  12. #12
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I can say that now I do feel the process is a better one and a more streamlined one too.
    When I made the switch, the total hours spent were longer because I wasn't used to it, because I was convinced my brain couldn't work that way. But it turns out I can think quite logically if only I want to. I just had to give myself the confidence and time.

    I don't find myself having to go back to the drawing board over and over and make changes because I forgot to take into account elements xy or because the visual design was good eye-candy but not as usable. I can still produce effective and visually appealing designs and do not find this approach limiting at all now, though you'll not come to the same visual decisions if you work that way as opposed to going straight into visual design.

    Today I find it hard to work off a visual design and then do the coding/programming for it because you have to base your coding decisions on the visuals which can be very problematic. So yes, the form follows function approach works more efficiently for me and it does take me less hours now.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  13. #13
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    kohoutek, whilst I am a visual thinker alike yourself the very reason I placed concept artwork before the initial wireframing was for that very purpose. Concept art allows you to draw, paint and doodle to your heart’s content on how you would like the visual appearance of the website on paper to look, though It must be noted that change is inevitable, if you want the site to maintain usability, accessibility and be an all round better experience, concept work isn’t always appropriate.

    My method of concept art (doodling your ideas), wireframing (structuring the ideas together basically) and prototyping (creating a test bed for the designs functionality) meet all the requirements you stated above though I must disagree with your point about design after the layout structure has been defined, while doodling rough sketches as concept art may be helpful to get across certain looks you would like to achieve in terms of functionality, it should be pointed out that design is something you generally do as you code, it is only as the website comes together that you can implement any realistic consistant form of design.

  14. #14
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    It is your very right to disagree. I simply stated my method as it works better for me than the method you describe which I've used for a couple of years. I don't think there is a wrong or right in how to approach a design task. What works best for you, works best for you.
    Maleika E. A. | Rockatee | Twitter | Dribbble




Tags for this Thread

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
  •