Tag Archive for: design

In 2016, we created in EBAVS / our Christmas postcard to wish Happy Holidays.
A familiar DIY with:

  • Red card
  • Love
  • White paper
  • 6 years Old Daughter
  • Orange paper
  • Cryings
  • White pencil
  • Scissors
  • Smiles
  • Dotted Paper
  • Shouts
  • Glue
  • 10 Months baby boy
  • Blue marker
  • Patience
  • Effort

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.


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:

  • What: sort the contents
  • Where: hierarchy structure information
  • How: basic display user-interface interaction

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.



What is a mockup?

A mockup is a medium-fidelity model and includes some visual design.

  • Represents the structure of the information
  • Displays the content
  • Demonstrates the basic features of a static model
  • Let’s review the actual visual part of the project

Using mockups

I use it in all the projects because they are more visually and allow me to understand better the project.



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:

  • Testing interactions very similar to the final product
  • See the real content

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.


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
Again, as last year: finalist at Cartell Gràcia 2014 we are a finalist at Cartell de Gràcia 2015.
We are very proud to participate and again ranked among the 30 best 160 posters.
We are in an exhibition until August 2015 at Alzina street nº9, Barcelona, with our tribute to the shield Gràcia.
We live in Barcelona and work in Gracia. This district has a popular festival called La Festa Major de Gràcia. The streets make a competition of ornaments on the street. Also, there is a pitch for a poster to illustrate it.
In 2014 we are poster finalist with our G map, and in 2015 again with a tribute to the flag of Gracia.


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]