Shift Nudge - Interface Design Course - Core - Start

Welcome to the course! I’m glad you’re here and can’t wait for you to get started.

Start

Welcome to the Course

Welcome to the Shift Nudge course. You’ve made a great decision and I’m honored that you’ve decided to go on this journey with me.

You’re in a small group of people who understand the value in investing in yourself. So congratulations, you’re here!

Before we really get started, I want to give you the secret to becoming better at design.

Are you ready for it?

The secret?

The one thing that’s going to help you get better at design?

It’s actually designing things.

And not only designing things. It’s creating bad design over and over until it gets better.

That’s how I started and how virtually every other designer started.

Now, there are rare occasions when good or even great design happens on the first try and when you witness it happen in your own life, be thankful. Acknowledge it and accept it.

But also accept that great design doesn’t always work that way.

Most of the “great” design that I’ve ever created, and yes “great” can be a subjective term when discussing design…

Most of the “great” design started out as bad design that I kept revising and editing until it eventually became great.

Soleio has a pinned tweet that I think of often that illustrates this concept in another industry, but is every bit as applicable.

https://twitter.com/soleio/status/402852206686113792

So that’s what we’re going to dig into with this course.

We’re going to learn how to spend more time on something than anyone else might reasonably expect.

You will learn tactics.

You will learn tips and tricks.

And these will help speed you up and give you a good framework for making design decisions…

But ultimately…

It’s up to you to actually do the design and make the decisions.

You are the designer now.

It’s up to you to put in the work and apply the principles and techniques you learn in this course.

I’m hope you’re excited.

This going to be fun! =)

How Everything Works

Course Structure

As you can tell, everything is broken up into modules and lessons. Every module and lesson will have a very specific focus coupled with very specific action items for you. And although a lesson may contain very detailed information about a specific topic like using a certain type of font or choosing a color there will be intrinsically related information surrounding that lesson.

The course was designed to be gone through linearly starting at the beginning and finishing at the end with design exercises all along the way. However, if you have burning curiosity about a very specific topic, please feel free to give in to your impulse and go straight to that lesson. The others will still be here when you get back.

Dribbble Setup

