Designing Effective Websites Day 4 - April 29 Homework: Applying - - PowerPoint PPT Presentation

Designing Effective Websites

Day 4 - April 29

Homework: Applying the Principles to Your Design

• Looking at your wireframe (or even your existing

site), list adjustments you could make to improve emphasis?

• Can you envision opportunities for harmony/

contrast in your site?

• Does your design or theme employ Repetition,

Variety or Scale? Are there pages or sections of your site that could?

What Does this Mean for Me???

• Should I create a Design "Comp" now?
• Can I just start coding my HTML and CSS?
• What if I am using WordPress?

Another Designer Tool

• Style Tiles
• Creator: Samantha Warren
• Goal: consistent fonts, colors and interface

elements to communicate the essence of a visual brand

• Help form a common visual language between

the designers and the stakeholders

styletil.es

Webstiles

• http://webstiles.namanyayg.com/
• inspired by StyleTiles
• provide a quick-to-use HTML/CSS template

Last Week…

• Read the HyperArts.com post: What is

Responsive, Adaptive and Fluid Design? Defining Terms in a Multi-Device World.

• Watch Luke Wroblewski’s Mobile First (https://

vimeo.com/38187066) presentation that coined the term “Mobile First.

Mobile First

• Luke Wroblewski's take on designing for the

mobile audience FIRST.

• Another "small" book that would be a great

addition to your personal library.

As web creators, we need to be aware of more than "...just the syntax."

• The opportunities and growth in mobile are huge.
• Must consider what mobile means for our own

sites.

Traditional vs. Mobile

• Our "traditional" website may still receive a

majority of the traffic (…maybe not)

• Are you prepared for increased traffic?
• Have we considered their use cases?

• The local review service had over 45M unique

visitors in 2010.

• Only 3.2 M (7%) came via their mobile app.
• But mobile was responsible for 35% of their

system searches.

Native Mobile Apps

• Apps you actually install on your device (usually

via an "app store")

• Directly access the device's hardware and

system resources.

• More robust and geared to specific goal(s).
• More difficult to develop and implement.

Mobile Web Solution

• Run in the mobile browser of your device.
• Even if you have a Native Web App, you still

need a Mobile Web Solution.

• "Web links don't open apps, they go to web

pages," Jason Grigsby (Mobile Strategist).

From Where Are Your Visitors Linking?

Mobile:Design Constraints

• Initial reaction often focuses on limitations.
• Designing for mobile first, we embrace the

constraints.

• Forced to prioritize up front.

Screen Size

• Must understand what user is

looking for or to do.

• Must identify what is truly important.
• Forces us to eliminate any content

that is of questionable value.

Time and Place

• Mobile devices are with the owners at all times.
• Usage context has a big impact on design.
• Now we are designing something that is used

anywhere and anytime.

Time

• Mobile usage different times of the day when

compared to that of non-mobile devices.

• The length of our mobile use sessions are

shorter - coming in bursts.

http://readitlaterlist.com/blog/2011/01/is-mobile-affecting-when-we-read/

Location

2 Things to Consider

Organizing Our Content and Actions

Given the constraints of mobile, we must look to:

• Align with how people use their mobile devices

and why.

• Emphasize content over navigation.
• Maintain clarity and focus.

Align With Mobile Behaviors

• Lookup / Find (urgent info, local)
• Explore / Play (bored, local)
• Check In / Status (repeat/micro-tasking)
• Edit / Create (urgent change / micro-tasking)

Content Over Navigation

• On mobile, content takes

precedence over navigation.

• Users want immediate answers

upon first glance.

• Don't want to force the mobile

user to have to navigate to get to the info they want.

Maintain Clarity and Focus

• Remember "One Eyeball and One thumb".
• Must be clear and focused.
• Make it easy for visitor to get things done.

`