Build Design Systems With Penpot Components
Jul 21, 2:15 AM
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.
smashingmagazine.com
The Design Team – Medium | Pablo Stanley
Twelve steps to procrastinate like a professional
1. Start by rearranging your workspace.
A clean workspace makes for a clear mind. So rearrange your desk, Marie-Kondo your stuff, take a photo, and post it on Instagram: #readytowork. Reply to every comment with an inspirational quote about cleanliness, like “Decluttering your workspace leads to a productive day.” Consider writing a Medium post about it. Start a draft. Add it to the other twenty stories that you never finished.
Side projects!
2. Wait for inspiration.
Any minute now, inspiration will strike like a lightning bolt and your work will explode with creativity. Browse Dribbble and leave unconstructive comments like “OMG. SMOOTH. AWESOME. LOVE THIS SO MUCH. BUTTERY. WOW. CHECK OUT MY WORK.” Then visit Behance and spend hours browsing other people’s unbelievable work. You’ll soon start feeling depressed because you lack their talent and dedication.
Inspiration!
3. Make some coffee.
Your brain needs caffeine to get those ideas moving. Hey, better yet, walk to that hip coffee shop with long wait times and get your favorite espresso drink. Nothing like an overpriced non-fat vanilla macchiato to get your creative juices flowing. This is another opportunity for an Instagram story. Put your mug next to your laptop, find the right angle, use the rule of thirds, and snap! Write a description saying “Coffee shops keep me super inventive!” Spend half an hour editing and selecting the perfect filter.
Productivity!
4. Invest lots of time browsing type foundries.
There’s always something new to check out in those hip Swiss typography shops. Look at those gorgeous scripts, those delightful geometric sans, and oh, those clever ligatures! Browse, test, and try different type combinations, even though you never buy anything. I mean, come on, everything is too expensive (and you end up using Futura on every project anyway.)
A penny saved is a penny earned!
5. Read some tweets.
Keep yourself updated on what’s new and trending on Design Twitter. How else will you know what you should think? Then retweet, like, follow, start new threads, contribute to the drama and comment on all the discussions. Everyone needs to hear your voice! Your opinions matter!
Someone doesn’t agree with you? Mute them! Was someone rude to your design hero? Report them! Is someone critical of the rebranding of that startup you love? Block them! Slowly start creating a bubble around you. Isolate yourself from reality, wrapped in an environment of shallow relationships. Get surrounded by people who agree with you and will not challenge you. Remain protected in your lovely safe space.
#designleadership.
6. Grab a healthy snack.
You need to keep yourself strong and healthy; a snack will give you that boost your body demands. Grab an organic, fat-free, multi-grain, non-GMO, zero-high-fructose-corn-syrup, gluten-free, grass-fed, natural, certified-fresh, superfood, hormone-free, artisanal, probiotic, free-range, paleo, local, granola bar.
Oh, your body still needs more energy? No problem, your nearest food truck has your back. Buy a baby-sized burrito and embrace the food coma.
Healthy!
7. Take a nap.
Well, after that overpriced greasy mountain of carbs, you need to get some rest. Did you know that sleep positively correlates with more divergent thinking and creative behavior? No, that’s bull, but tell yourself that 🙌. You will wake up invigorated and ready to get stuff done.
Energized!
8. Watch Some Educational Videos.
Ok, you just woke up from that carb-infused dream. You naturally can’t move a finger. This is an excellent opportunity to learn new things. While laying down: open your laptop, put it on your belly, and start binge-watching the Netflix show Abstract. It’s design-related, so you can say it’s for inspiration. Might as well also watch The Office and learn work politics. What about Silicon Valley? It’s about the startup life so it’s ok, right?
Educational!
9. Take a walk.
Enjoying long strolls brings inspiration. When you’re walking in the fresh air, you produce double the amount of creative thoughts compared to when you’re sitting down. Did you know Steve Jobs used to have meetings while walking? Think different!
Take the opportunity to support your local grocery by buying another snack. What about helping your local brewery too? Start with a sampler so you can try the pale ale, the saison, the IPA, the seasonal sour, and the stout. Savor the hops, behold the colors, embrace the aromas. Are you getting inspired yet? Pick your favorite and drink a couple of pints.
Open your mind!
10. Sketch some ideas.
Nothing is better than the feel of a pencil and paper in your hand. Start drawing whatever comes to mind. Sketch away! What? Are no ideas coming? Creative block? Maybe you don’t have the right tools. Browse Amazon for a sketchbook and pen, read the reviews, watch the videos, evaluate the recommendations. Hey, one hour has passed, and now your cart is ready with the shoes, sunglasses, and scarf you were initially going to buy. Oh, wait.
Geared up.
11. Do everything last minute.
Oh, crap—you’re presenting your work in half an hour! Time to get stuff done. Are there any UI templates out there that you can use? Go to a site with stock design resources. Sort by popular. Download. Copy. Paste. Change the color. Swap the logo placeholder. Use photos from Unsplash that don’t have anything to do with the product but look pretty. Lorem-ipsum every text layer. Use a plugin to fill your mockup with fake names, fake images, fake dates, and fake products to make it look more real. Boom! That e-commerce site is looking tight.
Work smarter, not harder!
12. Make it Pop!
Ok, this is it. It’s time to make a great impression. Put everything in an isometric perspective mockup, apply exaggerated soft colored shadows, and use different gradients for the backgrounds. Copy all your designs into keynote and add the Magic Move animation. Write big bold headlines that say random words like Ideation, Reality-Based UX, User-Centered Approach, Sustainable Framework, Convergent Design, Gamifying E-commerce, etc. The big words and the flashy effects will divert from the actual work, and nobody will notice that you’re presenting crap.
If the keynote didn’t distract them enough and they start asking questions, just say the following:
“I took a human-centered design creative approach with iterative prototyping and careful consideration for the entire experience. My process begins by building a deep empathy for the people I’m designing for and ends with answers that are tailor-made to suit their needs. My solution will be a success because I’ve kept the user’s goals at the heart of the process.”
LOL.
Getting stuff done!
How I made the animations
Some people have asked me how I create animated GIFs like the ones above. Let me share you my process.
- I use Photoshop to draw the illustrations.
- I draw on an old but reliable 12″ Cintiq tablet.
- I use two brushes. A basic solid brush to do all the outlines set at 100% opacity. And for coloring I use the Kyle Big Rough Texture brush (which should be available for free with Photoshop.)
- I separate the outlines and coloring in different layers. This gives me more flexibility when experimenting with color. It also keeps the outlines clean.
- If I want to add shadows or highlights, I would also put them in different layers. I set the blend mode of the shadow layer as Multiply and the highlight layer as Screen or Dodge at a low opacity. I usually like using colored lights and shadows, not just black and white—it makes your illustrations look more vibrant.
- To create the animations I use the Timeline feature from Photoshop. To open it go to the menu Window / Timeline.
- There are two types of timelines you can create, video and frame timelines. The video one is like a lite version of After Effects, you set keyframes and Photoshop creates tweens between them—super easy to use! The frame timeline works similar to old-school animation where you draw each frame individually. This requires a lot of work and time. I use the Frame timeline 😎
- To start animating draw something, and then create a new layer on top of it. Change the opacity of the previous drawing to around 30% and draw a new frame on the new layer.
- If you want to create a slower animation, then your new drawing should move just a bit. If you want it to move fast, then the difference between your new layer and the previous one should be bigger.
- You repeat step 8 and 9 until you finish all the frames of your animation.
- To create the animation, on the timeline panel you will have to create a new frame for each layer that you drew. You want to turn ON the visibility of the layer that belongs to each frame and turn OFF the ones you want to hide.
- To create a loop, you have to make sure that your last frames go back to the initial drawing. Sometimes you can just repeat some of the frames and put them in reverse order to create a boomerang effect. Change the looping to forever. And finally, set the time of each frame to 0.1 or 0.2 seconds. Anything higher will create a very choppy animation. And that’s it!
Admittedly, this is not the most efficient way of making hand-drawn animations. I only recommend it for quick gifs. If you’re already familiar with Photoshop, it’s super accessible. There are other pro tools like Toon Boom that are specifically for animation. If you’re serious about it, you should check it out.
I recorded a couple of sped-up videos showing my process (maybe I should’ve started with that, huh?):
My process to create hand-drawn animations using @Photoshop Each frame is painted individually 👨🏽🎨 https://t.co/qEnMxbOYJN
Dance Moves 🕺🏽 #animation https://t.co/x8sphdl9kI
PSD files
If you want to play around with the Photoshop files, you can download them from Dropbox. Don’t forget to turn on the Timeline panel to see what’s happening 😉
I would love to see what you create!
Hola, amigos. I’m Pablo Stanley, designer/cofounder at Carbon Health.
I usually post comics and design-related things on Twitter. Follow me if you’re into that stuff: https://twitter.com/pablostanley
Oh, I also have a YouTube channel with tons of design tutorials. And you can subscribe to get my spam.
Espero tu día esté lleno de momentos felices.
Special thanks to Courtney M. Sawyer, Gabriel Valdivia, and Edgar Chaparro for fixing my grammatical horrors.
How to Efficiently Design Everything at the Last Minute was originally published in The Design Team on Medium, where people are continuing the conversation by highlighting and responding to this story.
