Upload
anna-stout
View
166
Download
1
Tags:
Embed Size (px)
Citation preview
FROM DISCOVERY TO DESIGN5 crucial steps for planning your website
@Astute_Anna [email protected]
Join the conversation: #5steps
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.
What Processes Can Do:
1) Create Superior Products
BONUS:
4) Increase What We Can Charge for Our Services
2) Elevate User Experience
3) Provide Better Results
Site Map/User Flow1.
2.
3.
4.
5.
Customer Acquisition Funnel
Content
Wireframing/Site Architecture
Visual Design
Guidelines for Planning
Try to assemble a small team for input
Establish goals for the site
Complete an audit of the existing website (What’s working, what isn’t)
Host white boarding sessions for brainstorming
Refine goals: Identify 1-3 top priorities for the website.
You are theorizing about the journey that a user will take from the moment they arrive at your
website, to the point of conversion.
In preparing for battle, I always found that plans are useless, but planning is indispensable.
Dwight D. Eisenhower
HOW DO WE GENERATE CONTENT?
Use your sitemap to create a copy document:
- Identify pages based on your sitemap.
- Break your pages down according to what type of content you expect to live on each page.
IDEAL READING LEVEL FOR WEBSITE CONTENT
HOMEPAGE:
SUBPAGES:
6th Grade
8th Grade
Million dollar words don’t earn points here. They lose users.
TEST YOUR COPY
http://www.readabilityformulas.com/free-readability-formula-tests.php
“EASILY-DIGESTABLE CONTENT”
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.
GREAT RESOURCE ON WRITING FOR THE WEB
http://www.usability.gov/how-to-and-tools/methods/writing-for-the-web.html
“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.
- It’s what they do everyday. They can do it better and faster than you can.
- They can create copy that is optimized for search engines
- The can create copy that is engaging, grammatically correct, and easily readable at the appropriate grade level.
RESPONSIVE WEB DESIGN HAS
NECESSITATED THAT WIREFRAMES, ALONG WITH EVERY OTHER
STEP IN OUR PROCESS, BECOME LESS
CONCRETE–A LITTLE MORE FLEXIBLE, A
LITTLE MORE FLUID.
SO HOW DO WE DO IT?
• 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.
MOBILE FIRST
The idea that rather than starting by designing for the desktop browser and scaling down, “gracefully degrading” our website designs, we start with the lowest, smallest common demoninator and build up, “progressively enhancing” our websites – adding features and functions as we go.
ATOMIC WEB DESIGN
A methodology presented by Brad Frost in 2013 as a way to create full design systems for our websites.
“All matter is comprised of atoms. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe. Similarly interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there.”