Today I paired with Gina Valdez, for the second day of my pairing tour. Gina has a background in Graphic and Visual Design, and so I learnt a lot of new things in this area. It was really fun and interesting to learn more about ways to improve my process in Sketch and also see how she puts wireframes together in terms of utilising design fundamentals.

We started the day working on some implementation of existing wireframes for different devices and their respective screen sizes. We worked from a desktop layout and put together the layouts for tablet and mobile. For this we used media queries to tailor css for each screen size. This was something that I had done before, but it was great to learn more about conventions while doing it. I was also happy to help Gina with a few things that I had experience on from being a developer, such as solving some git issues and sharing some command line and shell tips.

The current Sass for the project was very nested, which was not ideal and made things a little frustrating and confusing. At first the nesting made finding the right element to change difficult to find, and other times meant that we would have to change the same element in multiple places where it could have been extracted. It would have been a great exercise to refactor the Sass to make things easier for ourselves and the code more extensible, but as we had very little time to spend on it we were unfortunately not able to yet.

Next we worked on creating and editing some wireframes in Sketch for a different client. Gina is a Sketch master! She showed me so many commands and processes to make Sketch life easier. One of these processes was creating symbols so that things like icons, colours and heading types (using different typography, weights and colour) could be reused in multiple places. This makes creating a hierachy simpler, and also means less repetition making the same elements over and over. It also ensures consistency. When I saw the use of symbols for colours, so that one could select a pre-defined colour from a list when changing an element style, I was overjoyed! You have no idea how many times I have had to select existing elements and copy/paste their hex codes into new element styles. Such a fiddly, frustrating and mega-clicky process! But never again.

I was also very impressed with Gina’s process for wireframing and setting herself up for ease and success before even creating artboards. She had a style guide page attached to her Sketch file which outlines the ranges of colour that she would be using from light to dark, for the primary colour, accent colours, warning colours, success colours and error colours. The style guide also outlined typography and how differnt UI elements could look. I imagine that this would not only save time when reusing different elements, but also act as a guide for any other Designer that needed to work on or reference the same file.

We also talked a little bit about branding and how the style guide might be defined. Gina shared with me some links on creating moodboards and style tiles, and how to create them. I hadn’t heard of style tiles before and I love the idea! To create a style tile, one mocks up different page elements such as banners, paragraphs, links and more in a visually pleasing and aligned way and creates several versions of these mockups. In each version things like the typography, imagery and colours are changed to show how things would look, but the layout remains the same. This creates a nice visual comparison for a client as to how the wireframes could look using different themes. This is not only useful to the Designer to know which direction to go in, but also ensures that the client is on board with a particular style before high-fidelity prototypes are created. It prevents wasted work and serves as a visual contract that informs a style guide.

Gina also talked me through her process of designing a new element, in this case a timer, and the many iterations before she settles on a final element in the wireframe. An image search to find inspiration for how a UI element has previously been implemented acts as a starting point. From there Gina experiemented with different timer UI solutions within the context of her existing wireframes. It was important that the new element didn’t confuse the user about which actions were important on the page, and it was also important that the new feature fit in with existing styles.

I really enjoyed pairing with Gina today, and I would like to learn more about Visual Design when I can make the time! Being efficient at visual design processes will not only be helpful, but the processes themselves are really gratifying. Tomorrow I will be working with Eva PenzeyMoog, who is my mentor, at the office of a client that is a larger Design Agency. I am really looking forward to what I can learn both from Eva and other Designers there.