Instagram Inspiration

September 27, 2020

I’ve been collecting visual inspiration from artists I follow on Instagram, so I’m sharing some favorite recent-ish posts below. I encourage you to check them out and follow if you find something interesting!
 

Counter-Print is a great resource to find all sorts of emerging, fascinating art & design books, magazines, and more. I love the stationery and homeware products they feature, too, like these spectrum rulers above. What a cool look! The shop is based in London, and you can see more beautiful products on their website here.

 

View this post on Instagram

how i define art: feel something and then create work that evokes that emotion in others it doesn’t take much and it doesn’t have to change the world, but it might change your own world just enough to make you feel okay lately i’ve been struggling with my purpose on this planet (who isn’t) and distracting myself with tactile tasks like packaging up stickers and stamping pencils and the sort of hands on stuff i did a lot of in the earlier days of having an online shop i’ve also been digging into my work archives as i plan a personal zine anthology as well as an abridged work archive for my website and you know, just spending a lot of time looking at what i’ve made and what makes it feel good or bad or special or useful or not (to me) the world is scary but honestly it’s always scary… trying to focus on the good, because it’s there too, even if i take it for granted

A post shared by Adam J. Kurtz (@adamjk) on

I’ve been a long-time Adam J. Kurtz fan, and this post from July resonated with me. Follow his work if you haven’t already!

 

Brilliant work by Derek Abella for NY Times Opinion Art—another good follow if you’re into editorial illustration!

 

Morgan Harper Nichols is an artist, poet, and musician with over 1.5 million followers on Instagram. Her work is deeply inspiring and affirming!

 

View this post on Instagram

😌💙

A post shared by ✎ maggie c (@mcmintea) on

Maggie Chiang makes beautiful watercolor illustrations that “evoke a longing for adventure and the pursuit of the unknown, exploring impossible landscapes and places unseen.”

See more of Maggie’s art on her website!

 

I love pennants, and this collaboration between Oxford Pennant and Julian Montague is so delightful.

 

This work by Masashi Murakami caught my eye on the It’s Nice That feed:

In an increasingly technological world, there is ever-more demand to make something digital appear physical – apps that “turn” iPhone photographs into 35mm film are a prime example of this. Rarely do we find ourselves changing things in the opposite direction, but that is exactly what Masashi Murakami has been exploring in his latest exhibition, affects.

Read more about his process here!
 

Bonus Video Finds

Andrea Love’s charming stop-motion animations using felt and wool.
 

A series of abstract kinetic characters by Lucas Zanotto, including his creative music and sound effects!
 

Visual, animated love letters by designer Debbie Millman.

Eight takeaways from SmashingConf’s Resilient Web Systems workshop

May 24, 2020

These past few weeks, I took part in Smashing Magazine’s first-ever online workshops. I’ve been a Smashing fan for a while, and thanks to my agency, I attended Resilient Web Systems with CSS & Sass led by Miriam Suzanne.

Miriam is a core contributor/expert on tools I use daily (Sass and W3C CSS working group). The workshop was a deep-dive into CSS and covered advanced topics such as core fundamentals of CSS, modern and intrinsic web layout, CSS architecture, maintainable design systems, new tools in CSS and Sass, and more.

The experience was truly fantastic and outdid my learning expectations. Attendees were invited to chat and ask questions, slides were well-presented, and the environment was refreshingly friendly and intimate given the virtual format. I found myself many times during the workshop amazed at how useful and applicable the information was. For my professional goals this year, both the technical details and takeaways from this workshop will undoubtedly come in handy.

I want to share just a selection of takeaways from Miriam’s workshop. I took many pages of detailed notes, but these high-level concepts will surely stick with me. I’m also looking forward to SmashingConf Live in a few weeks!

CSS is about context and relationships

On the first day of the workshop, Miriam covered the history and theory behind CSS as well as core concepts like the cascade. Since I only briefly learned this information in school and on the job, it was fascinating to hear in depth.

CSS was designed around accessibility and user control, which makes it radically different from other programming languages or design tools. It relies on meaning and intent (semantic markup and purposeful declarations) and the language is contextual, adapting to change.

Designing for the browser takes a different approach

Pixel-perfect web design isn’t attainable, nor is it worth aiming for. Many times during the workshop, this idea was brought up, and it’s important for everyone who works with the web to understand.

Because the web is a flexible, resilient medium compared to print, the best we can do as programmers is describe intent—providing hints & suggestions for things like sizes, flow, typography, and color. The browser will interpret our intent across different canvases, for unknown content.