Create a dribbble account if you don’t have one already. If you do have one and you’re already active, great! This will feel very natural for you. If you do not have one, please create one and send me your your profile URL (eg. https://dribbble.com/mds ) and I will personally invite you.

Working through design exercises and sharing your progress will be super helpful for you. You will get real world feedback and you will slowly expose yourself to the world as a “designer.”

The more you design and post your work the more confident you will become with your design skills.

Afterall, designing is primarily for other people, so it should be a good practice for you to design and share those designs for feedback. We’ll dig more into the details of that as we get closer to posting work, but for now…

Definitely create your account, and if you need a dribbble invite post it in the #dribbble channel in the Slack group that you need an invite OR email me directly with the subject line “Shift Nudge Dribbble Invite” with a link to your profile, and I will hook you up!

Lessons

Each lesson will have some type of practical application exercise associated with, even if it is more of a thought experiment. You will only get better with practice and practice is much more than just watching a video or reading some text. I highly highly recommend completing the exercises associated with every lesson to gain the most value in the shortest amount of time.

Future Usage

Remember, you’ve got lifetime access to this course. So… even if you go through it in its entirety, you may reach a point in a new design project, where you’re feeling a little stuck on a certain decision. In that case, this will also be a good reference for going back to any of those particular lessons and getting some deeper insight on that topic.

Feedback

If you have any problems at any point or have any questions, please don’t hesitate to post it in the #general Slack channel, because quite often other people experience similar issues and it’s helpful for everyone to see how the conversations play out.

If you have more of a personal request, please feel free to email me directly at matt@mds.is

Pro Designer Mindset

Be prepped for learning.

Move from dismissive to curious.

Focus on the importance of fundamentals.

Prep for concentration and hard work.

Reference:

https://medium.com/the-year-of-the-looking-glass/the-beginning-of-your-design-career-549828025494

  1. Focus on Improving your craft and execution skills
  2. Improve your product thinking
  3. Work on your influencing skills

More tips on product thinking via @Gregoire Jeanneau

  • Fall in love with the problem, not the solution
  • Question the problem, don’t offer solution right away. (more on this)
  • Embrace and explore uncertainty (instead of avoiding it)

Design is hard, but it gets easier. Trust the process and put in the reps. Only get better by designing, and then designing more. Watching all of the videos in this course will only give you a nudge in your design trajectory. BUT watching these videos AND putting in the time of actually designing things will give you a massive shift in your trajectory.

Be prepared for self-doubt and blank canvas syndrome to hit because it still happens to me even though I’ve been designing professionally for over 15 years.

Trust the process and the systematic formulas for better design. These are the exact methods I’ve developed and use today so I know they work.

Beginner’s mindset. When I see a new video get released on “Presenting Design” or the “Best way to do X” I’m still to this day extremely curious of a new technique or some new lesson I can learn and apply in my own work. I don’t ever want to consider myself to have fully arrived. I’m constantly learning, constantly seeking out knowledge, and the best designers I know have the same mindset.

  • Deeply understand your tools and the fundamentals
  • Deeply understand your surroundings—knowing who to ask and how to ask
  • Deeply understand the problem you’re solving for (business) and where things are headed

Here’s a great video from Saul Bass on “making beautiful things”

https://www.youtube.com/watch?v=tfDCNpaPBiA

Key Takeaway

Having a beginner’s mindset is critical for learning and absorbing new material. It’s also a skill required for approaching any new design project to understand and empathize with users’ whom you’re designing for.

Additional Resources

Choosing Design Software

In the video examples I will be using Figma, Sketch, Adobe XD, and InVision Studio to varying degrees. Some more than others. In fact, in the majority of the videos I’ll be using Figma, but that shouldn’t prohibit you from using any of the others, because the basic principles will remain. In some cases, I’ll show a variation of the same technique in each different tool, to give you a well-rounded view of what’s possible.

Maybe you’ve never used any of these pieces of software before or maybe you feel very comfortable with one already.

Either way, I want to demystify the stigma that comes with choosing and using any specific design tool. There are lots of great options and it will be hard to go wrong with any choice. With that said though, I understand it can be intimidating if you don’t have much experience with them…

You are the designer here, and you get to choose what tool best suits you.

Design tool deciding factors:

:family_man_girl_boy: Team

If you’re trying to get a job at a product company or agency and everyone uses Sketch. Guess what? You’re going to use Sketch at that place. Typically whatever the toolset the company is already using, that’s what you’ll be expected to use as well. It doesn’t take long to get learn the ropes of new software so don’t let that scare you.

Sometimes an internal team might be willing to experiment with a new tool and the entire team changes based on the experimentation. That’s exactly what happened at Square when my friend Dustin Tanner joined as their Design Systems Lead. The team worked primarily in Sketch and he was a huge Figma advocate—definitely at a time when I was much more skeptical of web-based tools. Over time, slowly but surely, the entire team adopted Figma as its primary tool.

If you’re going solo, you have less to worry about in regards to the the team, but you do need to ask about preferred file format, if any, before starting a project.

Just like with any part of the design process, communication is key.

Don’t make assumptions that can jeopardize the future of your project without setting expectations first.

:moneybag: Cost

  • Sketch – 30-day free trial then $99 for up to a year’s worth of free updates and Sketch Cloud.
  • Figma – Free for a single user with 3 projects and $12/month for access to unlimited projects and team library features.
  • Adobe XD – Free for one shared prototype and shared design specs. $9.99/mo and 2GB of cloud storage for unlimited shared prototypes and design specs with 100GB of cloud storage.
  • InVision Studio – Free with one active prototype. $15/mo. for 3 prototypes. $25/mo. for unlimited prototypes.
  • Framer X – No free plan. Starts at $12/month for unlimited updates and projects. $79/month to access Team Store (library)

:hammer: Capabilities

Each tool has slightly different features to varying degrees. Sketch has a very specific way of dealing with symbols and overrides for text and images, whereas Figma, Studio, and XD are more similar in the way you edit components right in place. I’ll cover much more of this later, so don’t let this concern you right now.

  • Sketch
  • Figma
  • Adobe XD
  • InVision Studio
  • Framer
  • Photoshop
  • Illustrator

https://uxtools.co/survey-2018/

:thinking: Personal Preference

When you’re starting out, it’s helpful to get as much exposure to different tools as possible. And even if you’ve made up your mind about your favorite tool, I challenge you to design a small project, even for an hour in a new tool and you might just be surprised.

But it’s not always the most efficient way to work jumping from one tool to the other all the time. Once you’ve made your decision, you can now exploit that tool, learn every little nook and cranny, all the shortcuts, and even come up with customs quick keys to make your workflow incredibly fast.

In the end you are the designer. This is your decision to make for your designs, even if your day job requires you to make everything in a tool that is not your favorite.

You can get started with all of these design tools for free right now). Not too shabby. Try one, or try them all it’s up to you. As we progress through the course, you’ll get a sense for what tool or tools I use depending on the project at hand.

