reading-notes
Wireframe & Design
What is a wireframe?
A wireframe is a low-tech design of how a website app is going to look. You want to make sure that you can understand the layout before you start building the bones of your website. You can either use a pen-and-paper approach or a digital approach to take care of this.
Remember to keep this part simple and keep the shapes simple. This is a great way to share with a team and have them add anything more in-depth as you progress along.
How to start
- Do some research
- Check out website and app examples to find out what looks good and what doesn’t, sometimes simple is the best and you will start to see overengineered websites and clunky UX
- Draw it out
- Get a good sketch of what you think it should look like. Then probably re-work it at least 10 times.
- Move to Online
- Now that you’ve got the basic idea down put it in a sharable wireframe editor. We will cover this in depth later.
- Flowchart it
- Draw out the flowchart for users to make sure it all goes smoothly. Don’t get int he weeds
-
Detail it *Get into the nitty gritty details of how it should look and feel, then get testing on simple segments, work it through piece by piece
- Start turning into prototypes
- Test your website section by section to understand how each page works and if there are any glaring issues before you get to assembling all the pages.
- Get testers
- You are sure that everything works, awesome! Now ask some friends to test it once you and see if they can break it. That’s how you are going to improve it.
Top 3 things to focus on
- Clarity- everything makes sense
- Confidence-builds confidence through ease of use
- Simplicity-Don’t over-engineer it
Benefits of paper Wireframing
- Very easy to change very quickly
- Changes are easier and quicker to implement
- Switching to software later allows collaboration and detailed decisions
Test building a login page
To build a login page we need to think of elements, think of the process, it might change several times and its easier to redraw a picture that took 2 minutes than recode a whole website
We need the following
- username and email
- need to click a button to login
- logo
- social media login(google, fb) -image at the top
After we have all that, then we revise it after the first draw.
- Maybe we want to have the image at the top with the logo in top right
- Then email address or username
- Login
- Then social media logins
Once we have that then we are ready to take it online!
Online Wireframing Editors:
Here is a List of free tools to use
Remember to choose what platform you are doing it for? Desktop? Mobile?
Add in your shapes then recreate your sketch. for instance Crossed lines represent an , use a circle for the logo.
Rectangle for email login field
Rectangle for the button, Use Letters for login
Use colors to differentiate which is the type in and which one is the button
Add in-text “forgot my password” etc just below the button Buttons on the bottom for alt login button with Google or Facebook
After all of that we should have a working Wireframe to start building in HTML
##