Design · February 2021

Getting started with Interface Design — Tips & Challenges

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.

Lisa CosmeDesigner
Illustration by Frederico Jesus
Illustration by Frederico Jesus

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, University of Coimbra. Supposedly, this bachelor was meant to be Graphic Design and Development combined together. 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.

After five years of posters that didn’t convey the right message for the right people and concerning shape instead of usability, I decided to learn Interface Design and focus on the audience.

That’s when I found Significa, a digital design-led agency mainly focused on Product Development. I entered Significa with zero knowledge about 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.

Working at Significa's open space. Photo from mishmash: mishmash.pt

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 have a meeting 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.

Wireframes for Bondlayer, a product that allows users to build and launch websites without coding.

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 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 behavior, we also do a style search to guide us through the project.

When compiling that search, we create a mood-board with photographs, illustrations, colors, 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.

Moodboard Example

Look and Feel

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

The main goal of the Look and 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 color; 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 Styleguide. 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.

Final Design for Bondlayer

Prototyping & Re-Testing

Designing an interface is not only about designing 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 who is 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 plays a fundamental role in what the Final Product will become. Usually, it includes an interface map, a Figma prototype, interactive redlines, the editable files, and the Design System with neatly named elements and video prototypes.

Q&A for Bondlayer

Check Significa’s Handbook: significa.co/handbook/interface-design

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 had 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, general sizes to behaviours.

Apple's Human Interface Guidelines Page

Apple's Human Interface Guidelines

About Face 4th Edition — Allan Cooper

If you want to get deep in this domain, this is a great book to read. I’ll be honest with you. I didn’t read the entire book, because it’s giant, but you can do similar and read the critical parts for yourself. For instance, Chapter 3: “Modeling Users: Personas and Goals” was essential for me to understand personas. If you don’t know what they are, you should read it.

Allan Cooper's About Face book cover

Allan Cooper - About Face

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 look at Nielsen Norman Group’s videos/articles.

Nielsen Norman Group's infographic page about UX Design

Nielsen Norman Group

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 for principles of designing for humans.

Aarron Walter's Designing for Emotion book cover

A Book Apart

3. Challenge yourself.

While I was 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 give you 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 and an excellent designer, and here’s the difference: an excellent designer is able to put the product’s audience ahead of anything else, but at the same time making things look stunning and easy to interact with.

designinterface designtips

Lisa Cosme

Designer @ Significa

Lisa is a Designer at Significa. She’s originally from Coimbra where people are recognised for speaking perfect, unaccented Portuguese, but damn it, they’re not famous for speaking a lot, like, a lot!, of Portuguese.