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
RESEARCH1. 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 marketWho are the competitors? What is the industry like as a whole?There would be nothing worse than designing a new logo for acompany only to discover it’s too similar to a competitors orcreating a campaign and then finding out at the last momentthat the style doesn’t suit the market. Some text via: http://www.eightyonedesign.co.uk/our-graphic-design-process-part-1-research-and-development/
SITE MAPThe 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
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/
What to Include in a WireframeYour wireframes should include enough informationto reflect what needs to appear on each page of yourwebsite. Think about the general elements of mostweb pages: headers, footers, sidebars, and contentareas.Then think of additional elements your specific projectwill have: dynamic widgets, basic site features such assearch bars and navigation, graphics, and so forth.Once you have an idea of what your site will include,start creating your wireframes based on thoseelements.How detailed you want to get will again depend onthe project and the purpose of the wireframe. If yourwireframe is just going to serve as a guiding documentfor your own reference, then you don’t want to gettoo involved in the wireframing process. On the otherhand, if it’s going to be used by more than one Image: http://www.fivetechnology.comdesigner or developer, or presented to your client,then it needs to be more formal.Text via: http://sixrevisions.com/user-interface/website-wireframing/
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/
MOOD BOARDCreating mood boards for the web is like visualprototyping. Like traditional mood boards, web moodboards compile inspirational elements, color palette,typography and texture in a context that emulates thescreen but is not page-template-specific.At this stage in the design process, it is moreimportant to make bigger-picture design decisionsthan to consider how specific pages of the website willlook, down to the pixel. In other words, mood boardsestablish a sites look and feel in the same way that abrand standards document specifies how a brand isrepresented in various contexts....Once the mood boards are approved, the design ofsite page templates is a much more efficient processsince the more personal issues that tend to stalldesign decision making have already been made.- http://www.newfangled.com/the_web_design_process
Site Width:Because screen sizes and display resolutions vary so much, web designers often try to create pages ofaround 960 – 1000 pixels wide (since most users will be able to see designs this wide on their screens). http://gridcalculator.dkText via: ‘HTML & CSS – Design and Build Websites by Jon Duckett
Site Height:Judging the height that people are likely to see on the screenwithout scrolling down the page is much harder. For several years,designers assumed that users would see the top 570 – 600 pixelsof a page without having to scroll and some tried to fit all the keymessages in this area…The area of the page that users would see without scrolling wasoften referred to as being “above the fold” (a term newspapershad originally coined to describe the area of the front page youwould see if the paper were folded in half).Text via: ‘HTML & CSS – Design and Build Websites by Jon Duckett
VISUAL HIERARCHYMost web users do not read entire pages.Rather, they skim to find information. Youcan use contrast to create a visual hierarchythat gets across your key message and helpsusers find what they are looking for.SizeLarger elements will grab users’ attention first.For this reason it is a good idea to makeheadings and key points relatively large.ColorForeground and background color can drawattention to key messages. Brighter sectionstend to draw users’ attention first.StyleAn element may be the same size and color assurrounding content but have a different styleto it to make it stand out.Text via: ‘HTML & CSS – Design and Build Websites by Jon Duckett
DESIGNThe last step before coding the website is the design.In general most designers use Photoshop to design their websites.
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 windowsto design:Layers, Color, Info, Character & HistoryYou can find them in the Photoshop menuunder Window.
LAYERSIt makes the design process a lot easier if you take the time toorganize your layers. I often design the entire website in one PSDfile. I use Groups (Folders) to break down the website into Pagesand Sections.Here you can see how I have the navigation in its own group onthe very top of the layer order. The navigation doesn’t usuallychange from page to page, so when I start a new page – the navis 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 ofwhat elements of the site are in what layer.I then usually have the background and bottom navigation inseparate Groups at the very bottom of the layer order.
Designing in Photoshop TutorialsAll 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
Code your Photoshop Design into HTML/CSSExport imagesYou’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/
Code your Photoshop Design into HTML/CSS Break your site down into divs & name each div logo nav menu infoLeft infoRight info body featureTxtcoffee coffeeInfocontent tower
Code your Photoshop Design into HTML/CSS http://line25.com/tutorials/how-to-code-a-stylish-portfolio-design-in-html-and-css
Further Reading:http://www.smashingmagazine.com/2010/03/17/starting-out-organized-website-content-planning-the-right-way/http://www.smashingmagazine.com/2011/06/22/following-a-web-design-process/http://sixrevisions.com/user-interface/website-wireframing/http://www.newfangled.com/the_web_design_processhttp://sixrevisions.com/web-development/a-6-step-general-process-for-producing-a-websitehttp://www.smashingmagazine.com/2011/06/09/a-comprehensive-website-planning-guidehttp://inobscuro.com/tutorials/optimizing-images-for-web-35/http://sixrevisions.com/web_design/comprehensive-guide-saving-images-for-web/http://www.sitepoint.com/gif-png-jpg-which-one-to-use/ www.marketingtechblog.com/website-design-planning/
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.