This unpredictability is a fact—it’s the reality and power of the web. When we let go of trying to make the web experience match Photoshop comps perfectly, we leverage the medium in exciting ways.

And instead of limiting ourselves with the 12-column grid system which is everywhere these days, we can be inspired by graphic design history, which has always used interesting and different types of grids.

We need to redefine what browser support means

Browser support is a common thing we face when developing websites, with feature support always in flux. The current mindset in our industry of supporting a certain percentage or set of browsers is frustrating—and it just doesn’t work.

Instead of re-writing code for each instance, progressive enhancement should be used to build from basic to advanced implementations. If the content is there in an accessible manner, it’s good. We can support everyone possible by supporting more browsers with lower standards.

Moving forward, we’ll be able to use features as they are available without concern for legacy browsers like IE 11. This idea of evergreen browsers exists today, and through practices like progressive enhancement, we can take advantage of it.

Cascade-aligned programming makes work easier

Working with built-in tools like the cascade in CSS, we can stop programming against the grain and begin working in harmony with our platform. Whether we’re using new techniques like custom properties or managing design systems, we should consider fundamental CSS principles along every step of the process.

Automation helps us focus on the more important details

The best tools are ones that encourage you to use best practices and consistency, and get out of your way to focus on what matters. Automating parts of our system or using integrated documentation is smart in this respect. And when we have time to do the important work, that’s always a great situation to be in!

Tools and processes are people-dependent

It’s important to find or build tools that fit to you, not just what’s working for someone else. We’re all dealing with similar problems, but we all have unique constraints.

And if design systems are not communicated, they don’t exist. At the end of the day, it’s about communication between people & teams.

Continuous integration: accurate and maintained over complete

Design systems can be complex endeavors, sometimes spanning huge teams, applications, and platforms. By starting small with what we know and what has the most reach, we can aim for accurate and maintained over complete. Getting one piece right is the important step.

Continuous integration means it’s fine to go back and adapt—it’s an iterative process and it will take time to figure it out.

Start with meaningful and structured code, readable by humans & machines

Clear semantics is the basis for everything on the web. This helps browsers, users, and other developers because it makes code intuitive to read, understand, and maintain. For users, well-written code forms accessibility, which is a human right.

The art of making playlists for friends

May 21, 2020

In our algorithm-driven world, creating a personal playlist for a friend is meaningful.

Playlists are an excellent way to share your music discoveries if you have friends with similar tastes in music or even ones that don’t. Plus, people are lazy when it comes to finding new music. Applying your knowledge of genres, artists, and your corner of the music world to a tangible thing that can be gifted can be much appreciated.

Regardless of which digital streaming service or physical media you use, here are a few tips for creating unforgettable mixes for the people you care about:

Be a curator

When it comes to playlists, curation and editing down is key. You probably have thousands of songs in your personal music library, but others only really want the best of what you listen to, or a taste of recent favorites. Be opinionated and critical of your selections, but know you don’t need to limit yourself. Playlists can be as short or long as you deem necessary—just aim for quality.

Listen often, and with intent

Pay attention to what’s happening in music, and you’ll be that much more valuable as a provider of playlists. Read music news, listen to other playlists, and hear from expert sources and tastemakers. Likewise, the same attentiveness goes for the songs you listen to. Practice listening with intent regularly, focusing on different instruments and vocals, as well as what you enjoy in songs. This is also a useful tip for playing back your playlists and making changes.

Create a flow for the songs

Once you have a selection of songs you’re content with, play around with the order in a strategic way. Playlists should flow somewhat seamlessly so there aren’t any abrupt shifts. Try to craft a story using only the sounds! Lastly, don’t add songs that are too similar back to back, or you may end up creating pockets of repetition. Your playlists should always be memorable and never dull, so spend time balancing the arrangement of songs to end up with a mix that’s both smooth and interesting.

Play it for yourself

As you give thought into the choice and order of your songs, don’t forget to play it back for yourself. Take your playlist for a ride in your car, and put yourself in the listener’s perspective. Or, go for a walk with your playlist and focus on what’s working and what’s not so great.

Go all out with the experience

Playlists are gifts, so don’t forget that your creations are meant to be enjoyed. If you’re a creative visual type, create a custom-designed cover or tracklist. A thoughtful note also goes a long way, describing the purpose or inspiration behind the playlist. Even if you aren’t creating a physical packaged experience, you can still have fun with the process of sending your playlist via Spotify or Apple Music.

