I have built and designed apps and websites, and helped scale products at companies small and large, from my own startups all the way up in size to Google.

I have learned about digital design best practices through a mix of trial and error, development cycles, successful launches, product failures, user feedback, and the inevitable iterations that have followed.

I want to pass along what I have learned.

My experiences can hopefully enable you to better understand how digital design works and the role of the designer in conceptualizing products.

Through these lessons you will be able to bring products to market in a more timely and efficient manner and better serve your users.

What is Digital Design and Why Does It Matter?

The formal definition of digital product design is an iterative design method employed with a formal approach to solve a practical problem. Sounds somewhat complicated, right?

It doesn’t need to be.

Using simpler language, a digital product designer discovers a current problem, proposes the best solution possible using a mix of technologies, and introduces it to a market.

Digital design is considered a subset of product design because digital design is all about the building of products - but via software.

The skills you are learning and developing on freeCodeCamp will help you think strategically and technologically about how to solve problems. This is closely tied to the practice of digital design.

In order to implement digital designs you will need to identify opportunities and know the desires of your consumers.

Digital Design and The Real World

Digital design focuses on users.

Customer obsession starts with the user and works backwards.

If you are new to digital design there are a few tactical steps you can take to learn what customers value and how you can leverage a mix of UI, UX, and design thinking to solve tangible problems.

What problem are you solving?

Firstly, work vigorously to earn and keep customer trust by understanding what your product and design are meant to solve. Answer the following questions: why does this product exist? How will it be used?

Digital design done well can have a profound impact on users.

Bringing together intuitive user experiences and simple user interfaces can help your customer best understand how your product works.

A friend of mine worked to help build the iPad reading experience. One story he shared with me is how digital designers made it effortless to “turn the pages” of digital books.

The action of swiping a page, much like moving paper in a real book, evidences how design, UX, and UI efforts can come together to create delightful user experiences.

The next time you swipe a page on your iPad, think about why the experience feels entirely natural and simple. Digital design, done well, is magical.

Innovate and simplify

Secondly, digital designers expect and require innovation and invention and always find ways to simplify. As with your focus on customers, you need to be externally aware, look for new ideas from everywhere, and cannot be limited by a “not invented here” mindset.

When designing websites, for example, it's important to do a few things really, really well. I learned this when building and optimizing my own websites.

I had a mentor who advised:

“Know what you do well, and how you can do it better. If you are designing your website, you know that time is valuable and every additional second your user’s stay on your page, the better. Strong design can shave excess latency from pages and increase the efficiency of the serving environment and that is something to strive for.”

Notice that this advice is specific (i.e. design for speed) yet also broad (improve your user’s experiences in the best way that you can).

When thinking about digital design, take time to deeply understand the levers you can pull and how those levers will yield better experiences and results for your users.

Experimentation is key

Thirdly, experiment.

Digital design, unlike the designing of physical items, can be improved rapidly through sprints and code deployments.

Software is adjustable.

By starting with your customers and working backwards, seeking to simplify, and constantly iterating, you can be insure that your design will eventually stick. If you haven’t reached that point, keep trying.

Here is a mental experiment I like to play with my friends.

Think about the last time you purchased an airline ticket online. How many steps did it take to navigate from the landing page to the confirmation of the payment page?

Why do you think airlines make users go through this check-out flow? How would you improve and simplify the process?

A great way to improve your digital design skills is to practice on another designer’s property. See if you can improve upon it.

Digital designers see being great at something as a starting point, not an endpoint. Through iteration and experimentation, a digital designer can take things that work well (or poorly) and improve upon them in novel and unexpected ways.

If you are new to the field of digital design, that should excite you.

Examples of Digital Design Done Well and How It Helps Users

I want to conclude with examples of digital design done well. I provide examples and images and explain why the digital design is intuitive, simple, and relevant.

If you want to develop your skills in this field, take time to not only think about how you would improve other’s sites but also learn from what leaders in the field do, and why.

Example #1

Elemental Labs provides an incredibly intuitive graphic to help users understand the difference between their product and a competitor’s product. Without reading anything else you intuitively understand that their product is marketed as cleaner, purer, and simpler.

