Visual and interaction deliverables (2015)

I spend some of my time documenting my designs on interaction and style and really love it.


When you have been working on a project for days, even for weeks, you want to see it properly implemented on production. If you work on a start up or a small company its easier but when you work in a big corporate implementation could be delayed for months or years. In addition, working with big developers teams, located worldwide, sometimes you are not able to find the chance for sitting with them and do it together. All this force me to create really deep documentations.

I don´t use any plugins to do this task yet because most of them don´t fit with my needs. Some existing plugins on the market (like Marketch) are working quite well but still I have not found the one I want to play with for several reasons.

Based on my experience and my colleagues and mentors teachings, I´m used to spec my final mockups in 2 parts: style guides and interaction guides.

I designed this modal window just for the story. Check the original here.

Style guide

This include plenty of things but I will explain just the basics: Margins and paddings, fonts, background colours, borders and shadows. Basically all related with CSS. 

Margins and paddings

This is the first I´m used to do. I have been working and iterating on the design for days or weeks and although I try to keep consistency in spacing during the process normally I have to double check it to assure everything its at the place should be. If you have to create several proposals in a limited time frame you are forced to take some shortcuts and you miss some pixels on the process.

If I´m working on a widget, for example, sometimes I totally redo it from scratch before start specifying. That speed up all the process because everything is consistent and I already know the measures.
Before spec the mockup I´m used to put all “at its place”. Before and after on the image above.

I always try to use rounded numbers (for example, using 20pt spacing instead of 23pt), and If I´m working on a responsive design I use a lot of percentages (working for desktop and webmobile I use points). In the same way if my designs are going to be implemented in a lot of languages I use percentages too for the text boxes.

Since most of the projects nowadays are cross-platforms all the measures should be spec in points. 

My main objective is to make the frontenders work easier.

Fonts

Fonts should be specified in font family, size, weight and colour. This is faster than spacing but you have to follow some rules if you want to see your designs shine.

If I´m working on a website, for example, I have to be consistent in sizes and define a clear hierchachy. If I decide H1 is going to be “Opensans /24px /Bold /#333” this is a rule I´m going to follow across the entire site. On this way when documenting I perfectly know what is what.

If its going to be a paragraph I define the line-height for interline spacing and so on. It´s very important to define text boxes properly because text could increase in words depending on the needs or the language. A well defined text box will help you create a proper scalable design solution.

In order to keep consistency across the site I split font sizes and assign to each of them a label (Heading1, Subtitle3, Paragraph1, etc). In that way at the same time that your are building a website you are creating a kind of library which will be very useful in order to have the full picture of your site in terms of style.

This is also useful for creating default styles and symbols in Sketch so you don´t have to define font, size and color every single time, instead, just select the label you want to use.

Background colours, borders and shadows

Thats easy but you have to define it if you want to avoid some smart frontenders with Photoshop.

For background colours I just put the HEX number but if I need, for example some opacity, I define it like 0.10 for 10% and so on. If I have placed a background gradient I put the first HEX and the last.

In terms of borders I specify them in size, colour and effect (by effect I mean if its solid or dotted). 

For example, I can specify a border which is 2px thick, #CCCCCC and dotted.

Effects could be inner shadows, drop shadows and background blurs. I use shadows to win focus and delimitate spaces, between others, but you have to use them with care.

  An example for documenting a box shadow could be: “Box-shadow: rgba(#CCCCCC,0.5) 0 2px 6px -3px”

Elements

Standard graphics elements like modal windows, buttons


Interaction

With this I´m referring to all the elements with which user can potentially interact. On click/tap actions, transitions, .hover effects and scrolling are the main ones I´m used to define.

As in the example above, I first decide which are the interaction areas and bellow I define what happen when the user interact with each of them:

  1. First image will be selected by default.
  2. Remain images will be 50% opacity by default. When .hover images get 100% opacity. On click, image selected will be highlighted and became 100% opacity.
  3. On click on the “x” icon, modal window disappear.
  4. On .hover button turns to .hover display. On click, item is added to the shopping card and modal window disappear.
  5. On click on the item, different product color is displayed.
  6. On click, modal window disappear.


On click/tap actions

Everything that happens when user click or tap and how this element reacts. Could be a closing “x” icon, a button that takes user to another page, a radio button or a check box, to highlight some examples. 

Despite you assume that is clear what is going to happen a good practice is to explain as much accurate as you can. 

For example I´m used to document a lot of “x” closing icons like this: “On click, modal window disappears with an ease out effect”.

Transitions

This is the the most underestimated interaction but the one that can delightful the user. That elastic ease effect or that smooth fade-in fade-out can be great examples.

I use 2 ways to define them: I do a video showcasing the animation or use libraries available on the web like Codepen to show de effect I want to achieve. If I can find the proper animation on the net, I use to take the second option, its faster and the frontender can get the piece of code needed to implement the animation properly.

.hover effects

Everything that happens when user mouse over throught an element. I´m reducing the use of this effects just for cosmetics interactions trying to avoid hiding important content because on tablet or mobile just don´t work. 

Like for transitions, I use to look for great examples avilable - you can find huge galleries - and pass them to the developer.

Scrolling

In order to catch the attention I use the user´s scrolling behaviour to show and hide some elements. It´s very common nowadays show…

— -(not finished) — -