Just know that the majority of the lessons, I’ll be using Figma or Sketch, with a little XD and Studio thrown in. You are welcome to follow the lessons in the same software as me, but it’s definitely not a requirement.

My goal with the course is is for YOU to learn design-tool agnostic tactics that can be implemented regardless of what your tool is.

Remember, you are the designer and for this course get to make your own decisions about the tool you use.

https://twitter.com/WhatsNewSeth/status/1229477696499068928

Homework


  • Choose your design software (if you’re undecided, use Figma!)
  • Design a small contact card component for yourself on a 800x600 canvas
  • Think of this as a reusable design system component where every piece of the interface could be replaced with another photo, another URL, or another name.
  • Include:
    • an avatar of yourself
    • your name
    • your twitter, IG, or dribbble handle
    • a URL to your website if applicable
    • a button for contacting you via email
    • choose your own typeface, layout, color, and style
    • don’t spend more than an 30-45 minutes on this
  • Don’t forget to save it, especially if you’re not using Figma (which autosaves your work). :blush:

UX vs. UI

Why


The design industry has specific jargon for nearly every possible aspect of design and not everyone agrees on all of this jargon.

Titles can also be quite confusing for some organizations as they can mean different things for different people.

The general terms for user experience and user interface get thrown around a lot and often times many people can’t come to terms for which acronym means which thing.

So just for your pure convenience, I’m going to give you my own point of view to ponder, so that you understand the mental place I’m coming from as I teach the material.

First of all, I don’t love the separation of the terms UX design and UI design as a fundamental practice.

The separation implies one can exist without the other and I don’t believe that to be true. Any digital “experience” someone has—is created by interacting with some type of interface.

While interface bits and pieces can be more tactile and more easily isolated for critique, they don’t have much value out of context with the greater experience.

So while we will be covering visual interface design in great detail, it will ALWAYS and I mean always be viewed with a very strong user experience lens to keep our priorities focused.

Even when we discuss more abstract qualities like space and margin, it’s all target to creating balance and harmony for the entire product, which will in turn help create more order out of chaos and ideally, relieve the user of unneccesary cognitive load they would experience had we not taken the time to design things in a very clear and easy-to-understand type of way.

What


Often the user experience is implied in a product. Take the calculator app for example.

The user has a problem. They don’t know how to mentally add, subtract, multiply, or divide a paricular set of numbers.

They have a device that solves that problem for them.

So their baseline, or starting point of A, is they have a math problem they want the answer to.

Their desired location of “point B” is the knowledge of the answer of any particular math problem.

So if we launch the default calculator on the iPhone we can very quickly see how the user experience plays out.

According to UX design this problem has now been solved. But if we add a little more focus to both the UX and the UI, we might get something like this.

In the Calcbot example, we get audio cues that are buttons are being pressed. We get a record of what we’ve typed in, AND we’ve gotten a little history of recent problems.

The functionality and the design has been through an extensive deep dive.

Now instead of thinking “person at point A” has a math problem they want solved, which is true…

Now we’re considering questions like this…

  • would it helpful for the user to see a record of the equation as they type it?
  • would it be helpful or fun even to have little sounds that happen when keys are pressed?
  • would it be useful to keep a record of previous results in a history that can be referred back to?
  • what if the user has other problems they want to solve, like converting kilograms to pounds

Technically these are user experience problems, but they are solved with thought interface design.

It’s not uncommon for someone (a stakeholder, developer, etc.) to be aware of a user experience problem, but not realize that it can be solved with a clever interface design solution.

You could also very easily build a case for keeping a calculator and a convertor as separate apps, but then you get into more of a business decisions, which also highly impacts the user experience.