The contrast between colors helps the eye visually understand the message and is an example of great digital design.

Also, notice how grams - a common unit of measurement - is replaced with milligrams. This makes the user feel like there is more sugar (29,000 mgs of sugar feels like a lot).

Example #2

Woven is a fun calendar app that makes group polling easy. I have used a variety of software tools to coordinate groups and it's always a bit messy.

Look how clean the infographic and call to action are. Without thinking deeply about the product you can clearly understand how the product works and why it will benefit you: simply pick a date, poll people, and see which date is best for the group.

I love products that combine compelling design, UX, UI, and are incredibly easy to navigate.

Example #3

For those that want an example from the world of digital and physical design, a particular favorite of mine is LFA Machines.

Their product set is complicated: they offer both semi automatic and fully automatic capsule filling machines. For many people, this technology is abstract as they have not seen machines like this in person.

So what does the site do? It offers a video that is automatically playing when you visit so you can see how the device works and what benefits it provides. This digital design brings together simplicity, clarity, and customer obsession all in one.

Example #4

Here is one final example.

If you want to start a podcast you might experiment with different digital podcast software. One that combines simplicity with easy usability and a terrific digital design standard is Buzz Sprout.

When a user visits their site for the first time the user is prompted with compelling and straightforward guidance, tutorials, and advice on how to create a podcast.

These radio buttons say it all: they make the selection process very user friendly and expedite the podcast creation process. In just a single button the design brings together strong design and product aesthetics and usability.

There are some wonderfully well-designed products out there: a Herman Miller chair, an Apple laptop computer, a Tesla Model S, a cup of Starbucks coffee.

These products embody experiences that are greater than the product themselves.

These products have been designed to make our lives richer and in many respects better.

These products have something else in common: design is central to how they behave and feel. These products also have a wonderful user experience and are supported by profitable business models.

In short, these products are well known to represent the best of the design process.

This begs the questions: what is the Design Process? And how can entrepreneurs and developers start learning the Design Process?

Having built and launched products myself, I have a few relevant ideas.

I have also spoken with countless people about the topic, and these conversations have informed my thinking.

I now want to share these insights with you.

What is Design Thinking?

Design thinking is a holistic way of applying critical thinking to solving design-related problems that matter to people. Specifically, Design Thinking is a way to learn about, gain insight into, and deeply understand human beings.

An introduction to Design Thinking starts by placing the human experience – what people want, need, and value – at the center of your design thinking.

As opposed to optimizing for other metrics or stakeholders, like product speed, financial profits, or aesthetics, the design thinking process starts by prioritizing the primal needs of the human users.

What do people want? What do they fear? What do they most care about and why? Design Thinking starts by attempting to frame answers to these questions.

How can you place humans at the center of your thinking?

I took a Design Thinking class in graduate school. The Professor asked us to “get out of the building,” leave the classroom, and go speak with people about issues they faced in their lives.

Specifically I was tasked with asking people about their relationship with the medical field.

Speaking to strangers can be challenging. But speaking with strangers about medicine – and when they last saw a doctor, for example – was downright anxiety-inducing.

Yet I knew if I wanted to improve my Design Thinking skills, I needed to go beyond my comfort zone.

You should embrace speaking with people. It will help you learn and improve your Design Thinking capabilities.

When you go and speak with people, pick a topic that you find interesting and worthwhile. Pay close attention to who they are. Ask yourself:

1. How did you find this person?
2. Why did you talk to them?
3. Was this person similar to you or different?
4. In what ways did you originally guess that this person would be different from you? (class, gender, race, ethnicity, age, legal status, and so on)?

Design Thinking starts with people. If you want to design for people you need to interact with people.

Ask probing questions and listen carefully. Listen for facts and listen for stories.

At the conclusion of your conversation, take time to reflect:

