strategic_web_design-visualstrategy

16
Strategic Web Design: Visual Strategy Ben Wong, Interactive Design Manager Kelley Jarrett, Market Manager

Upload: guidecreative

Post on 13-May-2015

488 views

Category:

Design


0 download

DESCRIPTION

Kelley Jarrett (@keljar) and Ben Wong present the importance of wireframes and information architecture

TRANSCRIPT

Page 1: Strategic_Web_Design-VisualStrategy

Strategic Web Design: Visual Strategy Ben Wong, Interactive Design Manager Kelley Jarrett, Market Manager

Page 2: Strategic_Web_Design-VisualStrategy

Why is Visual Strategy Important? YOUR WEBSITE MAY SAY SO MUCH IT SAYS NOTHING AT ALL PROVIDES AUDIENCE-CENTRIC CONTENT AND NAVIGATION PROMOTES CLARITY AND FOCUS

Page 3: Strategic_Web_Design-VisualStrategy

Kill The Noise: The Importance of Prioritizing Your Content

Page 4: Strategic_Web_Design-VisualStrategy

Prepare to Reduce the Noise: REVIEW YOUR WEBSITE AND ASK YOURSELF: What three user tasks are the highest priority for your organization? Are you giving that user task the loudest voice? Are less important tasks competing with your critical tasks?

Page 5: Strategic_Web_Design-VisualStrategy

Visual Prioritization

YOUR WEBSITE YOUR AUDIENCE

Page 6: Strategic_Web_Design-VisualStrategy

Wireframes Help Prioritize SHOULD BE COMPLETED AFTER AUDIENCE ANALYSIS AND BEFORE VISUAL DESIGN HELP TAKE YOUR WEBSITE FROM SUBJECTIVE TO OBJECTIVE.

Page 7: Strategic_Web_Design-VisualStrategy

Wireframes Help Prioritize IDENTIFY THE TOP 10 TASKS AND PRIORITIZE IMPORTANCE WHEN CREATING A WIREFRAME, CONSIDER:

–  Position –  Size –  Contrast –  Calls to Action

DOCUMENT WHY DECISIONS WERE MADE. PREVENTS COMPETITION AND “CONTENT CREEP”

Page 8: Strategic_Web_Design-VisualStrategy

Audience-Centric Navigation

YOUR WEBSITE YOUR AUDIENCE

Page 9: Strategic_Web_Design-VisualStrategy

Online Card Sorting Online Card Sorting gives your team the ability to determine the ideal structure of your new navigation by grouping pages and tasks into common categories and sorted by importance. This data can be used to create a new sitemap and to drive the visual design of the new interface of your site.

Page 10: Strategic_Web_Design-VisualStrategy

Onsite Card Sorting The Onsite Card Sorting allows us to

work side by side with your team in developing the navigation and interface of your site. Unlike the Online Card Sort, conducting the exercise in person can lead to revealing conversations about the nature of your audience and the deficiencies of your current navigation scheme that can be solved by a effective card sort.

Page 11: Strategic_Web_Design-VisualStrategy

Site map

From the Onsite Card Sorting exercise, a new Site Map is generated. This site map takes all the data gathered during the card sort and compiles it into a diagram of your site’s new navigation scheme, allowing you to visualize how the user will navigate through your content. This site map also acts as a guide for the interface that is developed during the Visual Design process.

Page 12: Strategic_Web_Design-VisualStrategy

Content

YOUR WEBSITE YOUR AUDIENCE

Page 13: Strategic_Web_Design-VisualStrategy

Analyze Your Content ANALYZE CURRENT CONTENT

–  Active Pages –  Broken Links –  # of pages –  Most commonly accessed –  Least accessed –  2 Clicks to Key tasks

DETERMINE KEEPERS AND TRASH

–  What can you leave behind? –  What should you optimize with Calls to Action?

Page 14: Strategic_Web_Design-VisualStrategy

Plan Your Content Strategy ANALYZE CURRENT STATE DETERMINE WEAKNESSES

Page 15: Strategic_Web_Design-VisualStrategy

Recap ANALYZE YOUR AUDIENCE PRIORITIZE TASKS CREATE A VISUAL HIERARCHY THROUGH WIREFRAMES FORM AN AUDIENCE-CENTRIC NAVIGATION ANALYZE YOUR CONTENT DEFINE YOUR CONTENT STRATEGY

Page 16: Strategic_Web_Design-VisualStrategy

Next Steps THE ART AND THE MAGIC BEAUTIFUL DESIGN BASED ON SOLID STRATEGY