Business goals are also a huge factor when designing a product.

  • Would someone be willing to buy a calculator app that has only slightly more functionality than the standard calculator app?
  • Would they be more likely to buy it if it ALSO converted numbers into other numbers?

Most of these business questions must remain a hypothesis until the app is on the market.

But you can see now the intricate interweaving of threads between UX and UI.

So our main focus here will be solving all of these types of problems WITH actual interface design.

Homework


Important Note:

The problem and the solution shouldn’t typically contain any information about the app or the website, etc. They should remain separated. For example, a food delivery app’s problem could be something like, “Person X is at home and very hungry with nothing to eat.” The solution would be something like. “Person X now has food and is no longer hungry.” The UI would be all of those steps in between.

Take survey of one of your current projects.

It can be an active project your on right now or one that you’d really like to work on… a conceptual app

…or even your own personal website

Write down the main problem your trying to solve from the user’s perpective. Try your best to establish their baseline point A (eg. need an answer to a math problem) as well as their additional small inconveniences associated with that problem… eg. viewing their math problem as they type it, converting that number to other numbers, having a history of problems to view)

And now write down the answer to their problem… the point B. For example, if you’re buying a drill, you don’t really “want” the drill, you want the hole that it can produce. And often you actually don’t want a hole as an end product, you probably actually want the result that that particular hole will allow for you. It’s up to you as the designer of the product to determine how far you will take the solution. And don’t forget, often times general solutions can be better than highly specific ones, and vice versa.

What is the main problem or problems surrounding the users’ “Point A” and where do they want to go “Point B”

This is how I view UX design—point A to point B.

The interface is stepping stone that will bridge the gap between having the problem and solving the problem.

Design Process Overview

  1. Understand the problem
  2. Determine the complexity
  3. Use lists, content maps, and user flows to help guide the project
  4. Wireframe or not based on project complexity
  5. Set design direction
  6. Present early and often
  7. Explore, iterate, and exploit
  8. Systematize

Why


It’s important to understand the high-level overview for the design process because it’s very easy to get stuck on individual details without knowing the larger strategy.

Choosing the color and the style of a button is important, but more importantly what is the strategy behind the button’s existence in the first place.

What


Understanding the problem you’re trying to solve with interface design is top priority before you begin to design anything.

And the more complex the problem being solved, the more important your role is to understand the problem fully, before attemping to design the visual aspect of the interface.


High Complexity

For example, one of the more complex projects I’ve worked on involved a responsive dashboard and a mobile application to manage thermal cameras monitoring industrial equipment for heat signatures during their operation.

The full scope of the problem was to solve how a user would setup the thermal cameras, connect them to a wi-fi network, and setup the camera according to which asset in the factory they would like to monitor. All of this information would be setup and accessed through a web-facing dashboard.

None of this had any design and I was tasked to figure it all out.

This type of design is extremely complex and the typography doesn’t matter quite as much as figuring out how all of this is going to work.

This particular project started with lots and lots of whiteboarding and putting together each task inside of a spreadsheet.

This particular type of project isn’t the focus of the course, but it is important to point out that there is ALWAYS a larger problem being solved by a business for its customers…

…and the interface design in that project is one stepping stone in solving the larger problem.

And not all complex design projects have to deal with such intense subject matter. Some seemingly simple projects might be really complex because you have to deal with multiple teams, multiple stakeholder sign offs, and a lot more corporate structure.

Not all problems you encounter as an interface designer are actually visual problems and the more situational awareness you have, the better you’ll be at your job.

And the way to creat more situational awareness is simply by asking questions and taking survey of the landscape and nature of the people you’re working with.

Just like anything, this gets easier the more you do it.

So in a project with high complexity, I start with lots of whiteboarding ideas for flow and asking tons of questions about functionality, etc. Often this results in having to document things inside of a spreadsheet.


Medium Complexity

In a project of medium complexity, I might create some wireframes (or rather, low fidelity designs) first to realy nail down the functionality of the product and get confirmation from stakeholders BEFORE moving to actual UI designs.

Stakeholders can be anyone with any opinion or involvement in the project, but primarily the decision maker who can give your design the greenlight.

So while you’re dealing with a medium complexity project, it can be helpful to separate the functionality conversations, from the visual conversations.

But not every time, it really depends on the project and your preferred style of working.

No projects where I’ve regretted doing wireframes. There HAVE definitely been times where I wished I would have started with wireframes.