1. What was the most surprising thing about this person's story?
2. In what ways is this person turn out to be different from you?
3. Does this person have values different from yours?
4. If they have similar values, do they express these values in surprising ways?
5. What questions did you ask that led to the most interesting insights?
6. Did you notice anything surprising about the immediate environment where you talked to the person?
7. Did the environment "prompt behavior" from you or from the person you talked with?

In Change by Design, author Tim Brown writes at length about the importance of “empathy” in design thinking. Brown notes that empathy is a challenging word to define but a critical concept to building and designing products.

This is because empathy helps us understand others.

And if we are designing for people, we need to design for people that look, act, behave, and are fundamentally different from ourselves.

When learning more about the medical field, I spoke with a young man named Sam. At first I wanted to learn more about which online resources he used to find doctors.

But what he shared pivoted the conversation, and my subsequent understanding of his relationship to medical practitioners.

Sam talked about control and his lack of “control” when it came time to paying medical bills. He repeatedly mentioned that he had to pay more out of pocket than he initially thought he would have to. He felt “cheated.”

I didn’t realize this at the time, but this feeling of being “cheated” was an area worth exploring further.

Had I had a better rooting in Design Thinking I would have probed this domain further.

Specifically, I would have sought answers to the following: What about this “cheated” feeling made Sam so irate? Was it the feeling of powerlessness? Was it a sense of financial injustice? Or some combination of both? Did Sam’s loss of control make him feel threatened?

A software tool that enables more transparent pricing disclosures is likely something that Sam would have benefited from. I only uncovered this insight by listening to what Sam said.

Yet I also missed other topics to question further. These were my mistakes. You need not repeat them.

When you are learning Design Thinking don’t be afraid to ask probing questions as the conversation takes new and unexpected directions.

Go deep in the pursuit of truth.

The ability to learn through feeling – even if you don’t have precise first-hand exposure to that thing – is what empathy is rooted in.

Using this feeling to inform decisions (products, design, and outcomes) is how empathy inspires Design Thinking.

Placing Design Thinking at the Center of Your Worldview

Design Thinking is practiced and learned over time. An introduction to the Design Process can start in a physical classroom (as mine did), via informative online courses, or in conversations with people in your life.

When I first used the empathy framework to connect with Sam and others I spoke with, it was very challenging.

While it was not hard to remember everything he said, it was challenging to recount his body language and tone throughout the conversation when I got home and wanted to type up notes.

It was hard to map patterns among the different parts of the conversation.

As you begin your Design Thinking journey, you will likely struggle with recount as well. It is okay to struggle. Keep engaging, keep listening, and keep reflecting.

These skills will help you better understand what people care about.

These insights, in turn, will help you develop and ultimately build better solutions. By demonstrating a deep interest in the development and understanding of people, you can create outcomes that best help these people.

I like to think of Design Thinking as an evolved skill. You can practice, improve, and grow Design Thinking skills over the course of your life.

Final Thoughts on Design Thinking

If you don’t feel fully comfortable with this approach, you can always outsource aspects of work to experts.

Through practice, however, you can improve.

And it also helps to establish a beneficial cycle. User-centric designs also help websites achieve their SEO goals too, after your product exists in the market.

Employing design thinking makes for web content that viewers will be inclined to share and that other sites will be happy to link to.

When visitors know they're at the heart of everything you do, search engines will notice and reward you accordingly.

By placing humans at the center of my inquiry, I discover new insights.

These insights helped me peel back assumptions and stale ways of thinking. By reframing patterns, I am able to incubate new ideas.

These benefits are readily available to you too.

You can stimulate creativity.

By thinking more creatively, you can ideate and generate new ideas and push the possibilities.

By pushing the boundaries, you can again discover new ways of thinking, and technologies like data visualization or VR can help you on your journey.

This makes it easier to build because you have a clearer North Star.

This clarity can help deliver new products and solutions.

Delivering products leads to a new foundation of learning and discovery. And that is a worthy end goal.

Sketch has long been the application of choice for UX and UI designers. But in the last four years, we have seen many new contenders for Sketch’s crown. Three of them that have made the biggest strides are Figma, Adobe XD, and InVision Studio.

