Interactive Media

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

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?

RESEARCH

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

1. Client Input & ObjectivesWhat is the aim of the website?

• Ex: Is the piece to increase sales, encourage people join up to a service?

Some text via: http://www.eightyonedesign.co.uk/our-graphic-design-process-part-1-research-and-development/

Do they have any specifications (color, mood…)?

SITE MAP

Image: http://writenowdesign.com

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

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 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 designer or developer, or presented to your client, then it needs to be more formal.

Text via: http://sixrevisions.com/user-interface/website-wireframing/

Image: http://www.fivetechnology.com

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/

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

MOOD BOARD

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

Text via: ‘HTML & CSS – Design and Build Websites by Jon Duckett

Site Width:

http://gridcalculator.dk

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

Site Height:

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.

SizeLarger elements will grab users’ attention first. For this reason it is a good idea to make headings and key points relatively large.

ColorForeground and background color can draw attention to key messages. Brighter sections tend to draw users’ attention first.

StyleAn 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

DESIGNThe last step before coding the website is the design.In general most designers use Photoshop to design their websites.

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.

DESIGN TIPS:

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.

Designing in Photoshop Tutorials

http://webdesign.tutsplus.com/tutorials/design-a-warm-cheerful-website-interface-in-adobe-photoshop

All tutorials can be found at:http://sixrevisions.com/photoshop/25-web-design-layout-tutorials

www.ultimatedesignertoolkit.com/tutorials/create-colorful-business-web-layout

http://blog.spoongraphics.co.uk/tutorials/how-to-build-a-stylish-portfolio-web-design-concept

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/

Code your Photoshop Design into HTML/CSS

bodycoffee

logo

info

coffeeInfo

tower

featureTxt

infoLeftinfoRight

navmenu

content

Break your site down into divs & name each div

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_process

http://sixrevisions.com/web-development/a-6-step-general-process-for-producing-a-website

http://www.smashingmagazine.com/2011/06/09/a-comprehensive-website-planning-guide

http://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/