This is a taboo topic.


Low Complexity

In a lower complexity project, it’s often fine to jump straight into visual design ideas and bypass any elaborate wireframing design exercise because the functionality is much more straightforward.

A great example of this would be a simple app with limited features or a marketing website created for a small team.

In these examples the functionality is mostly defined and agreed upon by all parties from the very beginning…

and all that remains is creating a really nice interface for the product.

This is definitely easier said than done, which is why the craft of interface design is so highly valued in the tech industry.

It’s worth repeating that it’s critical to understand the problem to the best of your ability before and during your interface design process.

Resources


Analog Thermal Cameras

My Monero

Contrast App

Homework


Take survey of one of your current projects.

It can be an active project your on right now or one right now or one that you’d really like to work on… a conceptual app

…or even your own personal website

Take some notes on the following:

  • Is the team complex and layered or is it just one or two people?
  • Are the features you’ll be designing for complex or very straight forward?
  • Would it be helpful to focus on general layout and functionality with you or the team involve first before digging into the visual side of the interface… OR would it be just as fine to go straight into visual design?

So remember the design process overview and let that dictate your approach to the start of any new project.

Further reading on “delivering your work in fidelity layers”

Using Reference Material

Main Points


  1. Design inspiration can come from anywhere, so always be on the lookout.
  2. Feel free to copy, but only for practice. Don’t try to pass someone’s work off as your own. Feel free to steal smaller, abstracted pieces of type or color, but only if you’re able to really make it your own.
  3. Example of streamlineicons.com, cinesampler, show a live example refer to video examples
  4. Remember to put away your inspiration when you’re doing the actual design.

Why


Stealing designs is a grabbier title than, “Using Design Inspiration,” but that’s what we’re talking about here.

Khoi Vinn’s post on copying work is a good reference:

https://www.subtraction.com/2016/08/11/the-underestimated-merits-of-copying-someone-elses-work/

Design inspiration is a great way to get you started. Whether it’s a typeface, a color, a layout, using something as an initial spark is a great way to get the wheels rolling.

Just be mindful not to rip-off the thing you’re inspired by.

Copying a masterful design though—pixel by pixel—exposes you to design decisions you wouldn’t have necessarily made on your own.

Just be mindful though, It’s super important to not straight up copy someone else’s work and pass it off as your own.

It will be tempting and if you focus too much on other people’s work it will be hard to imagine any other way to solve a problem.

Sometimes “one thing” isn’t even worth taking because that one thing is so synonymous with an existing product. For example, don’t use an angled “Stripe” on your marketing site. It’s too well known as the Stripe thing to do. Stripe is known for great design, but their big angled background has been copied too many times to pass it off as your own.

Don’t take more than one thing from any particular reference!

It’s too easy to slowly begin ripping off a design without thinking about it.

There’s also a big difference between recreating an existing design from scratch for practice, and then trying to pass off something that you’ve copied as your own work.

Stay above board in what you pass off as your own!

Your reputation will be tarnished if you’re caught doing this.

Building trust online and in real-life takes time. Every time you genuinely make something it’s like putting a rubber band on to a rubber-band ball of your credibility. Ripping someone off and getting caught is like taking an razor blade to that ball of rubber bands.

It’s basically beyond repair and the only option will be to start putting rubber bands back on that ripped ball. It’s going to take some time before the new rubber bands begin covering that tear.

Furthermore, that tear is always going to be there even if you cover it up with new bands.

And also… OK look can stretch this metaphor so far… I hope you get what I’m trying to explain here.

Hopefully you have a strong enough internal compass to know that stealing is wrong.

What


Here are some steps for finding and using design inspiration…

  • Make a list of things you like about the design and don’t look at it again
  • Steal one thing from a design that you can use and build on as your own—a color swatch, a typeface, an interesting layout, etc.
    • Here are some examples where I’ve “stolen” something and used it for my own project

How


In addition to using one thing from a reference as your own, it can be also really helpful to do some copy work.

This is one of the first things you do in painting class—copy an old masters painting. This exposes you to design decisions you might not have made on your own.

Definitely go read the post from Khoi Vihn about the topic after this lesson.

I’m going to recreate the the UI from the Apple Weather app in real-time, to give you some instruction on how to do your own copy work and what you can learn from it. Refer to video example