These four tools have many pros in common but there are some differences too. For example, the first comparison, Adobe XD vs Sketch, makes sense especially since both have a similar interface which is user-friendly and has a minimalistic style.

In this article, I analyze how the most used design apps compete and what their unique features are using my experience acquired while working at Creative Tim.

Adobe XD

Adobe XD was developed and published by Adobe Inc. XD, released on 18 October 2017. It is a vector-based user experience design tool for web apps, mobile apps, and voice apps available for macOS and Windows. There are versions for iOS and Android as well that help you preview the result of your work directly on mobile devices.

XD also support website wireframing and creating simple interactive click-through prototypes. With the character and layout tools of Adobe XD, Elements can be easily created and individual objects can be exported.

The interface is kept relatively simple, with a toolbar that is aligned at the side, as well as the large artboard area.

Comparing Adobe XD vs Sketch makes sense especially because of this similar interface which is user-friendly and has a minimalistic style.

Sketch

Sketch is a vector graphics editor, developed by the Dutch company Bohemian Coding. Sketch was first released on 7 September 2010 for macOS. It won an Apple Design Award in 2012.

A key difference between Sketch and other vector graphics editors is that Sketch does not include print design features. Sketch is only available on macOS. This problem is partially solved by third party and handoff tools.

When Sketch first came out it completely disrupted the interface design space, but Adobe XD and Figma have recently come forward as new challengers. They offer unique functionality like prototyping and live collaboration.

I’ve recently been researching these tools for my side project, uxtools.co, and wanted to share what I believe the be the most noteworthy decision points. Also, from my point of view, learning to sketch is very useful and it does not take to much to become a Pro.

Figma

Figma came to the stage in 2016 with initial funding of $14M.

With its seamless user interface and sleek feature palette, the tool quickly became a notorious competitor to similar solutions in the field.

Designers from brands like Twitter, Microsoft, GitHub, and Dropbox swear by Figma as the ultimate UI design tool.

InVision Studio

InVision Studio is a new piece of software, released in 2019, that allows designers to build more advanced animation and micro-interactions. Studio also integrated with InVision’s link to Sketch via its Craft plugin.

InVision Studio has got a nice dark UI by default, that helps developers focus on the work to be done in the evening. However, with macOS Mojave, every app can look like this quite easily. When they created it, they were inspired by another design tool - I am thinking about the Sketch app.

Apps Comparison

1. Pricing

Budget can be a big deal when you’re working with your own resources. Some of these licenses have educational and promotional pricing (often 50% off), so don’t miss that part. For example, Figma will get you there for free as long as you're not working on a team.

• Figma: Free for individuals! You can have 3 projects for free, or you can upgrade to unlimited projects and team functionality for $12/month (billed annually).

• Sketch: $99 per license that gets you the Mac App for life and access to the next production versions of the app.

• Adobe XD: It offers free and paid plans, depending on an individual's or team's needs. Paid plans start at $9.99/month.

• InVision Studio: Free right now.

2. Platform

Though Sketch has been immensely popular, it forces designers to only use Mac, which alienates developers from accessing design files.

• Figma: Browser! Figma recently released a Mac app and Windows app (not offline-capable, though).

• Sketch: Mac only.

• Adobe XD: Mac and Windows. Subject to the same limitations as the CC suite.

• InVision Studio: Mac and Windows.

3. Live Collaboration

Nobody likes to send at the end of the day “version 3.0”, “version3.0.final”, “version3.0.final.final”. Live Collaboration can help us, especially live comments.

I imagine these were the same concerns that surrounded the release of the highly innovative Google Docs suite. Google Docs, however, turned the Microsoft Suite on its head with live collaboration, and now Figma is seeking to do the same thing with UI design.

• Figma: Yes! Not to mention being browser-based, it allows Windows and even Linux users to have a very polished design tool.

• Sketch: Not natively, but a plugin, Picnic, is looking to change that. Also, they have Sketch for Teams.

• Adobe XD: It offers real-time Coediting, launched at Adobe MAX 2019.

• InVision Studio: Not currently possible, but can generate share links.

Image: Figma - Argon Design System Pro

