Steve Schoger, Designer & Partner of Tailwind, shared on Twitter this short thread of helpful tips when designing for Dark Mode. He includes a few screenshots to illustrate his points; my favorite being his thoughts on achieving depth in dark mode. It can be tempting to boost your shadows in this instance, but often that leads to a heavy-handed solution. Instead, Steve suggests using reflective surfaces to achieve depth. I've used this approach often to great success. It helps keep the design light in visual weight while still accentuating the pronounced elements by suggesting they have “caught the light” and thus stand more proud from the design as a whole.
I love this video by Dan Mall, where he discusses his approach to taking on the “blank canvas” when designing. He learned from a former colleague of his, Jason Santa Maria, that “It's easier to revise than create.” He noticed that while he worked for hours on a single iteration of a concept, often not really feeling like the results weren't up to his standards, Jason would work very quickly through multiple iterations in the same amount of time. Often it would take Jason only an hour to finish one iteration and then he would make several more, ending up with multiple iterations and a more complete concept.
I was challenged by this, because I can often find myself using Dan's approach. It's easy to obsess over the details and whether or not everything on the screen is “good” at every step of the way. I know the merits of iterating quickly, but forcing myself into that habit can sometimes feel foreign. We all approach our work differently; I often am very cerebral, mulling every decision over in my mind before drawing or shifting an element on the page. This approach can still lead to great work, but often at the expense of time and the lost opportunity of discovering other, better solutions.
I'm planning to put the idea “It's easier to revise than create” into practice. I may even write it out and hang it near my desk as a reminder. It's good medicine to continually challenge and exercise our habits.
The inimitable Dan Cederholm is back again with another wonderfully delightful font named Cartridge. Inspired by the typography from classic Atari game cartridges, Dan crafted a new sans-serif full of quirk and character. There is a lot to love in Cartridge's glyphset. Some of my favorites are the numbersign, ampersand, set of alternates and hidden 8-bit monster glyphs. But while the characters look great in isolation, they truly shine when set together.
Dan has been steadily releasing typefaces and each are an example of his creative chops, but I'd say Cartridge demonstrates how his font-making skills have—pardon the pun—leveled up. Everything surrounding the release of Cartridge, from the marketing images, backstory and release video, show off just how much fun Dan is having making fonts. I'm looking forward to whichever font he has up his sleeve next.
Mike Davidson shared on Twitter a link to a helpful resource for web and product designers called Checklist Design. An evolving and growing collection of best practices, Checklist Design is a site you'll want to bookmark and have on hand whenever you're working through your next design project and need to make sure you have the bases covered when knocking out tasks such as a pricing page, reset password flow or user avatar. In addition to handy lists to follow (some steps illustrated with example images) George went the next step and often includes links to accompanying articles, inspiration and online examples.
Checklist Design is made by George Hatzis, a designer and maker from Sydney, Australia who made it to help improve his workflow and reduce the number of pieces which can sometime fall through the cracks of the design process. After 20+ years of designing I still find corners of my design where I've missed steps or crucial components simply trying to remember everything from memory.
I love these kinds of resources and I'm excited to see this one grow in particular. This is a side project for George and you can help support his efforts by buying him a coffee.
Beasts of England (aka Simon Walker) is back again with another absolutely beautiful new typeface named Sisteron. The sweeping curves, embellished alternate caps, and elegant ligatures are masterful and firmly rooted in the delightful typographical elements I've come to expect from BOE's fonts. I love how well the glyphs lock together with their complimentary curves, it all feels very art nouveau. Grab a copy for $36.
Veteran Designer Benjamin De Cock took to Twitter this morning to share some technical insights into how he built increase.com. The site not only looks great but has some pleasing animations as well. Benjamin highlights a few of key aspects in his thread covering items such as the aspect-ratio CSS property for scaling and re-usability purposes, Web Animations API to more quickly iterate on the animation and effects, the benefits and versatility of clip-paths, and much more.
He illustrates each point with images making the thread an engaging and descriptive read. It's peeks-under-the-hood like this which continue to inspire and motivate me to branch out and explore new implementation solutions of web design.
I've been following the work and tutorials of Bryan Coleman for a couple years now. Bryan is a creative director, motion designer, and style-frame artist and uses Cinema4D as the foundation for the work he produces. I discovered Bryan through Maxon's YouTube channel as they've had him host a few sessions at NAB (The National Association of Broadcasters annual conference) where he shares his process.
This video is from 2019 and Bryan breaks-down segments of three projects of his. What I like about this video is he starts with something fairly simple, moves onto something more involved and ends with a larger-scale project he partnered on with a studio. Each segment looks fairly complex, but Bryan does a great job at demystifying it all, making it approachable and actionable. A few items I'm absolutely going to leverage for my own work are:
Using a hair material on splines as way to generate thickness for mattes.
Rendering black & white mattes for layering and adjusting later in After Effects. I have a bad habit of trying to accomplish too much directly in a single render in C4D rather than approaching my images in a compositing mindset.
Using layers to be better organized in Cinema4D. I had no idea you could toggle several properties on/off for multiple objects by using layers, such a time saver!
Related: Bryan's session from NAB 2020 is more of a full-scene tutorial and definitely one to check out. I followed along, created a similar scene and learned a ton of helpful techniques.
GT Ultra is the latest typeface from one of my favorite foundries, Grilli Type. GT Ultra sits somewhere between a serif and a sans-serif. It pulls on shapes and patterns of classic serifs and infuses them into a modern sans that is unique and something completely of it's own.
Grilli Type excels not only at typeface design but also in the presentation of their fonts. Their font minisites are informative and beautiful; the one for GT Ultra being no exception. Definitely explore it for a deep-dive into GT Ultra's construction, offerings and how it came to be.
In addition, Grilli Type's Instagram account is a must for all type fans and font creators. Their GT Academy was instrumental during my days building Rebar as they share a wealth of knowledge and font design wisdom. Check out this Guide they posted on Instagram as an example of what I'm talking about.
I recently watched this tutorial video by Chris Coyier on CSS-Tricks hoping to pick up a few interesting tips on CSS Grid. Not only did I learn some useful tips related to Grid but I also picked up a couple handy workflow techniques while watching Chris at work. Here are my highlights:
At 4:30 Chris mentions (and I believe he credits Adam Argyle) how you can "Use CSS Grid just for the gap.” The gap feature is one of my favorite aspects of Grid…as you can quickly insert space between all of the elements in your container…and it never occurred to me to use it solely as a means of specifying “margins” for my markup. Very neat.
At 6:40 Chris shows off a tip for toggling a class on an element that I'm going to start using all the time now. Instead of writing a JS function or using something like jQuery, all you have to do is add a simple inline onclick event onto the HTML element on which you want to toggle a class on and off. This is the syntax: this.classList.toggle('className') Chris' use of this method is for adjusting the max-width of the <body> container simply by clicking on it and applying a separate class. He says he uses this approach sometimes when testing responsive layout changes because it eliminates the need of dragging the browser window in and out to see the changes take effect. Super helpful!
At 15:02 Chris shows a solution for a broken layout which occurred after changing the markup of the images and text to use <figure> tags instead. Wrapping the images and paragraph tags into <figure> tags caused the Grid logic to change the layout away from the intended result. To solve this, while still using <figure> tags, Chris adds a display: contents; declaration which I wasn't familiar with. That declaration essentially tells the browser to ignore the container and make the children elements act as the children of the next element up in the DOM. Once he adds that one line the Grid logic works again. There are some accessibility issues with this approach so while it seemingly works, it's one to use with care.
The whole video is worth watching just to see Chris solve the layout in real-time. He ends the video with an alternate solution to the broken layout using CSS Subgrid support, which currently only works in Firefox. Even though subgrid has yet to be more widely adopted by other browsers you can see the potential it has, especially in solving layout issues like the one in this video.
If you spent any time on Twitter this week you most likely heard the news about Dann Petty's latest design course: Stand Out as a Web Designer. Leveraging his 20+ years of experience, Dann walks through several real-world examples and speaks to the hows and whys of the success behind each design. Any seasoned designer will tell you that pretty mock-ups don't win-over clients. If you want to produce a concept that accomplishes goals, is more than skin deep and one you can confidently sell to a client then you need to have a keen understanding of specific design fundamentals…fundamentals like the ones Dann covers in his course. These include: ending your content with actions, teasing continuation, ensuring consistency throughout your design, and many other tiny details which build and support larger sections.
Dann is offering time-sensitive launch specials off the full price of the course. The current cost (as of this post) is $279 which is a bargain. He also offers Parity Pricing for those outside the US. Don't sleep on this one.
Designer and animator Guy walks through his process on creating procedural metal materials using Octane Renderer in Cinema4D. He shows how you can dial in various metal types as well as how to add imperfections to help generate more realistic results. Since these materials are procedural, meaning they use algorithms instead of bitmap textures, they are highly flexible and extendable.
I followed this tutorial months ago when I was exploring how to create a library of metal materials. The IOR site he references is invaluable and one I have bookmarked. The video is short and dense, which is great if you're familiar with Octane, but can be daunting if you're just getting started. The section on procedural imperfections flies by, but the more you become comfortable with Octane's Node Editor the easier it is to see what he's doing. A lot of what he's doing is repetitive. Nodes such as UV Transform, Gradient, Dirt and Noise will become your friends the more you dive into Octane or any renderer for that matter. He sells his package of metal materials at a great price. I recommend picking them up for your own projects or even to be able to open each material up in the Node Editor so you can spend more time understanding how they are constructed.
Amy Hood of Hoodzpah drops this quick tip on how to create a retro, grainy texture effect on your images in Photoshop. Using Filters such as Diffuse, Dust & Scratches and Noise you can quickly dial in the right amount of grain to your liking. There is even a Photoshop Action you can grab for free that automates the steps for you.
Hoodzpah has a growing YouTube channel of helpful tips and tutorials, so be sure to browse the rest of their content. I'd love to see more designers release videos like this which are less than 3mins and get right to the point.
Twitter member @BatSoup_ tweeted at Visual Effects Supervisor and industry veteran Stephane Ceretti asking for any tips or advice on becoming a VFX artist. Stephane replied with this tweet full of nuggets of wisdom:
Learn how movies are made ! Learn how stories are told. Be curious of nature. Take time to look around and see how light behaves at any time of the day or night. Take some photos, look at paintings. Watch a lot of movies and work a lot ! The rest is just tech stuff….
Stephane's IMDB profile proves he knows a thing or two. Any one of the items he mentions in his reply has merit, but perhaps my favorite is to “Take time to look around and see how light behaves at any time of the day or night”. Studying light is an on-going pursuit: how it drapes itself across a room, dances across the surface of the water, how it wraps around and gives volume to an object, etc. Photographers will tell you taking a great photo has less to do with the gear and more to do with understanding how to manipulate light. CG artists can be masters at modelling, texturing and animating objects but if they don't have the right lighting everything falls apart.
The programs artists use can absolutely help speed up processes, but they have yet to replace the hours required to study the material world around us.
Spacergif dropped this excellent tutorial on modeling a 3D character in Cinema4D. This style of 3D character is fairly popular these days and knowing there are countless ways to build 3D objects I was intrigued by his method of using C4D's Volume Builder and Mesher. The video is less than 40mins in length, so easy to watch during your lunch break, and I highly recommend checking it out.
If you're not familiar with Volumes then here's a short overview of how they work. Volumes allow you to build 3D objects quickly and in a non-destructive manner. Essentially you dump objects (primitives or editable meshes) inside a Volume Builder, arranging and editing them however you want to build up a base for your object. You can even do boolean operations on these objects (add A to B, subtract B from A, etc) which is super powerful. The Volume Builder all the while is representing this grouping of objects as a single object comprised of voxels. C4D then generates a single mesh when you place the Builder inside of a Mesher. The Mesher and Builder both give you options to dial-in the overall fidelity of your final mesh.
One of my favorite 3D studios gave me a little insight into their process by sharing they use the Volume Builder in C4D to produce their incredible work. Figuring out how to efficiently utilize these tools is still something I'm exploring but the potential is there.
I recently finished my first font, Rebar, and made it available for purchase. I sort-of fell into creating Rebar by accident. I was working on a branding project for a friend, drew some letterforms that I liked and felt they could be evolved further into a full font. Little did I know how much I would enjoy the process.
I took the few characters I had and used Procreate on the iPad to quickly sketch out what the rest of the alphabet could look like. This helped me stay loose in the exploration phase, work out which portions would repeat and where I had the opportunity to introduce character and individuality on some letters. The next step was figuring out which font-making program I wanted to use to complete the font.
Another wonderful resource is Grilli Type's Instagram account where they regularly share their expertise via their GT Academy. The crew at Grilli Type also replied to a few of my early Rebar posts offering helpful feedback which helped me shape the final version. The big takeaway is the font-makers out there are willingly offering up their processes and wisdom. Seek them out and ask questions.
Initially I envisioned Rebar being a title case font only, but as I was finishing the uppercase figures I couldn't help but wonder what the lowercase figures could look like. Going through the mini-design challenge per figure to determine “What would the Rebar-version of __ look like?” was addicting. Before too long I had multiple weights, an italics style, support for other latin-based languages, fractions, some ligatures and more.
Spacing and kerning was a journey. I had basic spacing in place (mostly a default setting of 50 for each side-bearing) and prematurely begin creating kerning pairs. I learned through the process that I needed to spend more time dialing in my side-bearings on each figure and create spacing relationships between similarly-shaped letters. The Spacing article on the Glyphs website goes into all of the details, but the gist is you want your round letters to share similar spacing, straight-sided letters do the same, etc. You want to get as far as you can with only adjusting the spacing of your figures before starting any kerning. I learned that the hard way and had to undo a couple hours worth of kerning pairs. In the end I probably re-did my kerning 3 times because I didn't understand the power of Kerning Groups until the 2nd time through. Again, the Glyphs website goes into great detail on these subjects and you'll want to read every where of their Kerning article.
Initial tests using Rebar for the first time
During the spacing and kerning process I tested exports of Rebar a few times. Even though Glyphs has testing tools, I wanted to put Rebar through some design stress-testing. I used Illustrator and Figma to play around with it and see how it performed. This informed me about missed kerning pairs, line-height issues, and many other bugs that needed to be ironed out. I also started sharing examples on Instagram and Dribbble to get initial feedback. This part was incredibly thrilling as I was using my font for the first time.
In Glyphs you can use included strings of sample text to test out your font. It's definitely handy, but will only get you so far. I used those as my starting point for refining my kerning, but when I came across Hoefler & Co's “Text for Proofing Fonts” article I felt like I hit the jackpot. I copied and pasted their lowercase and uppercase proofs into Glyphs and went word by word to refine my kerning. While time-consuming this process identified a lot of kerning needs. I suggest just grabbing a beverage of choice and working through them one after the other.
With my first font released and the knowledge I've picked up along the way I'm anxious to get started on my next font. I have a couple of ideas brewing. My hands will be full with managing Rebar in the meantime so it'll be awhile before I kick off font number two, but I'm definitely hooked on the journey. If you pick up a copy of Rebar I'd love to know what you think. Feel free to email me or reach out to me on Twitter @philcoffman or @methodandcraft.
In March 2011 I launched Method & Craft, an online publication of design techniques and tips from some of the industry's top designers. It existed for a couple years before my life took enough turns to prohibit me from being able to maintain it properly anymore. Since then I, alone with some friends, tried to reboot it but the momentum always fizzled out. I officially said goodbye to all hopes of bringing it back about a year ago.
During those years I also had a few different iterations of a personal site. Years ago I blogged more often but when social media invaded my life I found it difficult to publish to the blog with any regularity. My hat is off to those who have been able to consistently plug away on one since the beginning (I'm looking at you Kottke and Daring Fireball).
Even though these two endeavors struggled to maintain traction I never lost the desire to have an online place I could call my own. I also realized that my love for consuming creative processes, tips and techniques and sharing those with others (which is what prompted me to create Method & Craft in the first place) never died. If anything this passion has grown and expanded. Plus now, compared to 2011, the amount of knowledge-sharing has skyrocketed. There are so many creators willing to share and avenues for them to use to do so. Social media feeds, video and streaming channels, blogs and publishing platforms are full of great creative, actionable content.
What I want to do is provide a space to collect some of this great content and share what I find intriguing for others to enjoy. My hope is what I share inspires you, introduces you to new creators and creative fields, and raises up those who have so generously shared their expertise. You can find these posts here, you can subscribe to the RSS feed, and you can also get them by following @methodandcraft on Twitter. Feel free to reach out to me there or @philcoffman with any comments you may have.
Welcome to the new Method & Craft. I'm glad you're here.
