Wireframing
First steps
A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. Wireframes are created for the purpose of arranging elements to best accomplish a particular purpose.
(Wikipedia)
Wireframes are black & white layouts that outline the size and position of elements on a page. They’re usually created after the flowchart or the navigation map, acting as the connection between Information Architecture and visual design.
They shouldn’t be interactive, and do not show much detail. Once a wireframe starts becoming interactive, it becomes a prototype.
Wireframe (n.) “A basic visual guide used to suggest the layout of fundamental elements in a web interface.”
(Wiktionary)
Wireframes are the skeleton of the entire project.
The whole process must look like:
- Low- fidelity wareframes
It is comprised of black and white shapes. It is the starting point to put designers’ ideas on the table.
Low- fidelity wareframes can be easily changed in order to testing and focused on needs, and they are fast and cheap to create.
- High- fidelity wareframes
It has more realistic content, image different dimensions or any information given by specific buttons. Also greyscale is used instead black and white.
Which one is the best approach for wireframing?
Neither! It depends on the scope, budget and life of the project. From my point of view low-fid wareframes are the first step, they show the main idea and we can easily modify them. Once we test our proposal with user’ needs we can get into next step creating a high-fid wareframe where our client can appreciate all the details and can have a visual representation closer to reality.
For this exercise I had to create a wireframe version of EMOV App. EMOV is an app to rent an electric car for short periods of time (car- sharing).
Ironhack just provided us with a wireframe kit which made this exercise easily completed.
On the one hand, these are the EMOV screens:
On the other hand, wireframes:
So these are the seven wireframes created according to EMOV App screens.
I know I need more practice with Sketch App so I can finish the exercises fast but the true is that I’m enjoying discovering the new tools, concepts and design insights. I’m also loving the feeling of getting things by myself, the only tool here is “through lots of tries and investigation”.
♡