If you don’t feel comfortable posting your design alongside your inspiration or reference material then you’ve likely copied too much of the original design.

There is a big difference between doing copy work to learn and grow and ripping off a design. Don’t rip something off.

I’ve been in this exact situation.

If you look at something you admire for too long, you will hard wire your brain into thinking that that is the ONLY solution.

In these moments, put the reference material away! And then design 3 additional variations that venture out into other possibilities, especially for the parts that were closely copied.

Homework


2 Assigments for this lesson :slight_smile:

  • Pick 2 or 3 designs you really like and screenshot them (⌘ Shift 3 on the Mac)
  • Write down the things that you feel really make the design work.
  1. Using the exact same style, match the color, layout, and typography as best as you can and try to create some type of UI element (maybe a name and email capture form, or a headline, paragraph, and call to action) in the exact same style—like it would be an extension of that particular site or app.
  2. Now using either the same reference material or a different one of your choosing, try to “steal” ONE and only one element of the design and remix it for your own design. Use either the same type treatment, color treatment, layout, etc. But it’s important to pick only one. Try to use it as inspiration and create something brand new.

Links

Steal Like an Artist by Austin Kleon https://amzn.to/39NDIuD

Quick Keys for a Fast Workflow

The more you know your tool the more efficient you’ll be at designing interfaces. Make it top priority to really know your tool and find shortcuts as often as you can.

This will free up your mental bandwidth to focus on design decision making vs. trying to figure out how to use the tool and not making significant progress.

Common Quick Keys


  • A or F New Artboard or Frame
  • R Rectangle
  • T Text
  • O or E Oval
  • L Line
  • P Pen Tool
  • ⌘ G Group
  • ⌘ Shift G Ungroup
  • Return Edit a selected text layer
  • ⌘ Click Select an object within a group
  • ⌘ [ ] Move layer up or down
  • Hold Option Show measurements around selected object
  • Sizing shorcuts
    • ⌘ Nudge ( → ↑ ← ↓ ) Resize by 1px
    • ⌘ Shift Nudge Resize by 10px
  • Custom Alignment Shortcuts:
    • ⌘ Option ↓ Align to Bottom
    • ⌘ Option ↑ Align to Top
    • ⌘ Option ← Align to Left
    • ⌘ Option → Align to Right
    • ⌘ Option / Align to Middle
    • ⌘ Option . Align to Center

Homework


  • If using Sketch, install the free Align Layers plugin for Sketch https://github.com/mds/sketch-shortcuts
  • If using Figma, set the following shortcuts in System Preferences > Keyboards > Shorctuts (top tab) > App Shortcuts (left side bar)

Note

Figma has since added native shortcuts for alignment. Its ⌥A for align left, ⌥D for align right (basically using ⌥WSAD as arrows). ⌥H is for horizontal and ⌥V for vertical alignment. Might be useful for people who don’t want to setup custom shortcuts. But I have a lot of built up muscle memory from my own method. Either way is fine, just make sure you use something!

Using Figma?

Try this Figma Ninja Game to sharpen your quick key skills

Figma - :crossed_swords: Figma Ninja - Chapter #1 | Figma Ninja is a game-like experience to learn the basics of Figma and get really fast with short…

Organizing Design Projects

Why


Often times it’s easy to get bogged down in early decisions like file organization, etc. so it’s helpful to have a tried and true system in place so you don’t have to think about it.

This method will help you stay on track designing and not worrying about the analytical side of of digital file organization.

What


I have a very specific way I organize every design project. Small tweaks are made here and there, but overall this is THE system I use and it makes my life much much easier.

