Lecture4
- 2. DESIGN PROCESS 1. Research 2. Site map 3. Wireframes 4. Mood Board 5. Design http://gregtran.wordpress.com http://www.newfangled.com/the_web_design_process
- 3. RESEARCH 1. Client Input & Objectives What is the aim of the website? • Ex: Is the piece to increase sales, encourage people join up to a service? Do they have any specifications (color, mood…)? 2. Know your target audience and ask: • Why would they come to your site? • What information are they going to find? • When are they likely to return? 4. Know your market Who are the competitors? What is the industry like as a whole? There would be nothing worse than designing a new logo for a company only to discover it’s too similar to a competitors or creating a campaign and then finding out at the last moment that the style doesn’t suit the market. Some text via: http://www.eightyonedesign.co.uk/our-graphic-design-process-part-1-research-and-development/
- 4. SITE MAP The site map is a diagram of the pages that will be used to structure the site. It is also a good place to decide what your filenames for each page will be. Image: http://blog.mindjet.com Image: http://writenowdesign.com
- 5. WIREFRAMES A website wireframe is a visual guide that represents the skeletal framework of a website. Most designers wireframe their designs in one way or another, even if it just involves them making quick sketches on the back of some scratch paper. Wireframing is an important part of the design process, especially for more complex projects. Wireframes can come in handy when you’re communicating with clients, as it allows them to visualize your ideas more easily than when you just describe them verbally. Text & image via: http://sixrevisions.com/user-interface/website-wireframing/
- 6. What to Include in a Wireframe Your wireframes should include enough information to reflect what needs to appear on each page of your website. Think about the general elements of most web pages: headers, footers, sidebars, and content areas. Then think of additional elements your specific project will have: dynamic widgets, basic site features such as search bars and navigation, graphics, and so forth. Once you have an idea of what your site will include, start creating your wireframes based on those elements. How detailed you want to get will again depend on the project and the purpose of the wireframe. If your wireframe is just going to serve as a guiding document for your own reference, then you don’t want to get too involved in the wireframing process. On the other hand, if it’s going to be used by more than one Image: http://www.fivetechnology.com designer or developer, or presented to your client, then it needs to be more formal. Text via: http://sixrevisions.com/user-interface/website-wireframing/
- 7. WIREFRAMES Presenting wireframes to your clients can be a valuable way to make sure everyone is on the same page prior to creating the actual design mockups. It’s much easier to change around the position of elements on the page when you’re working with wireframes than it is with Photoshop designs or coded pages. Wireframes as a deliverable also displays the craftsmanship you put in your work. Be sure to, however, bill appropriately for the additional time that wireframes tack onto your design process. Text & images via: http://sixrevisions.com/user-interface/website-wireframing/
- 8. MOOD BOARD Creating mood boards for the web is like visual prototyping. Like traditional mood boards, web mood boards compile inspirational elements, color palette, typography and texture in a context that emulates the screen but is not page-template-specific. At this stage in the design process, it is more important to make bigger-picture design decisions than to consider how specific pages of the website will look, down to the pixel. In other words, mood boards establish a site's look and feel in the same way that a brand standards document specifies how a brand is represented in various contexts.... Once the mood boards are approved, the design of site page templates is a much more efficient process since the more personal issues that tend to stall design decision making have already been made. - http://www.newfangled.com/the_web_design_process
- 9. Site Width: Because screen sizes and display resolutions vary so much, web designers often try to create pages of around 960 – 1000 pixels wide (since most users will be able to see designs this wide on their screens). http://gridcalculator.dk Text via: ‘HTML & CSS – Design and Build Websites by Jon Duckett
- 10. Site Height: Judging the height that people are likely to see on the screen without scrolling down the page is much harder. For several years, designers assumed that users would see the top 570 – 600 pixels of a page without having to scroll and some tried to fit all the key messages in this area… The area of the page that users would see without scrolling was often referred to as being “above the fold” (a term newspapers had originally coined to describe the area of the front page you would see if the paper were folded in half). Text via: ‘HTML & CSS – Design and Build Websites by Jon Duckett
- 11. VISUAL HIERARCHY Most web users do not read entire pages. Rather, they skim to find information. You can use contrast to create a visual hierarchy that gets across your key message and helps users find what they are looking for. Size Larger elements will grab users’ attention first. For this reason it is a good idea to make headings and key points relatively large. Color Foreground and background color can draw attention to key messages. Brighter sections tend to draw users’ attention first. Style An element may be the same size and color as surrounding content but have a different style to it to make it stand out. Text via: ‘HTML & CSS – Design and Build Websites by Jon Duckett
- 12. DESIGN The last step before coding the website is the design. In general most designers use Photoshop to design their websites.
- 13. DESIGN TIPS: When creating a new file in Photoshop, remember to choose a resolution of 72 dpi. Personally, I usually start with the Web preset. I find that I mostly use the following windows to design: Layers, Color, Info, Character & History You can find them in the Photoshop menu under Window.
- 14. LAYERS It makes the design process a lot easier if you take the time to organize your layers. I often design the entire website in one PSD file. I use Groups (Folders) to break down the website into Pages and Sections. Here you can see how I have the navigation in its own group on the very top of the layer order. The navigation doesn’t usually change from page to page, so when I start a new page – the nav is already there. Blog, Testimonials and Services are their own Group. Within Services I have the page broken down into three groups: Massage, Yoga & Training. Doing this helps me keep track of what elements of the site are in what layer. I then usually have the background and bottom navigation in separate Groups at the very bottom of the layer order.
- 15. Designing in Photoshop Tutorials All tutorials can be found at: http://sixrevisions.com/photoshop/25-web-design-layout-tutorials http://blog.spoongraphics.co.uk/tut orials/how-to-build-a-stylish- portfolio-web-design-concept http://webdesign.tutsplus.com/tutoria ls/design-a-warm-cheerful-website- interface-in-adobe-photoshop www.ultimatedesignertoolkit.com/tutorials/cr eate-colorful-business-web-layout
- 16. Code your Photoshop Design into HTML/CSS Export images You’re looking for a compromise between the quality of the image and the file size. - For photographic type images, JPG is best - For logos or images with blocks of flat color and no gradients, GIF or PNG8 - For images using effects such as drop shadows or glows, which also require transparency, choose PNG24. Text via: http://www.sitepoint.com/gif-png-jpg-which-one-to-use/
- 17. Code your Photoshop Design into HTML/CSS Break your site down into divs & name each div logo nav menu infoLeft infoRight info body featureTxt coffee coffeeInfo content tower
- 18. Code your Photoshop Design into HTML/CSS http://line25.com/tutorials/how-to-code-a-stylish-portfolio-design-in-html-and-css