discovery to design
TRANSCRIPT
Process
[pros-es; especially British proh-ses]noun, plural processes
1. A systematic series of actions directed to some end: to devise a process for homogenizing milk.creating a website.
Common Agency and Freelancer Process
1 ) Kickoff Meeting/Conversation
2 ) HERE ARE YOUR DESIGNS!!!!
THIS IS NOT A
PROCESS
What Can a Process Do For Me?
Superior Product
Better Experience
Improved Results
What a Process Can Do
Site Map/User Flow1.
2.
3.
4.
5.
Customer Acquisition Funnel
Content Development
Wireframing/Site Architecture
Visual Design
What is best for your users is best for your business
JUST START TALKING.
Guidelines for Planning
Try to assemble a small team for input
Establish goals for the site
Complete an audit of the existing website
Host white boarding sessions for brainstormingRefine goals: Identify 1-3 top priorities for the website.
Guidelines for Planning
Sitemapping and User Flow
The sitemap is a basic outline of the content and hierarchy of the
site.
The user flow diagram visualizes
the different paths a user may take
through a website.
Customer AcquisitionFunnel
FOCUS.
Design that does not drive results is not good
design
In preparing for battle, I always found that plans are useless, but planning is indispensable.
- Dwight D Eisenhower
Content
THE #1 THING THAT HOLDS UP A WEBSITE PROJECT
- Identify pages based on your sitemap.- Break your pages down according to what type of content you expect to live on each page.
HOW DO WE GENERATE CONTENT?
Homepage:
Subpages:
6th Grade
8th Grade
Million dollar words don’t earn points here. They lose users.
IDEAL READING LEVELFOR WEBSITE CONTENT
Earnest Hemingway’s
The Old Man and the Sea registers at a reading level of
Grade 4.
TEST YOUR COPY
http://www.readabilityformulas.com/free-readability-formula-tests.php
Use smaller paragraphs and include icons and images to break up content and make it
infinitely more readable. Simplify and make your content easy to skim.
EASILY “DIGESTABLE” CONTENT
TRIM THE FAT
The “freshness” of your content should therefore be a by-product of the consistent intent to deliver value to your visitors in a manner that is enjoyable for them to consume.
http://www.usability.gov/how-to-and-tools/methods/writing-for-the-web.html
RESOURCE FOR WRITING ON THE WEB
“It seems that perfection is attained not when there is nothing more to add, but when there is nothing more to remove.” Antoine de Saint Exupery
IF YOU’RE NOT A COPYWRITER, HIRE ONE.
Wireframing and SiteArchitecture
Responsive web design has necessitated that wireframes, along with
every other step in our process, become less
concrete–A little more flexible.
• Plan an order for the presentation of information.
- Look at the content that has already been compiled. Is there a clear hierarchy that is inherent to that information?
• Ask, “What is the main point of this page.” Start there and plan around it, ensuring that you aren’t stealing focus from the main point.
SO HOW DO WE DO IT?
Wireframes are the bridge from content to design.
DESIGN
Mobile FirstWe start with the lowest, smallest common demoninator and build up, “progressively enhancing” our websites – adding features and functions as we go.
Atomic Web Design
“We can break entire interfaces down into fundamental building blocks and work up from there”
- Brad Frost
PAGE DESIGNS
STYLE GUIDES/PATTERN LIBRARIES
+
Site Map/User Flow
Customer Acquisition Funnel
Content Development
Wireframing/Site Architecture
Visual Design