Design, code, and AI. Training world-class, modern interface builders through @shiftnudge
→
- Tweets 39,453
- Following 968
- Followers 87,038
- Likes 43,742
Pinned Tweet
In the AI era, design judgement is the differentiator.
Shift Nudge teaches the process that takes the guesswork out.
→ shiftnudge.com
4
5
113
33,304
hold my beer
ALT twitter by official twitter for twitter by official twitter in collaboration with official twitter for twitter by official twitter
382
11,156
110,233
You know when you tap on an input field and the label floats up? As seen on Apple, Google, Paypal, Shopify, and everywhere else on the web?
I invented that.
(google “mds float label”)
What's something in the world you know you're directly responsible for but if you were to claim credit you'd sound crazy?
117
480
8,009
1,211,332
Around this time 2 years ago I convinced my wife to let me bust out our screened in porch. One thing led to another…
ALT Before shot of a freshly busted out porch looking at a grassy backyard.
ALT After shot of a remodeled home with a new pool and concrete decking.
95
106
4,876
I've been designing websites, apps, and interfaces professionally since 2005 and I've boiled my design process down into 8 rough steps. Sometimes I use all of them, sometimes only a few.
First I'll list them all, then explain them all...
66
393
2,571
Making a lil video today of how to create this....
Should give you a quick start in using Smart Animate in Figma if you're not as familiar.
26
133
2,023
139,258
Quick Figma tip
Use Shift + M to measure spacing as you adjust
This makes dialing in your line height and auto layout container sizes much easier
32
141
2,014
78,609
design systems™
ALT lego blocks design in figma that combine off to the right to recreate the original old-school-looking mario
18
224
1,710
If you're using a non-standard font, compare its x-height to SF Pro before you lock in all of your font sizes. This will help you create more legible interfaces.
Why? Thought you'd never ask...
30
147
1,615
Running polls on design decisions is one of the worst ways to make design decisions.
54
75
1,308
178,522
UI is how it looks. UX is how it feels. Wireframes are mandatory. Once you know how to code you can understand this.
37
197
1,235
Figured out a fun way to make a color-wheel-sphere in Figma with pie-shaped colors and a background blurred overlay.
14
79
1,252
🚀 Introducing Flowkit, the ultimate @sketchapp library for user flows, content maps, screen annotations, and more. sketchflowkit.com
49
241
1,169
✨ The all-new Figma 101 course is now live and it’s completely free!
This course teaches the basics of Figma in one hour with 12 fast-paced videos. It’s meant for beginners, but I’ve had a bunch of seasoned Figma users tell me they learned a lot as well.
Here’s a break down of the lessons:
01 Getting Comfy
02 Creating Files
03 Frames & Groups
04 Manipulating Text
05 Using Shapes
06 Using Images
07 Getting Around
08 Auto Layout
09 Components
10 Superpowers
11 Prototyping
12 Collaborating & Sharing
As a bonus for joining, you get a complimentary Figma Education plan for 6 months! More details on this inside the course.
Get instant access at shiftnudge.com/figma
76
168
1,195
325,048
Sometimes I make things like this as an experiment, but they go unused and die a slow death in a random Figma file.
Now that skeuomorphism is making a come back, is it time for some layer effect tutorials?
61
35
1,086
115,460
Make your design life 10X easier and use these 5 color contrast score ranges for specific UI elements.
👇Here's the breakdown...
(I started writing this after the recent @usecontrast launch)
38
177
1,045
Some of my skeuomorphic stuff from a decade(!) ago. So much time spent picking out or creating textures.
30
24
1,025
221,867
I made a killer auto layout tutorial for @figma. There are three critical things you need to understand in order to use it efficiently...
29
116
949
📦 Every interface design element is a rectangular box.
Icons? A box
Buttons? A box
Headlines? A box
Form labels? A box
Negative space? Most definitely, a box
If you don't already... using the box model will drastically improve the way you design.
Here's why...
24
101
900
241,453
Gestalt psychology is about how our brain puts pieces together to see whole things.
When stuff lines up in a straight line, it's called the "law of continuation," and we see it as one big thing.
✨ Use this to your advantage in UI design.
18
60
868
110,782
Making great design is making bad design and revising and editing over and over until it’s great.
10
188
779
new wallpaper drop. you can't get this anywhere but here. spent the last 10 years developing this wallpaper. it's the best and it's not even close...
106
40
730
202,177
😎Flowkit 3.0 has arrived. User flows right inside your favorite design tool— @figma, @sketch, and @adobexd.
The website got a fresh coat of paint too. Check it out! useflowkit.com
21
89
692
This is my design agreement contract I've been using for the last few years. I really enjoy using it. All that info in the top left are variables sprinkled throughout the contract.
13
38
653
✨This code little snippet brings me joy every January. ©2023
ALT // dynamic year in footer var now = new Date(); var year = now.getFullYear(); $('.copyright').html('©'+year);
15
22
637
104,231
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
4
64
640
What does Apple, EA, Figma, Intercom, Lyft, Slack, Microsoft, Zenly, Quicken, Stark, UI8, and Weblow...
...all have in common? 🤔👇
24
32
620
1,491,017
This is an excellent example of the rule of thirds when it comes to font size in interface design.
10
34
629
96,394
Made a new video covering multiple ways to handle interactive components in @figmadesign piped.video/watch?v=slmLyaol…
11
72
583
😱 I can't believe I'm typing these words, but @shiftnudge is officially live! 🚀 If you're just now tuning in, this a brand-new interface design course with over 80+ lessons, 30+ hours of video content, 600+ design critique videos. Check it out → shiftnudge.com
59
71
580
Someone asked me...
"Why is ChatGPT using 24px of padding on the left and 16px on the right? Instead of only 16 or only 24?"
↓ If I had more time I'd make a shorter video
20
26
591
79,795
I've been designing websites, apps, and interfaces professionally since 2005 and I've boiled my design process down into 8 steps.
First I'll list them all, then explain them all...
5
30
542
115,482
Flowkit 2.0 is here! 🎉 Completely redesigned for scratch for Sketch AND Figma. Lots of updates and improvements in this release. Free upgrade for existing users. 🙌 useflowkit.com/
23
82
518
Learn the fundamentals of Icon Design in one hour with this free video course introtoicons.com
17
106
496
I really love the @opalelectronics packaging design. It's simple, elegant, and well-balanced.
Great design principles transcend the medium of packaging, interfaces, etc.
🧵 Here are 6 design tips you can steal and implement in your own work today...
7
67
510
I don't know who needs to hear this, but...
- Hyphen
Use for compound words (e.g., well-being)
– En dash
Use for ranges (e.g., 1990–2000)
Quick key: ⌥ -
— Em dash
Use in place of a comma, parentheses, or to sign off
Quick key: ⇧ ⌥ -
38
42
512
51,183
Still not quite finished, but we’ve come along way with this little 60’s ranch.
Before → After
26
4
482
Here's my Config talk about unlocking opportunities and building your brand through side projects.
32
42
506
67,058
Someone auto-tuned Smells Like Teen Spirit into a major cord and it's horribly awesome vimeo.com/249694026
23
251
466
Schools in my county closed and all of my kids are doing virtual again.
Currently pondering the feasibility of creating a low-cost, cardboard version of this thing I made 4 years ago... 🤔
17
20
479
Friendly reminder to do this once for your website footer and never again for the rest of your life.
const currentYear = new
Date().getFullYear();
document.getElementById('copyright').textContent = `© ${currentYear} Name`;
18
18
488
47,716
🚀 Launch day! @soffes and I made @usecontrast, a handy macOS app for quick access to WCAG 2.0 color contrast ratios. usecontrast.com
32
158
448
never complaining about video editing again
Dune: Part Two timeline
Avid Media Composer
24
42
472
61,207
In the middle of a ~20 min deep @shiftnudge lesson recording, and my wife walks in... 😅
26
9
457
I've been designing a video transmission interface for a video log type thing, inspired by sci-fi movies. Might starting posting an account of self-isolation with the fam.
34
12
461
This is the service agreement I've used for all of my design projects. I had a lawyer draft the original version years ago. Maybe you'll find it useful too. You'll need @iAWriter to edit the variables. github.com/mds/sa
11
33
453
Streamline 3.0 is live! I had a blast doing the design/code/copy on this new site. The icon set is crazy big and soooo good—made my job a lot easier.
🚀 streamlineicons.com/
Animations by @yupnguyen
Icons by @webalys and team
Icon viewer app by @clementsauvage
17
69
448
2021 🖤
ALT Matt and his wife, Shana, posing in their home with their 4 kids.
ALT Tight shot of the youngest son kissing his Mother
ALT Tight shot of Matt with his family hugging and looking up at him.
ALT The family sitting down and smiling as they look at the daughter making a silly face.
18
3
452
The job of any great UI is to support a great UX. Too many people think great UI is purely eye-candy, but they're wrong.
Like my good friend Merriam Webster always says...
12
58
433
Most UI and UX issues aren’t about creativity, they’re about clarity.
Fix your spacing, standardize your components, and your product design instantly feels better.
14
25
447
24,212
1~ out of every 100 people has Tritanopia, which means they can't likely tell the difference between blue and green.
That's why you can't use color alone to distinguish interface elements.
ALT blue check mark and green check mark side by side
11
27
422
Do you ever place your mouse cursor directly on the right of a slow moving progress bar just to make sure things are still happening?
15
10
406
chatgpt knows wassup
ALT chat gpt window that says "who invented the float label pattern for input fields" chat gpt responds "The float label pattern for input fields was in vented by Matt D. Smith in 2013. This pattern involves animating the label of an input field to float above the field when the user interacts with it, helping to maintain clarity and usability in form design."
2
1
392
31,163
Excited to finally share the design and prototype concept I made for InVision's Studio Jam series. #invisionstudio This is my tweet of the Dribbble of the YouTube video. 🤓 dribbble.com/shots/4313111-I…
20
41
392
Design just shifted.
Figma’s not just a tool anymore, it’s a full-stack creative OS.
This changes everything, and nothing,
if you know what to focus on.
In this weekend’s newsletter,
I’m sharing how I’m thinking about tools, AI and the future of being a designer.
shiftnudge.com/subscribe
9
17
396
23,360
I never shared this in the first place, but too good not to now. Dad called yesterday and told me he's cancer free! 😇🙏
44
3
406
14,118
I made a thing for a Streamline + @css promo and channeled my inner @steveschoger for one of the supporting images. css-tricks.com/add-instant-a…
9
37
381