Examples of covers I’ve designed for friends and myself. I use art and nature as sources of inspiration, and pull from my own photos.

Don’t overthink it

In the end, creating a playlist for a friend should be enjoyable. If you aren’t liking a particular part of your playlist, don’t worry too hard about it because they likely won’t even notice. You created something special, and that’s important!

More about...


How Should Designers Learn To Code?

April 6, 2020

I came across this intriguing two-part series of articles on learning code by Paul Hanaoka for Smashing Magazine. There are a lot of tips and tricks here, and some things I wish I would’ve known sooner. Part 2 was most useful for me as I’m discovering aspects of programming/engineering principles through my job currently.

New areas of learning, such as tokens and components, have changed how I think about design. I believe coding is a beneficial skill for designers to have, not only so you can code, but also so you can apply the types of thinking that coding requires into your design practice.

More about...


The Many Benefits of Annotating Your Wireframes

April 5, 2020

A useful article by Andrew Smyk on the Adobe XD Ideas blog.

Through my experience, I’ve found that using notes and annotations in wireframes often helps communicate your design decisions—which is critical in such an early phase of a project! Annotations can bring clarity to UX intentions, help clients understand the broader context/overall picture, aid with handoff for development and copywriting, and much more. Plus, notes can be an excellent resource for your future self, reminding you of details if you pick up the project later on.

Without annotations, wireframes can become confusing to others. For example, a client may not have the full understanding of what a particular section is there for, or how it will align with their business objectives. Although, as the author states, it’s still important to walk through your wireframes:

Wireframe annotations are for providing context and communicating project concepts and ideas to stakeholders. More often than not, wireframe annotations are not read over in detail. Be prepared to speak to your annotations and answer questions from the client and project teams.

More about...


Making templates for sitemaps and wireframes

February 21, 2020

Earlier this year, I began work on sitemap and wireframe templates for our team to use on client projects. Before this initiative, we used Illustrator and InDesign to design these on a project-by-project basis. This workflow was not as streamlined as it could’ve been for a number of reasons:

  • Inefficient design tools. Illustrator and InDesign are great for graphic and print design, but these tools can be a bit overkill for UX assignments like sitemaps and wireframes. For example, if all you need is a way to draw rectangles, text boxes, and lines, Illustrator may not be the perfect fit for the task at hand. We’ve been using Adobe XD for around one year now, which feels like a faster and more natural way to accomplish these tasks.
  • Lack of reusable elements/consistency. Without templates, we were essentially recreating the elements we needed each time. This can create extra work upfront, since making and refining these elements adds up costly time. In addition, our work lacked consistency from project-to-project since each sitemap or wireframe was treated slightly differently. A shared system for sitemaps and wireframes that includes common, reusable elements is a smarter approach.
  • Lots of tedious manual work. Adobe’s traditional design tools like Illustrator and InDesign were not built for modern UX workflows. For example, manual resizing, lack of components, and other repetitive tasks plague these tools when used in a web design or UX capacity. In code, you don’t need to resize a button if you change its text contents—it happens automatically. Newer tools like Figma and Adobe XD solve these challenges and bridge the gap between design and development. Most recently, Adobe XD introduced Content-Aware Layout, a useful feature that speeds up UI design.

Our solution is a system of cloud documents in Adobe XD—a shared wireframe kit, a blank wireframe, and blank sitemap. Based on a wireframe kit my manager and I purchased, the shared wireframe kit includes common layouts and blocks for our websites, as well as base elements.

The idea is that since everything is linked to the master kit, we can adjust/add new components as needed. Each of the three files also includes an instructions layer with helpful tips for getting started:

I’m super excited to use these for real client projects so we can gain efficiency and improve our workflow. As a test, I also mocked up an example wireframe using our blank wireframe template. You can see a preview below!

Why consistent writing makes you a better designer

February 18, 2020

Writing is such a valuable skill. In this article by Eugen Eşanu, he outlines several ways writing helps you think and learn, enhances your chances of success, contributes to your personal development, and strengthens your relationships with other people.

To write about something, you have to be inspired. To be inspired you have to read, listen, talk to others, or think first. Many creators and inventors consume inspiration from all sources before they create or write something. Whether it’s going to a museum, visiting a new city, meeting people, listening to a podcast or presentation, you have to consume first and then create.

More about...