We’ve all been there. You’re working on a project, and suddenly you are told you will be presenting your progress in 5 minutes to your stakeholders, the CEO and your childhood crush who are all excited to see what you’ve been up to.
There is no time to put a deck together. There is barely enough time to find the latest versions of each screen and put them in a separate page in an attempt to make the project look a bit less messy and cluttered. But you do it anyway and walk to ̶y̶o̶u̶r̶ ̶d̶o̶o̶m̶ the meeting room.
You connect you screen to the monitor or start sharing your screen. This is your first impression! Make sure you are presenting what needs to be seen and ONLY what needs to be seen. You don’t want them commenting on your wallpaper or even worse, see how cluttered your desktop is!
Luckily there is a solution for that:
Just make Sketch go fullscreen!
There is a very handy shortcut that I haven’t seen many people use when presenting their work using Sketch. Under the View menu you can find a nifty tool called Hide Interface.
The keyboard shortcut for this is Command Period.
This trick has never failed to impress other designers in any meeting I was presenting at.
Everyone else in the meeting: Wait! How did you do that? Me, an intellectual: Command Period. ?
Time to move forward with the presentation. Now that you have fully cleared your screen of all clutter, shame, and weird layer names you are ready to share your screen.
Now comes to important part! Actually presenting your work. Ask yourself this: How do you bring the viewer’s attention to the parts of the screen you’re presenting? Move your cursor furiously over the button you’re pointing at? Grab the whole art board and move it so that they know which one you’re talking about? There must be a better way!
Zoom to selection: Command 2 Zoom to all: Command 1
These are the only two shortcuts you need to remember now. And use them like a pro. Select an art board or a layer group on the screen and Command 2. Bam! Hyper focused feedbacks ensue. Need to jump to another screen? No problem, Command 1, select the next art board, Command 2. Boom. You just blew everyone’s mind. Your PM rushes out the door to buy you a trophy, your childhood crush confesses their love for you (which you turn down), and the CEO offers you a raise. All because you learnt these few shortcuts.
From now on, when someone asks you to jump in a presentation to show your work in progress, the only thing preventing you from blowing their mind is the actual work you’re presenting. Which is great! I’m sure! I mean… You’re doing a great job! We all appreciate you! Ah, you know what I mean.
It happens to the best of us—we’re browsing a website when all of a sudden, we hit an error. What ensues next is hopefully an engaging, on-brand 404-page experience that might just instill a bit more patience in us. Well, we’re here to show you a few examples of web designs and illustrations depicting error pages that we actually wouldn’t mind getting lost in. Enjoy!
While you’re at it, check out Dribbble’s very own interactive 404 page design!
Use this incredibly simple rule that is, somehow, never mentioned in school or design courses.
Humans like boxes.
We love boxes so much that they are central to both our visual and conceptual world. Stereotypes, music or art genres, religious or political views — all of them are boxes, or at least attempts to put stuff into them. But also in the physical world, 2D or 3D, we love boxes.
Here’s a neat little trick to show you what I mean: ask anyone to draw a circle on a piece of paper. Then ask them to draw something to contain the circle they drew. Guess what? Most people will draw a box around the circle.
This is remarkable, because a triangle, a hexagon, a wiggly-ass diamond, or even another circle would have sufficed just fine. But no: we like boxes. To put stuff into, stack them, align them, and stuff our attics or garages with them. Boxes feel solid because they are. In three dimensional space, a box is made up of six 2D boxes. Parabox. They’re almost like magic.
Now, before you get ahead of me: no — the ‘box’ is not the mystery design-rule I’m talking about. But boxes do have something to do with it; otherwise, I wouldn’t bore you with this introduction.
Let’s get to it. A two-dimensional box is made up of four lines. And, as we’ve seen with the circle, we are tempted to visualize boxes around everything we perceive in 2D space — e.g., UI and visual design.
This is very apparent in the act of wireframing and rough prototyping: we conjure op a composition of wired boxes that represent the entire user interface, and this works remarkably well.
Yes, I made that up myself. It’s not super catchy, I know. Let’s stay on-topic. The four strokes making up a box end at each intersection. But in our unconsciousness, every one of those lines draws out an imaginary line much further, through the entirety of your design. Like this:
This also applies to a circle, or any other shape, like this:
Every object draws these four lines through your design, regardless of their shape. This goes for rounded buttons, weirdly masked images, paragraphs of text, giant headings, social media icons — everything.
An easy way to see how this works is by simply drawing three shapes onto a plane. The shapes interact, even if they are quite far apart from each other. The reason for this is that, regardless of the distance between the objects, the imaginary lines of them do collide somewhere on the canvas.
This is the most fundamental rule when it comes to composition. It is how you handle the sum of all of these lines that makes your design look either cluttered or clean. I call this The Extendabox rule because it has more ring to it than “the four-line rule” and it makes sense: you extend the lines of boxes.
Well, not really. A grid works the other way around: you define a set of columns, gutters, and rows to make up certain sections of your design, and you then position all of your objects onto that grid.
While this works to keep your design clean, it can be limiting to your creativity, and your design might come off as dull or uninspired.
It is for this treason that I once was a grid hater. I believed that I was a wild horse, meant to roam free and be unconfined. Grids posed a threat to this eternal goal of mine. I and my creativity should never be tamed.
Until they were tamed, in a way. Acknowledging all of the invisible lines that go through your design helps you create better interfaces. Now, you might be tempted to assume that, based on the Extendabox-rule, everything should go into a grid. Not so much. Some things should go into a grid, but a grid should — in my opinion — be a result of all of your Extendaboxes, not the other way around.
What I like to do is approach a design gridless, and then as I progress, a logical structure resembling a grid will appear slowly.
The next step is to align certain things that were already nearly aligned in the first place. If the extended lines of one object are only a few pixels or mm away from the lines of another object, you merge them. Taking out these small inconsistencies and weird gaps can suddenly bring calm to your design because you are significantly limiting the number of lines, making the composition easier to comprehend.
The sketch above shows what I mean, roughly. I started by sketching a basic layout, without a grid. This allows you to play around with the composition without being too confined.
Then, when you’re somewhat okay with where you’re going, you try to minimize the number of orange areas, which are areas where the extended lines nearly touch.
You can keep repeating this process — it’s iterative. Every time you move an object, other line collisions or gaps appear. It’s up to you to decide when to stop, but generally, you will quickly come to a point where removing even more gaps will make your design look generic and dull. Right before that point, you stop.
Things like this are great to read about, but you won’t grow unless you practice. Luckily, in this case, practicing is easy. A great place to start is to dissect existing designs. Head over to Awwwards, for instance, and look at award-winning websites.
Then just visualize all of the boxes and apply the Extendabox-rule: extend their lines and see a grid appear. This way you’ll be able to really understand what the designer went through getting to that specific end result.
If you want to take things further, take screenshots and draw onto them, or try to recreate a website UI you love out of only boxes and lines. In a geeky way, that can actually be a fun and relaxing experience.
Once you start mastering this rule, you will be able to create clean but bespoke UI designs in far less time than you do now, because you’re taking the guesswork out, and instead you take on a pragmatic approach to layout and composition.
Every month we roundup the freshest new web sites that have been released in the previous four weeks, with an eye-out for new ideas.
In this month’s collection we’re seeing some minor trends, like the return of sliders, over-sized text, and liquid effects. But the biggest thing of note is a brand new trend: brutalist typography and layouts, made more appealing by soft, feminine color palettes. Enjoy!
Globally renowned agency Wolff Olins’ new site is engagingly simple, but when a company like this embraces a trend, you know it’s got staying power. Edge-to-edge text, and a brutalist approach softened with color, are both evident.
Universal Sans is a variable font with a pretty awesome site that allows you to adapt the font for your own purposes. For many of us it’s as close as we’ll get to designing a typeface. Once you’re happy you can even buy your customized font.
Warner Music Norway
Warner Music Norway embraces a traditional slider to highlight some of the artists it represents. It works because there’s no text to read, you either recognize the musician or you don’t. Scroll a little and you’ll find on-trend brutalism.
Ackee is self-hosted analytics software. Its site opts for a bold typeface for headings, and makes use of some beautifully illustrated palms to introduce brand colors. The subtle animation does an excellent job of illustrating how the product works.
Redscout’s logo is big and bold, and stretches across the screen. It stays fixed in place as an outline as you scroll, before getting bold again when you reach the bottom of the page. The black text on white, and the overlapping grid is classic brutalism.
Low Intervention embraces several of the current trends, most notably the liquid effect, and brutalism toned down by the use of a sophisticated color palette. Brutalism is still the dominant theme, with edge-to-edge content, and little whitespace.
Marble’s purpose is to bring together art and science to tackle some of the problems faced by children around the world. Its delightful site features maze-like text, with dozens of marbles rolling around referencing both problem solving, and play.
Never let it be said that you can’t make the logo bigger. Hypergram’s logo takes up the entire page, obscuring the portfolio. The changing background color is a nice effect, and offsets the work in the slideshow perfectly.
Vahur Kubja’s site is one of the first sites we’ve seen to adopt the latest design trend: it’s relentlessly brutalist in all but one respect, the color scheme is a sophisticated minimalist palette of green, peach, and pink.
Mutha’s site is big, brash, and bold. With heavy black text. Not the style you’d expect of a skincare company — which would typically be light, gentle, and unassuming. Which is exactly why this brutalist site stands out.
The Happy Hero
If you’re a big fan of this year’s brutalist trend, then you’ll love this micro-site for The Happy Hero, a self-help book about positivity. The site’s adopted brutalism and then subverted it, drawing inspiration from both Pop Art and De Stijl.
Most people browse the web with the sound off, which presents a challenge to companies selling audio products. Devialet solves the problem brilliantly, with a swirling galaxy creating the impression of depth, range, and power.
What can you say about Bruno Simon’s site, other than you have to play it to understand it. Drive the toy truck around the site, knocking over awards and breaking the scenery. It’s not practical, but it’s fun, and a great showcase for his skills.
Readymag is a browser-based design tool for creating simple sites. Its landing page features oversized typography, which is impactful, and fairly daring for a company of this type. They’re laying their cards on the table right away.
Climate Adaptation Australia
Alongside the nice, bold menu system, Climate Adaption Australia features one of the very few effective sliders you’ll see. Sliders have largely been discredited as a design pattern with poor user experience, but in this case it works.
If brutalism is too much for you, you can let out a sigh of relief with this one. Giovanni Rustanto’s site is elegantly minimal in both visuals, and interaction. The pleasing burst of terracotta right at the end adds some much needed flavor to the color palette.
1017 Gin’s site is a high-class mix of glossy magazine layout, and coffee-table book. The one-pager is understated, with just a nod to trends with undersized images. The way the page splits when you click buy, is lovely, because it’s unexpected.
Sedilia is a minimalish site, that exudes comfort, simplicity, and style. The product photography is great, but it’s the framing that makes the difference. The site also features excellent typography and an unusual choice of font (it’s GT Zirkon).
Gyro is another site that features over-sized typography, and again it’s the company logo. Move your cursor and it explodes in an interesting 3D effect. Gyro also has all the hallmarks of brutalism, tempered by a lovely color palette.
Dorian Lods’ site is another example of the trend common among developers at present: a liquid effect. This is a particularly standout version, not least thanks to the way it integrates into the rest of the site, as a device, not a crutch.
If you’ve become accustomed to the slick, sophisticated look of minimalism, prepare your eyeballs for a shock. This month, we’ve reached tipping point on the maximalist design trend, with color, movement, and energy flooding the web.
You’ll find a few other trends, and sites that ignore trends altogether, in our roundup of the freshest web design this month, but it’s hard to ignore the vibrancy that’s taking over. Enjoy!
Chevalvert is a French design agency whose site visually bombards you from the moment it loads. The maximalist approach is visually overwhelming in places, and individual work can be hard to distinguish, but what the site conveys brilliantly is the creative passion and courage of the agency.
We’ve been vibing on minimalism for a decade or more, but recently a more anarchic, more colorful, more visually aggressive style has taken hold. #24HourAce for Gucci is the embodiment of this maximalist trend with crazy animation, color, and glitch effects. More is more.
La Maison de Santé Pantinoise
The web’s not all clashing colors and glitch effects. The site for La Maison de Santé Pantinose, a medical practice in a Parisian suburb, calms potentially anxious patients with pastel tones and simple color block animation that sensitively illustrates the conditions treated at the practice.
Ride & Crash
Back to anarchy, with Ride & Crash’s energy-packed site. From the variations on its deceptively simple, but carefully drawn logotype, to the text that transforms from gibberish as you scroll, everything about this site communicates creative confidence, admirable in a young project.
As if keen to demonstrate that modernist typography can also be expressive, Collage Crafting’s landing page text explodes deliciously as you scroll. But what I really love is the way the hover effects combine in the product page, making the box appear to slide from one item to the next.
Genesis Block is an impressive site for a fintech company. The line art illustrations reach another level by using gradients to promote the feeling of three dimensions, and the animation that’s tied to the window scroll — not least the animated Rubik’s Cube — is all presented expertly.
Until the growth of maximalism the biggest trend on the web, favoured by SaaS, was animated blocks of complementary color, looping to produce low file size, high interest motion on a site. Dropmark uses the trend to frame its landing page and divide up the generous whitespace.
As soon as CSS grid was announced we were promised it would herald new web design layouts that broke out of simple RWD grids, and we’re finally starting to see some. Olivia Palermo uses a complex grid to present a fashion magazine-style site that’s vibrant, dynamic, and engaging.
Hest is a Norwegian photography agency and presents its photographers’ work in a standard way. But in places, the designers have added a sharp drop shadow in pastel, breaking up the grid and creating a sense of depth. It’s such a simple trick, but amazingly effective.
Kaohsiung Music Center
From the moment the brand mark animates as a loader, it’s clear that the Kaohsiung Music Center site is something special. The impressive three dimensional site for a Taiwanese music venue features a flyover of the site based on architects’ renderings. It feels game-like in its futurism.
Ooma makes cloud-based home communications services, from security cameras to entry systems. The clean landing page for its home security cameras uses an alternating alignment to create a predictable and reassuring rhythm, perfect for those looking for a safety solution.
Using heavy black outlines and halftone shading, Déplacé Maison’s art directions evokes the feel of graphic novels. An aesthetic reinforced by the lettering-style typography. It’s a look that makes you feel that you couldn’t fail to find adventure in these shoes, exactly what their customers want.
Guzema Fine Jewelry mixes images, text, and video to create a design packed into little boxes, that feels part-browsing experience, part-gift receiving. It’s slow, which is usually a disaster online, but for luxury goods, the sense of anticipation actually adds a positive edge to the experience.
Trux Studio’s site opens with a full screen video that clearly explains the Danish business’ unique offering. Packing a portrait studio into the back of a lorry, the team travels to your location to shoot corporate portraits. It’s a shame for us they couldn’t pack it all into a plane.
Black Futurism 2019
Black Futurism is a conference that took place at the start of October. Organized by the Harvard University Graduate School of Design’s African American Student Union, it’s about exploring liberation and equality through design, and this promotional site is a simple, powerful statement.
Spots, zits, pimples, and all manner of skin ‘imperfections’ can be crippling on your self-confidence, especially among younger people. Starface is an awesome company that is rebranding its spot treatment as something to be celebrated with its super-positive site.
Old Spitalfields Market
Old Spitalfields Market is a fashionable covered market in East London. Its site uses a classic modernist grid to divide up the page. The grid transforms as you scroll, with different sections pausing, while others glide past. It’s a technique that’s repeated across the sumptuous site.
Graf Lantz is an LA-based company producing cute accessories that they market directly to customers in Japan with this dedicated site. It’s fascinating to compare the company’s approach to the Japanese market, with its .com. The Japanese, it seems, love liquid transition effects.
Convinced the Brutalist trend was destined to be short-lived? Proving there’s life in the harsh style yet, Two Robbers is a site for hard seltzers brewed in Philadelphia. The stark site emphasizes the unique flavors of the drinks by contrasting the black and white with bursts of color.
2nd Street Clothing
Finally, the maximalism trend returns in full effect for the 2nd Street Clothing site, but you’ll have to scroll to see it. With reversed text, colourful animation, spinning images and video, it’s a young, energetic style. This site won’t look the same in a year, which makes it perfect for right now.
Welcome to September’s edition of our monthly roundup of the best sites to be launched (or relaunched with significant updates) in the previous four weeks.
This month, there’s tons of color, and some elegant transitions. Video is huge this month, with a number of sites opting for video front and center. You’ll also find some delightful animated illustration. Enjoy!
Bon Iver Visualizer
This impressive site, built with Spotify data, visualizes all of the people currently streaming Bon Iver music, including key details of their location like elevation, and weather conditions. It’s a fascinating attempt to make streamed music a collective experience.
Paris-based stylist Jia Szeto’s portfolio site is a joy to browse through, with colorful frames that bring out the best in the photography, and stylish transitions that move you from one project to the next. It’s deceptively simple, and very high-class.
Headless Horse presents a new way to browse through a studio’s portfolio. In this case, move your cursor around the wall of seemingly random thumbnails. It works, because Headless Horse have worked with some huge clients, so recognizable brands leap out at you.
This site is a joy to browse around. The exquisite product photography and the luxurious feel of the transitions — note the subtle blur added to the fade — make Monastery’s skincare range highly-desirable before you’ve even tried it.
Hazelbrook Legal is a corporate law firm, its site is innovative in its field, using a large video, showing a ball rolling around an Escher-style maze. The ball is solid, and its path is calm and certain. Exactly what you want from this type of company.
Ramus is a design collective drawing talent from across the creative industries to produce works of art with light. The scale of its portfolio is truly impressive, and a different showcase video loads each time you visit the site.
If you want to be successful in design you need to carve out a niche. Thirst has certainly done that by only designing packaging for drinks. The animated gradients on its homepage calls to mind exotic flavours perfectly.
Near Miss Memorials
Near Miss Memorials is a public safety campaign from New Zealand that’s educating the public about crossing train tracks safely. Scroll along the tracks, and watch videos of people risking their lives for a few extra seconds off their journey. It’s an impactful, and potentially life-saving site.
Seafood From Norway
If like me, you’re hooked on Nordic Noir TV dramas, then the opening video on Seafood From Norway’s site will get your pulse racing. The site is actually a very beautiful advert for the Norwegian fishing industry, showcasing its high standards. The recipes are great too.
This awesome illustrated site uses animation and simple illustration to simplify technologically complex solutions. Best of all, the flow of the illustrations lead you through the sections of the site, drawing you into the content brilliantly.
French design studio VLNC has a unique approach to the thorny problem of how to layout thumbnails, they turned them into a mouse trail. It’s a surprisingly effective way to make use of one of the web’s oldest clichés.
The ingredients on Fetching Fields’ site look good enough to eat, and with its luxury-feel brand you’d expect this to be a fancy new foodie option. But Fetching Fields are selling treats for our dogs. Because our furry friends deserve the best.
One of the most difficult aspects of a site to get right is the tone. It’s when user experience, art direction, content, animation, and typography all come together to just feel right.Tusk gets it perfectly.
Normally, any delay in getting to a site’s content is a bad thing, but Auckland’s We Compost opens with a delightful animation of earthworms, which ties the concept together instantly. It’s lovely.
Who says parallax is dead? This simple site for CBD-based drink is calm, brand appropriate, and makes excellent use of the tried and tested effect that we all love to hate to love.
The Jacky Winter Group
The Jacky Winter Group represents illustrators, artists, animators, lettering designers, and all manner of visually creative professional. The site is almost an assault on your eyes. It’s modern, exciting, and packed with energy.
NYT Food Festival
This great little site for the New York Times’ Food Festival captures our attention with fun, animated typography. There are excellent splashes of color blocking throughout the site, even if the vital information is a little hidden away.
With an innovative range of surfboards, the site for Almond Surfboards captures a retro, West-coast vibe perfectly. The warm off-white colors and all-American typography feel precisely on point. Check out the accessories section for some awesome flag-based lettering work.
Hudson Hemp uses an opening looping video to set the tone of its content. It’s respectable, science-orientated, it could be a feature for National Geographic. All essential characteristics when you’re selling a product about which there is so much misinformation.
Adventure of the Detective’s
I don’t pretend to fully understand Andrew Maruska’s quest-generator for D&D. But what I do understand is the excellent choice of typeface, that levels-up this one-pager. It feels entirely appropriate, and I wish more sites were brave with their font choices.
Welcome to the August edition of our monthly roundup of the freshest web design, released (or re-released with significant updates) in the last four weeks.
This month we leap back to the culture of America circa 1969, dive into the oceans with whales, discover multiple approaches to pitching a design agency, get invited to festivals, and shop online the right way. Enjoy!
Kilotype’s awesome new site shows off its variable fonts with a clever mouse-track — move your cursor around the screen vertically and horizontally to see the full range of each family’s weight and italic.
Once Upon a Time in Hollywood
The latest film from Tarantino is steeped in the culture of 1969, from the moon landing to Woodstock. This amazing promo-site does an incredible job of transporting you to a different era.
Wade and Leta
Wade and Leta are a partnership of talented art directors, whose offbeat sense of the absurd leads to some truly original and inspiring work. The homepage videos range from hilarious to bizarre.
If there’s one place I’d like to be right now, it’s floating around the coast of Menorca on beautiful traditional fishing boat, and that’s all thanks to this inspiring site for Balearic boat hire.
The Believer Magazine
The site for The Believer Magazine is charmingly counter-culture, with deceptively sophisticated typography and New Yorker-quality illustration. Exactly what you’d expect from a modern culture publication.
Cher Ami’s site features plenty of engaging work, but it’s the little details that make this site special, like the way the menu flies out not-quite-square, and the hyperspace-style transitions.
Good Day sells CBD-infused beverages from a tastefully minimal site. At roughly $6/drink, it’s not cheap, and this sophisticated site is ideal for positioning the company in the luxury consumables market.
Dice is a German music and arts festival. Its site features some incredible, generated organic shapes, with animated gradients to match, and the seamless eternal scroll is a delight.
The Flatiron Collective site opens with animated illustration. It’s an eye-catching pitch for business, far into left-field from the usual agency promotional site, and doesn’t even showcase previous work.
Whales are among the most intelligent, graceful, and magical creatures in the world. This inspiring site features extraordinary photography and facts about the magnificent creatures.
InDnegev is an Israeli music festival with a psychedelic animated site. The site features bold color choices, subtle animation, and two people riding a giant fox made out of stars, because why not.
One of the big trends in online shopping is 3D, and Gucci’s Marmont collection jumps on this trend with a 17th-century inspired art exhibition featuring its latest purses. Scroll to browse.
Oust is a leading creative agency with tons of amazing work. Instead of pressing its portfolio, Oust’s site shows off the energy and ambition of the company’s professional culture.
Gantri designs better lights, and its site is a glorious collection of careful ecommerce best practices and stellar product photography. This is exactly how you should sell products online.
Look Deeper is an eye health campaign from Australia that wants to educate you about the dangers your eyes face, with an impactful infographic style site highlighting the various threats to your eyesight.
Ada Sokół’s portfolio is designed to focus entirely on her unique brand of futuristic, 3D artwork. Alongside commercial work you’ll also find some exceptional personal work.
Embracing the www-ness of using three letters, where one would be too real-world, is Stuuudio, a design agency with a nice line in blobby-animated transitions. It’s a good take on the classic agency site.
Ocean Vagabond is a watersports company in Morocco. Its homepage features some small-scale video, but navigate to one of the location pages for inspiring video and typography interaction.
Festival is a vibrant and engaging one-pager for the Camberwell College of Art undergraduate degree show. With light-hearted typography and interactive confetti, it’s a great online invitation.
Neutral Works is another design agency with a penchant for interesting, liquid-style transitions. Based in Japan, it’s fascinating to see the different approach to familiar products in a foreign culture.