by Ozlem Mis 🙋 & Murat Dincer 🙋♂
Always in progress - Last revisited: 04 May 2022
New in designing digital products and it seems like there’s just so many tools and shortcuts that your fellow designers already seem to know? Having a framework of what you need to learn will help you progress fast and smooth. You can just skim through and see if anything strikes you around things you wanted to learn more about. Hopefully you’ll find a good reference here and there. Pro designers, stay away!
Most Common Tools/Keywords Overview
- Strategy Level: Business Model Canvas, Stakeholder Map, Empathy Map, Tomorrow’s Narratives
- Research: Research Plan, Interview Guide, Observation Notes, Synthesis Wall
- Types: User Interviews (qualitative), Usability Research (qualitative), A/B tests (quantitative) — Which research to apply when?
- Service Design: Personas, Journey Map, Service Blueprint
Some reading tips on this subject:
A great article comparing journey maps and service blueprints
Another article presenting different type of journey maps you could utilize according to your need
- Workshops: Ideation Techniques, Evaluation Matrix
- Design: Hand sketches, Wireframes, Visual Design (listed from low to high fidelity), User Flows (action/functionality level), Prototyping (screen level, sewing sketches together), Microinteractions (creating user value through meaningful animations), Visual Guidelines, Design Systems
You can spread these methodologies around The Double Diamond which is a structured approach to tackle design challenges (1st box: problem space, 2nd box: solution space)
Tool References — Formats:
https://servicedesigntools.org/tools
This is a great site that covers strategy — research — service design part of UX. However there’s too many tools presented. I find below tools that we commonly use:
Your Design Tools:
You can refer to survey results (2019) to find out about most recent/popular tools of the year.
- Wireframes & Visual Design:
Within larger organizations, in order to keep the design system on cloud and utilize them consistently, and keep the files in reach — most organizations started to migrate to Figma, however Sketch is still the most popular design tool used by UX & UI professionals. Sketch users have to still use MacOS that’s why Figma’s new popularity is an advantage for designers who want to remain on Windows computers and allows novice designers to utilize a well performing cloud system. Some companies also utilize AdobeXD (mainly because they are running on a Adobe Creative Cloud subscription) however I used to prefer it for quick mock-ups in the past (because it was simpler and thus faster than other solutions) and for the ease of prototyping — however you have all these features in all solutions nowadays. You can easily prototype your wireframes/screens to present at a team meeting in all of these solutions.
This short Skillshare course on Sketch seems to be the most watched for now and goes through the critical functionalities.
The Getting Started playlist and The Basics playlist by Figma are very promising in terms of learning necessary bits to get started.
2. User Flow, Wireframe & Visual Design Templates:
Probably when you are a beginner, having understood how to use the tools will not get you jump started unless you have some easy to utilize examples at hand. In time, you will prefer to utilize your own templates, however utilizing existing tools are always great to get you trying.
My favorite tool to get started (especially with wireframes, user flow diagrams) is Sketchappresources.com — once you start searching for ‘wireframe’ or ‘flow’ you will find many useful resources you can grab and adapt over time.
You can also refer to Envato (attached direct link to sketch compatible files) but it comes with a subscription. However once you sign up, you can also reach their slide template, image, video, mock up library and what not.
I. Icons: Noun Project (download them and open them on Sketch or any svg editor to edit), https://icons8.com, Flaticon, Icon Monster
II. Fonts: Google Fonts, Adobe Fonts + Typography tips article (for tips)
III. Color Selection-Mixing: Muzli by Invision, CalColor, Adobe Color + Color Tools for Designers (for tips)
IV. Vector Images: https://vectorforfree.com
3. Prototyping Tools:
Usually my thinking cycle to select prototyping tool goes like this:
What complexity of animations should I have: Is this a dirty mockup to express interactions (use sketch/figma/xd) or am I showcasing something? (use Principle/equivalents)
As the design tools (Sketch, Figma etc) are improving their prototyping functionalities, more users are migrating to these tools replacing tools with prototyping focus like InVision & Principle. Invision is still one of the most popular places to go for prototyping (with features like menu structures, commenting)
Principle and Framer are again tools for Mac users. It’s good for making more complex animations with timelines and taking animated flow videos to present on a website or a meeting when you don’t want to take risks and mainly for producing nice/compelling documentation. They have great video tutorials to get you started. However a more project-based interactive course I used to learn Principle is here :)
If you need After Effects for some interactions/frames you’d like to animate, Olufemii@Youtube has a great tutorial which makes it fun to onboard.
4. Brainstorming, Whiteboarding, Mapping Tools:
We like Miro as they provide a collaborative medium you can share with others, provide many templates (saves time) and it’s free to sign up. If you have or want to create your own formats, I usually stick to Sketch/Figma.
Some example formats from Miro:
Also take a look at this page for an amazing Remote Design Sprint template that you can start working on right away, if you need to run a design sprint remotely in given conditions. Miroverse is the collaboration platform where individual contributors can share their amazing templates besides the one we shared.
5. Communicating Designs to Developers:
Zeplin is the main tool to use to export assets for front-end designers to grab. It has integration to Sketch & Figma and is the most efficient method to continue.
This is where design systems become handy. As you start communicating a consistent design system, it’s much easier to developers to work on, as you don’t have to create new structures every time as your designs get more mature — but rather utilize existing components.
6. Traditional Tools & Images: Photoshop, Illustrator
Since we have many solutions to work on as UX/UI designers, we don’t need to go back to Photoshop/Illustrator as often. Nowadays I only use Photoshop to edit images, Illustrator to create/edit logos — or adapt files I take and use from shutterstock or similar libraries.
We mostly stick to Unsplash, Freepik (vector images), Pexels and Pixabay for imagery (as it’s a free source — credited) or thestocks for a united resource.
7. Digital Storyboarding — Storytelling
It’s always great to illustrate your own characters and settings. However with time pressure and the need to focus on outcome rather than output, certain tools are there to make it easier for you to explain your scenarios to receive early feedback and buy in. I’m a fan of collecting ‘character’ and ‘illustrations’ from sketchappresources.com and customizing/meshing them together. Some sites are much more practical than this. Here’s some:
http://uxcomics.s3-website.eu-west-2.amazonaws.com
Illustrations: https://blush.design — https://avataaars.com and https://www.humaaans.com
Also an example below from Spotify might set a good perspective.
UX/VD Principles:
Psychology and scientific methods behind UX and visual design helps us make credible decisions on our recommendations as experts. That’s why I believe knowing these principles by heart and knowing when to utilize them would be critical:
- https://lawsofux.com : They have great posters ready for print, I even utilized these in my last workplace to increase awareness in other designers
- Medium could come handy when you search for articles related to laws of UX for further reading such as this article
- 10 laws of simplicity by John Maeda simplified
- And… the always loved Heuristic Evaluation by NN
Reference Books:
Strategyzer’s Book — Value Proposition Design: Great for integrating design to product strategy, aligning with product managers and expressing design concerns in a way that’s discussable on strategy level. Walks you through the strategy → testing process of product development.
IDEO’s Handbook — Field Guide to Human Centered Design: More human-centered approach into utilizing research and ideation techniques to arrive at enriching solutions to user problems. I take a look at their deck whenever I have to plan activities for a new project — even just to remember my alternatives or get inspired. You can also buy their print method cards for this.
UXPin has many free online books centered around Visual Design and UX Design. Try to concentrate on more comprehensive beginner’s guides as they also have books on very specific topics.
Everyday Reading/Listening:
https://uxdesign.cc and https://sidebar.io are great everyday reading resources — my favorites.
Installing Muzli’s Chrome Extension can spice up your browser everyday with fresh designs/news
IDEO’s Blog — The Octopus is usually more fun on collaborative/creative topics // For listeners, Creative Confidence Podcast
Learning in Depth:
If your organization is willing to support you or you want to spare some budget in real life education:
Coursera designed an online specialization programme around Interaction Design which I also completed and was a great foundation to start with. Under this specialization you will find a beginner’s guide into 7 different courses and 1 capstone project to get you started with a real life project. You get to give feedback to your peers and receive them in order to move along — it’s very practical for beginners.
Many of my colleagues attend and recommend Interaction Design Foundation’s UX Courses as a starting point (online). I would take a look at UX: The Beginner’s Guide, and Human-Computer Interaction for a starter course, then move to usability and service design related topics.
You can complete real-life events, take a test and become a certified UX designer by Nielsen Norman Group
IDEO-U (online + physical) is the online learning platform from IDEO, which bases training on IDEO methodologies/practice especially valuable in terms of Strategy, Creative Collaboration and Design Thinking.
Hyper Island (online + physical) offers many courses with different duration types/locations (including online) around Service Design and Human Centered Design
On a practical level, to learn Sketch, Figma, Principle etc you could use Skillshare where instructors prepare short courses to explain the basics and mostly complete an end-to-end project with you so it all starts to come together on a practical level. I love Skillshare and have been using it for years for creative growth. You can find short courses on ANY creative field.
Further on…
Reading the Google Material Design and Apple Human Interface Guidelines can be very helpful to learn about medium you’re designing for and general explanations on design decisions/reasons by Apple-Google
Read about design systems: Atomic Design by Brad Frost got quite popular. After reading this, you might want to read this great article on design systems in use, possible ways for this effort to fail and how to prevent this (very useful on the way to establish a design system in an organization) and some great examples in use by Atlassian, Mailchimp, Shopify and Salesforce.
Design Sprints by Google: The collaboration methodology presented by Google, you can also have a further reading on the book by Jake Knapp is a 1-week discovery to solution as they word it ‘help align a team on the right problem to solve or provide actionable solutions to a tightly scoped to challenge that can be tested with users at a later date.’ You can find materials here to use in your design sprints (games/plans/templates for each day)
Once you start working efficiently with Figma and Sketch, extensions are going to be there to speed you up even more and make your life easier.