4. Handoff

Recently a few apps have been developed specifically to deliver specs (sizing, spacing, color) to developers, but design tools are starting to integrate this functionality natively.

• Figma: Because of live collaboration, developers can easily jump in (regardless of OS) and access the designs. Figma now neatly prints the handoff code for CSS, iOS, or Android in the right panel.

• Sketch: They've recently launched their own native developer handoff feature — Cloud Inspector. There’s even an entirely free alternative called Sketch measure that works just as well.

• Adobe XD: It offers design specs that allow a designer to create a shared link that contains measurements, assets, and automatically-generated CSS code snippets.

• InVision Studio: They have “Inspect Now”.

Image: Figma - Argon Design System Pro

5. Offline

This is so important. Some online apps can protect your information when Wifi goes down, but you need full access to open, use, and save from the app offline.

• Figma: No, in an AMA they stated they don't have any current plans to add it.

• Sketch: Sure.

• Adobe XD: Yep.

• InVision Studio: Yes.

Image: AdobeXD - Argon Dashboard Free

6. Prototyping

There are literally dozens of these apps nowadays, but they might become extinct as Adobe XD brings prototyping directly to the design tool. Keep your eye on these.

• Figma: Yes! It's very basic but feels like Adobe XD without the transitions. Also, there's a nice Framer integration.

• Sketch: Yes!

• Adobe XD: Yes, native prototyping within the app. Adobe XD also supports voice prototyping and keyboard/gamepad support.

• InVision Studio: Yes, you can create prototypes and animations.

Image: InVision Studio - Argon React Native

7. Symbols

Symbols can make your work easier. These have completely changed the design process. Forget building and duplicating list items over and over, let symbols do the work for you.

• Figma: Good to go. Symbols now have states, constraints, and overrides.

• Sketch: The symbol functionality in Sketch is very impressive, and continues to improve. Symbols can be updated across entire documents and can resize responsively (that means less work for you when changing screen sizes).

• Adobe XD: It offers components that can be used throughout a document as well as linked across documents. It also allows designers to create variations of a component for different interactions, known as component states.

• InVision Studio: they have components that are a close approximation to the symbol conventions found in other applications. Components in their final form will honor a broad, scalable hierarchy that allows designers to quickly build-up, mix, and match components intelligently across their designs.

Image: Sketch - Material Kit Pro

Conclusion

Sketch has a big disadvantage here because it is only available for Mac users. And as such, it lets tools like Figma and Adobe XD innovate beyond the basic necessities.

Also, in terms of design tools, Adobe XD provides a robust set of responsive while the Sketch doesn’t have this feature built-in (but it has many plugins). If your tool does something better than the other, it is often enough of a reason to switch over. The browser-based approach that Figma has taken is also something to behold.

When talking about Adobe XD vs Sketch, the first one’s future is looking very bright and will win over many Sketch users. InVision’s change of focus may ensure its survival but one thing is for certain - Adobe XD is here to stay. The Adobe powerhouse is strong, and smaller companies like InVision and Sketch will have to work hard to stay relevant in the future.

People usually prefer to design and work in just one place. If you’re a part of a team, then Figma is undoubtedly for you.

After all of that: first is Figma, second is Sketch, third is Adobe XD and fourth is InVision Studio.

Overall, when talking about the best design software, these four tools are extremely well-suited for modern designer needs.

Try all four out to see which one is better for your use cases. I hope this comparison - Adobe XD vs Sketch vs Figma vs InVision - helped you decide which design tool is better for you.

Resources:

https://www.figma.com/figma-vs-sketch/

https://uxtools.co/blog/sketch-vs-adobe-xd-vs-figma/

https://www.codeinwp.com/blog/figma-vs-sketch-vs-adobe-xd/

https://support.invisionapp.com/hc/en-us/sections/360004450191-Studio

https://helpx.adobe.com/ro/xd/help/components.html

https://www.sketch.com/docs/

Questions to answer before nailing your next design project.

Almost two years ago, I got to sit down with Ryan Germick, the lead of the Google Doodle team.

