If you are just starting out in interface design everything is so confusing for you.
Tools, theory, exercises – why do we do them?
This is what I wish I had 10 years ago when starting out.
Started with Graphic Design
Every single kid out there has a dream job, mine was to be a professional athlete – long story short, this didn’t work out, so at the age of 18, I was left thinking about what to do with my life.
I signed up for university studying computer science and boy I was wrong that it would help me. Wasted a full year there and said this is not for me, but in that year I knew I wanted to do something in the tech industry, just wasn’t sure how to get into the industry. I had a pretty powerful computer and just started playing with photoshop, making posters, banners, logos for whoever I can find, but still – I am not in tech and I didn’t want to do Development as it was just waaay too complicated for me.
After 2 years of doing posters that didn’t convey the right message for the right people and concerning shape instead of usability, I discovered this thing called web design (yes back then everything was called just web design).
That’s when I found my true passion, something I couldn’t stop thinking so I dove headfirst into it.
Process is king!
I wish I had this process from day one…
Discovery
A meeting with your client/team to develop a common understanding of the project and gain a clear idea of the product concept and what the final outcome must become.
Flows and Wireframes
Flow and wireframes are the core of your project’s interaction and/or navigation. This is the first phase of your design – low fidelity. Grayscale blocks without images or fancy font’s, this way you can’t influence the style of the project by having representative forms of content and you can truly focus on the user experience.
Usability Testing
Creating a product without testing with real people is like screaming underwater. It doesn’t make sense to validate it internally if you are not the end-user persona.
Create a target group, gather people or ideally if existing customers gather people that are customers of that product or website if you can do it in person even better.
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 boarding
Beyond a search related to behavior, do a style search to guide you through the project.
When compiling that search, 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 will help you define the product’s UI direction.
Exploration
We have now arrived at the most creative part, exploring and feeling free to use our imagination. 🎉
The main goal of exploration is to define the visual direction of the interface. We determine the product personality, that must resonate with the client’s message and values.
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 a client agrees on the direction from the exploration stage you should start applying this to the existing pages and crafting up a 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 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.
By creating interactive 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
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, editable files, and a Design System with neatly named elements and video prototypes.
Congratulations, you just completed your first project… This is just the begining! 🎉
Read, learn, read some more…
In the beginning, it can seem a little tedious. Still, the truth is that despite all the lessons you’ll have, the books, articles, and guides were a tremendous help in this process of going from mist to understanding 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 behaviors.
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
When starting out UX was such a mystery to me.
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.
Master Interface Design
Understanding and noticing patterns and how and most importantly why are they used in interface design is vital. In my book, I try to address exactly that. 200+ pages of everything I know about interface design starting from molecules to full flows and best practices on certain types of screens.
…and more importantly… PRACTICE
While I was starting designing, I needed regular 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
- Stockmarket
- Profile Card
- Groupon Deal
- Alarm App
- Weather App
- Calendar
- Recipe
- Workout App
- Testimonials
- Conversion
- Camera App
- Video Player
- Music Player
- Call App
- Visa Payment
- Product View
- Airplane Ticket
- Product Sales Widget
- App Onboarding
- Sign In
- Settings
- Journal
- Blog Page
- Search Results
- Design Agency Hero
I would have loved to have discovered a guide like this when I was starting out. I couldn’t find much so thats why I wrote this piece in order that you can get hooked and discover the magic of the design thinking process.
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.
