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.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
- Maps App
- 404 Page
- Temperature Control
- Pricing Table
- Invite People
- Profile Card
- Groupon Deal
- Alarm App
- Weather App
- Workout App
- Camera App
- Video Player
- Music Player
- Call App
- Visa Payment
- Product View
- Airplane Ticket
- Product Sales Widget
- App Onboarding
- Sign In
- Blog Page
- Search Results
- 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.