Read about the posts of tag design
In 2016, we created in EBAVS / our Christmas postcard to wish Happy Holidays.
A familiar DIY with:
Happy Holidays to all with a REAL XMAS POSTCARD!
The lasts years we did a Christmas action: The pooping log, or a cake
I worked conceptualizing a site development: wireframes, mockups and prototyping.
These 3 different words are so important and vital to start any digital project. Not always used the 3, many of the projects I’ve worked on often use wireframes and mockups prototyped regardless of.
These 3 are very unknown and many customers, developers, designers and users do not understand the difference between the three. So I explain what they do.
WIREFRAMES
What is a wireframe?
A wireframe is a scheme or flat screen representing the skeleton or visual structure. Are considered low fidelity (lo-fi), the scheme does not have to be the final design. (Important for the client)
The goal of a wireframe is:
The wireframes are the backbone of the design.
They are created quickly and with a very simplified aesthetic visualization, straight, square lines, white, black and grey.
There are numerous tools to develop them. But in my case I usually use:
Using wireframes
The wireframes are used for documentation. In fact, a lot of clients require this documentation for their customers and the development and art’s teams.
The wireframes are static images and are always accompanied by written notes explaining the interaction. Usually, add functional documentation.
They can also be used as internal sketches or skits for a computer, for example, if a developer asks me how I should do something, I make a sketch paper creating a wireframe.
MOCKUP
What is a mockup?
A mockup is a medium-fidelity model and includes some visual design.
Using mockups
I use it in all the projects because they are more visually and allow me to understand better the project.
PROTOTYPING
What is a prototype?
Prototyping is the representation of high fidelity (hi-fi) of a final product and simulates the interaction of the user interface. The design.
We need a designer that translated what we have defined in the wireframes with design tools like Sketch, Photoshop, Illustrator etc ..
.
Prototyping allows us to:
The prototype is a simulation. For this, I usually use InVisio: a tool that allows you to upload the prototypes (designs) and link interactions.
Using prototyping
For user tests.
Interaction simulation is so real, allows to check the interface usability.
Prototyping is expensive and requires design development and UX expert and testing.
Summary:
| Design fidelity | Use | Tools | |
| WIREFRAME | Low fi | Documentation | Mockflow, mockup Balsamiq |
| MOCKUP | Mid fi | Documentation and client reviews. | Mockflow, mockup Balsamiq |
| PROTOTYPING | Hi-fi | User testing | Sketch, Photoshop, InVision |
In 2008 I created a friend a little design studio called CLARISSIM, we started to participate in all posters competitions in Barcelona. We became experts on that, and both won awards. Clara won the award for best poster of them Fiestas de Gràcia, and I won the poster Fiestas del Guinardó.
Since then, the solution of Clarissim and multiples works, in 2014, I created again.
I participated again in a poster to the Festes de Gràcia and become a finalist with my map of Les Festes de Gràcia.
Also, Betahaus, and who took part in the interior of the bar-brewery, offered me to participate in the #thebeerproject.
Create something with environment beer and take part in an artist’s exhibition, so I decided to participate.
I used colours that contrast with the typical image of beer (brown, red, yellow). I used the branch as a graphics resource barely forming the background pattern. I wanted a positive message, more feminine. And this was my result. Where branches are intertwined with the message.
On Thursday, January 23, at 19:30 was the opening of the exhibition “The Beer Project” open until the end of April in the new bar/brewery
[Garage Beer Co]