by Nicole Saidy
@nicolesaidy
slides.com/nicolesaidy/wireframes
Requirements, plan, user objectives and business objectives of the project
Brainstorming ideas, compiling inspiration and competitor analysis
Information architecture, element placement, functionality & interactivity
Brand guidelines, UI components, typography, dos and don’ts
Design mockups, interactive prototypes, testing
Wireframe (n.)
“A basic visual guide used to suggest the layout of fundamental elements in a web interface.”
Save time for all the team
Clarify features from the start
Allow being on the same page
Point out flaws in your site architecture
Provide time for feedback
Content - What will be displayed in this page?
Structure - How will these elements be put together?
Hierarchy - How will these elements’ size be?
Functionality - How will these elements work together?
Making it pretty
Colors
Graphic elements
Lorem ipsum titles
Typography
Axure
Justinmind
Adobe XD
UX Pin
Wireframe.cc
Sketch
Step #1
Who are you building this idea for?
E.g:
What are your user and business goals?
E.g:
Sell things online
Enroll in a course
What is your one-line slogan?
E.g:
Uber – The Smartest Way to Get Around
Slack – Be More Productive at Work with Less Effort
Step #2
The steps the user will take to get to their goal.
Search
View
results
View
listing
Book
listing
Check
out
Keep it simple.
Step #3
Remember, no design details.
By importing your wireframes to Marvel App
@nicolesaidy
nicolesaidy.com