When I asked how his team kept shipping such great designs consistently, Ryan asked for my notebook, and drew a pyramid. He divided it into five layers, and he told me:

First, start with the Mission, the Soul, the ‘Why?’

Understanding the soul of a project is the foundation upon which a complete design solution is built. It’s quite abstract, and can take some thought, but within the soul are the answers to your design problem.

_Simon Sinek in his [popular TED Talk](http://www.ted.com/talks/simon_sinek_how_great_leaders_inspire_action.html" rel="noopener" target="blank" title="), explains that you should “Start with ‘Why’”

Everything you design ties back to this idea, so identifying it is the first and most important part of the design process.

If your mission statement is too long, ask dumb questions and challenge your assumptions to whittle it down to its essence. The soul should elegantly answer the question “what is this for?”

Phase Two: Understand the User Story

A person’s life will never begin and end with your product/website/poster/hardware. There is context before, during, and after.

_While I was at [Feathr](http://feathr.co/" rel="noopener" target="blank" title="), we discovered most users would use our app for the first time while preparing for an event at home. The relaxed, organization-oriented mindset played a large role in shaping our design.

Consider how a person feels, what they are primed for, and what they want before they interact with your design. Be as human-centric as possible. There are lots of ways to do this.

When a person interacts with your thing, what do they experience, and how does it relate to the mission and soul of the project?

The experience a person has using, listening to, seeing, and touching your thing should reinforce the soul of the design. In other words: how integrate ‘what the user does’ and ‘what the project does.’

Furthermore, when the user’s experience is ‘over’, what happens next?

Phase Three: Develop the Look & Feel

Now that you know why you’re making this thing and how people will interact with it, it’s time to answer the question: What does it look like?

_The look & feel for [Crossfader](http://crossfader.fm/" rel="noopener" target="blank" title="), an app that lets anybody DJ like a pro by tilting their phone.

This layer is tertiary to the user story and the soul of the design, but it is commonly misunderstood as the ‘biggest’ or ‘most important’ part of a designer’s job.

Answering the first two questions makes it easy to design something that is fulfilling and resonates with people on a subconscious level.

Using the soul and the story as a guide simplifies building visual design that is integrated in a profound way.

Phase Four: How do we execute?

The final component of a design is the implementation. If you’re a design-only type, it’s tempting to take a ‘hands off’ approach during this phase and let developers do their thing—but stay vigilant!

This phase is flexible because there are many different ways to implement a design. Find the way that integrates with the soul, the user story, and the look & feel to create a cohesive whole.

Take an active part in ensuring no detail is spared. Dot your i’s and cross your t’s, measure twice, cut once, etc…

Regardless if you’re doing the making yourself, make sure it’s made, and made right.

Phase Five: Go Over the Top

So you’ve materialized an idea that solves the problem and works well. At this point, you’ve got a completed design.

Most designers stop here. Don’t.

This is the part where you take it up a notch.

This is the difference between ‘good’ design and ‘great’ design.

This step is where you can really unleash your creativity to take what you already have (which is solid) and make it shine with something unexpected and awesome.

_[Source](http://tumblr.com/" rel="noopener" target="_blank" title="">Tumblr has a fun and playful ‘like’ and ‘unlike’ animation that surprised and delighted me the first time I saw it. <a href="http://ui-animations.tumblr.com/" rel="noopener" target="blank" title=")

Since you’ve designed your way from the soul, the user experience, the visual design, and through the execution, you are given a powerful opportunity to tie your project together with a magnificent star on top.

Let’s Recap:

When building a pyramid, you’ve got to start at the bottom.

Your foundation is defining the mission and soul of the project.

From there, consider the user story and context.

This leads you to a solid vantage point from which to create a visual design that looks and feels just right.

Execute the design and build something you’re proud of.

Finally, put a cherry on top with surprising and delightful details that let the soul really shine all the way through.

While my examples are software-related, these principles apply globally to all design-related arenas by replacing ‘user’ with ‘listener’, ‘viewer’, etc.

If you found this article helpful, sign up for my email list where I write about designing products! Thanks for reading!