Folder Structure (Note that “Clients” could easily get changed to “Projects” and you could also have a “Projects” folder that is separate from “Clients” that is reserved for personal projects. This is how I manage my design work. Here is the structure:


Click to open folder structure

  • Clients

Homework


  • Create the sample file structure and familiarize yourself
  • Recreate your own file structure with Shift Nudge as the client name instead of NIKE
  • Make sure you’re using a cloud service like Dropbox or Google Drive if you don’t want to fall victim to hard drive failure issues. I personally use Dropbox.
  • Put any work you’ve created so far in the Projects folder with an appropriately name folder (eg. Contact Card > design > sketch > contact card MDS v0.1)
  • Use this as your new home for your design work during the course

Links


Q&A


Why duplicate design files when we have version control with Abstract, Figma, etc.?

I do rely on version control a lot, specifically Figma’s built-in version control primarily. I think this is great to keep track of UI that is more mature and possibly already in production.

The main reason I create duplicates is for early explorative work that is still in the experimental stage, when things haven’t been locked in yet and I’m still generating ideas. For me, version control and elaborate systems created too early, suck the creativity out of design exploration. I like to be able to have very quick access to early ideas that are highly visible without needing to go back a version number.

Why use a review folder when we have the ability to share cloud documents and live files?

Whether or not you use a review folder is definitely dependent on the type of team you’re working with. I do the majority of my work for clients and teams that have a final hand-off and lots of reviews in-between. I use Figma primarily as well, but it’s not always the easiest way to send someone who’s a non-designer a design file. So it really depends on your working preference as well as what your stakeholders prefer.

How do you organize your design projects inside of Figma?

I typically start with one or two experimental files without much organization. Then clean it up and fine tune things into a single UI file. Once the project progresses, depending on the size of the project, I’ll either organize features by pages inside of one file, or I’ll break up the project into multiple files based on feature or section. It definitely always depends on the project and people involved.

Figma Organization

There are 2 possible organization methods based on the size of your projects. These are absolutely suggestions and not the letter of the law. Use only the parts that feel right for you.

File organization can be a very political topic, so in effort to avoid any potential dogma, take these suggestions with a grain of salt. Do what you like, but if you’re searching for a better way, consider these!

If you’re doing client work…


  • Create a new project as “Client Name”
  • Create a new file as “iOS App” or “Website” etc. as necessary for the projects you’ll be working on. Completely fine to have multiple “files” as long as you are diligent about versioning them (v0.1, v0.2, etc.)
  • Then use “Pages” inside of the “File” as a way to separate flows or features (for example “sign up, profile, notifications” etc. for an app) or (“home, about, contact us” etc. for a website")
  • Don’t feel like you have to get too organized up front or it will slow you down. Rather organize and optimize your files…
    • when it starts to feel unorganized…
    • before you need to do a presentation…
    • before you need to share your work with another person…
    • at least once per week…

If you’re doing full-time work as an employee…


  • Hopefully they’re paying for the “team version” so you have team access
  • Create a team with your company name or with you internal team name if at a larger company
  • Use “Projects” as a way to organize your main… errr projects. =)
  • So your Figma sidebar would look something like
    • My Team
      • iOS App
      • Android App
      • Web App
      • Marketing Site
      • Branding
      • etc.
  • Then in each one of those projects, you would have your project files (eg. iOS App MDS v0.1 )
    • You don’t really need to include your company name in the file name because you’re already inside of a company account.
    • You might also not need to include your initials in the file name if you’re not going to be the sole “owner” of the file.
    • If you and another designer or designers are going to be using one file then keeping it more abstract from a naming perspective will be better.
    • However I do encourage you to work on your own private file that no one has access too in the very early stages of brand new projects or brand new features when you’re not quite ready to share.
    • Then you can copy and paste your private file work into the team file when you’re ready. This will also largely be driven by company policy.
    • Definitely make sure you have conversations with your team and let them know your plans. Communicate is key
  • Inside of your projects you might decide to start off with one file called “iOS app exploration v0.1” to get started on ideas.
  • Then a few weeks might go by and things get really large, you might find yourself needing to create multiple files within the project:
    • iOS components v1.0
      • this file would be a library that the other files could pull shared components from
    • iOS app Sign Up v1.0
    • iOS app Profile v1.0

It’s 100% OK to work in a messy way at first and THEN go back and do clean up. Try to do clean up at least once a week or so. It’s also really effective to do a round of clean up before each presentation you may have.

https://twitter.com/kerem/status/1232773447698116609?s=20

In the video below, Carola Pescio Canale—a product designer at Dropbox, shows her own Figma file organization techniques.


https://www.youtube.com/watch?v=C4LIC2n6pkw

This course is property of Studio MDS, LLC. It has been stolen and illegally uploaded (partially). A DMCA prosecution and takedown is underway. This is a clear violation of Section 5 of the terms of service shiftnudge dot com/terms

Please guys have some respect at least it’s a new course let the author make some living this really unfair…i feel so bad for the author please take down