Getting started with Interface Design – Tips and Challenges.

Why did I go from Graphic to Interface Design?

Well, every child has a dream job. Mine was to be a Fashion Designer. At 18 years old, I wasn't ready to leave my city, Coimbra, Portugal, and the most similar bachelor's degree available to me was Design and Multimedia at the Faculty of Sciences and Technologies at the University of Coimbra. This bachelor's was supposedly meant to combine Graphic Design and Development. Still, I felt I wasn't either very good at Graphic Design or Development during this time – that's why I felt the need to learn more about one of them. I wouldn't say I like Development (it burns my brain cells, in truth). That's why at the end of the degree, I decided to do a Master's in Graphic Design and Editorial Projects at the Faculty of Fine Arts of the University of Porto.

That's when I found Significa, a digital design-led agency mainly focused on Product Development. I entered Significa with zero knowledge of Interface Design. Two years later, I feel that I’m ready to give you the best piece of advice, readings, and challenges to start from zero.

1. Process, process, process.

On my first day at Significa, Rui Sereno represented their process on a board so I could start to think the same way. Let's look at the key elements of that process:

Discovery.

Firstly, we meet with the client to develop a common understanding of the project, gaining a clear idea of the product concept and what the reality must become.

Flows and Wireframes.

Flows and Wireframes represent the content, structure, and basic description of a project’s interaction or navigation, that is, the first phase of the Design in low fidelity. Just in a greyscale, without images and hand-picked fonts that don't influence the project style, by having representative forms of content, we can focus exclusively on user experience. They're the backbone of every Design project.

Usability Tests.

Creating any product without user feedback doesn't make sense. It’s important to integrate Usability Tests as early as possible since it’s being created for them.

We gather people from the target group or current users if it's an existing Product, preferably at our office.

As the project is in an early stage, it's completely flexible and open to changes that don't imply significant constraints – this is the best phase to test.

Mood-board.

Beyond a search related to behaviour, we also do a style search to guide us through the project.

When compiling that search, we create a mood board with photographs, illustrations, colours, typographies, layouts, and other inspiring elements or good product examples.

Having the team and the client on the same page helps us define the product's UI direction.

Look & Feel.

We have now arrived at the most creative part, exploring and feeling free to use our imagination.

The main goal of the Look & Feel is to define the visual direction of the interface. We determine the product personality that must resonate with the client's message and values.

We choose one or more (if needed) pages from the wireframes which represent the biggest portion of components and elements, then we start giving some colour; insert images or illustrations, try some typography, icons, and any other element that can make sense inserting visual language on the project.

Final design.

When the client approves the Look & Feel, we should apply the defined style to the existing pages, joining the wireframes and style guide. This is the longest stage of the design process. The process of assembling and designing every screen, for desktop or any responsive or adapted version, by addressing every interaction, every illustration, and every icon.

Prototyping & Re-Testing.

Designing an interface is not only about creating pretty static screens. In most cases, the way things interact will impact the quality of the User Experience. By giving users visual context and a clear understanding of how things function, we can ensure great usability.

At Significa, we create interacting prototypes/ animations that let developers know how things should interact and get user validation on the navigation and the final look.

Design System.

This stage of the process gives us the consistency we need on the project. Having a single source of truth accessible increments speed and reduces friction to any future change.

The Design System is nothing more than a collection of components to be reused, guided by clear patterns that, together, are the building block of the entire interface.

Design Validation / Delivery.

We have a Reviewer role responsible for QA’ing the Design from the Wireframes, Look & Feel, and Final Design phases and green light them for the next phase or Delivery.

A correctly made handover is fundamental to what the Final Product will become. Usually, it includes an interface map, a Figma prototype, interactive redlines, editable files, and the Design System with neatly named elements and video prototypes.

To learn more about Significa's methodology for Interface Design, check our Handbook.

2. Read, learn, read some more…

In the beginning, it can seem a little tedious. Still, the truth is that despite all the lessons I've learned at Significa, the books, articles, and guides were a tremendous help in this process of going from Graphic to Interface Design. Here is a reading list that helped me:

Human Interface Guidelines.

Here, you'll find the primary and most essential concepts for Interface Design, from nominations to general sizes and behaviours.
Apple's Human Interface Guidelines

About Face 4th Edition — Allan Cooper.

If you want to get deep into this domain, this is a great read. I'll be honest with you – I didn't read the entire book because it's huge, but you can do the same as I did and read the critical parts. For instance, Chapter 3 – "Modeling Users: Personas and Goals" – was essential for me to understand personas. If you don't know what they are, give it a go. About Face – Allan Cooper

Nielsen Norman Group.

Personally speaking, User Experience Design has never been my strong suit. This page was so helpful in the most challenging times of Wireframes, User Testing, and justifying decisions. If you think the rational part of Design is the challenging one, you should take a look at Nielsen Norman Group's videos/articles.

A Book Apart.

Although this edition has some outdated books, some of them are surprisingly interesting. For example, "Designing for Emotion" is an inspiring guide on the principles of designing for humans. A Book Apart

3. Challenge yourself.

When starting at Significa, I was regularly given challenges to create something within a 30-minute deadline. That little pressure can prepare us for real projects. Naturally, the first ones won't look great but you'll see the more effort you put into it, the better the outcome will be.

Let me finish by sharing a list of challenges you can make for practice:

1. Maps App

2. 404 Page

3. Temperature Control

4. Pricing Table

5. Invite People

6. Stockmarket

7. Profile Card

8. Groupon Deal

9. Alarm App

10. Weather App

11. Calendar

12. Recipe

13. Workout App

14. Testimonials

15. Conversion

16. Camera App

17. Video Player

18. Music Player

19. Call App

20. Visa Payment

21. Product View

22. Airplane Ticket

23. Product Sales Widget

24. App Onboarding

25. Sign In

26. Settings

27. Journal

28. Blog Page

29. Search Results

30. Design Agency Hero

I would have loved to have discovered an article like this when I was starting out. As I couldn't find such, I wrote this one for those who are learning how to leave the Graphic Design world and discover the magic of thinking about users' interests.

Nowadays, I know the difference between a good designer and an excellent: an excellent designer is able to put the product's audience ahead of anything else while at the same time making things look stunning and easy to interact with.