Tagged “design”
Buttons and links: definitions, differences and tips
Some of the web’s design and development practices have led to buttons and links becoming conceptually bundled together and misunderstood. Practitioners can fall into the trap of seeing the surface-level commonality that “you click the thing, then something happens” and mistakenly thinking the two elements are interchangeable. Some might even consider them as a single “button component” without considering the distinctions underneath. However this mentality is harmful for effective web development and causes our users problems. In this post I’ll address why buttons and links are different and exist separately, and when to use each.
Design Engineering, on the Clearleft Podcast
Loved this short listen from Clearleft, on a subject close to my heart! New job titles can feel a bit “emperor’s new clothes” but with Design Engineering I think Clearleft, GitHub et al. might be onto something. It was fascinating hearing people from both design and engineering backgrounds give their perspectives, and how ultimately they’re addressing the same thing—the need to “finesse the overlaps/gaps” between design and the realisation of that design in engineering, especially in light of the complexities of the modern front-end.
Doppler: Type scale with dynamic line-height
line-height on the web is a tricky thing, but this tool offers a clever solution.
Accessible Color Generator
There are many colour contrast checking tools but I like this one from Erik Kennedy (of Learn UI Design) a lot. It features an intuitive UI using simple, human language that mirrors the task I’m there to achieve, and it’s great that if your target colour doesn’t have sufficient contrast to meet accessibility guidelines it will intelligently suggest alternatives that do.
Crafting Component API, Together (by Nathan Curtis, on Medium)
Nathan (of EightShapes) discusses how to unify anatomy and props across code and design tools.
Robb Owen - Independent Creative Developer
Definite “personal website goals” here in Robb’s beautiful online portfolio and blog.
From interaction design to scaleable design systems, single-page apps to something more experimental with WebGL. I help awesome people to build ambitious yet accessible web projects - the wilder, the better.
Super Turbo Logo Service™ (on SimpleBits)
I’m available for limited logo design projects. Just the logo. Limited back-and-forth. Reasonable price. With a particular focus on elevating small businesses that can’t or don’t want to hire a full-blown agency. Let’s keep this simple.
Joshua Hughes / Senior Product Designer
The lovely new portfolio website of my colleague, Josh, featuring some lovely articles and design touches.
Hero Patterns: Free repeatable SVG background patterns for your web projects
From Steve Schoger:
A collection of repeatable SVG background patterns for you to use on your web projects.
Jack McDade’s personal website
I’m Jack McDade and I’m tired of boring websites.
Bustle
Here’s a beautiful, magazine style website design for digital publication Bustle. The typography, use of whitespace, responsive layout, menu pattern, colour palette and imagery are all on point!
Cassie Evans’s Blog
I love Cassie Evans’s new website design! It’s so full of personality while loaded with technical goodies too. Amazing work!
(via @stugoo)
Block Links: A tricky UI Problem
You have a “card” component which includes a heading, some text, an image, and a link to the full article, and it’s working great. Then along comes a UX requirement that the full card (not just the button or link) should be clickable. This is where things get complicated.
The Guardian Digital Design Style Guide
This is a nice whistle-stop tour of the the Guardian’s current digital design system. Apart from looking great, some of the terminology is interesting (fronts, kickers and thrashers) and I like the way they have different Card types for different types of article, “each having its own flavour and tone”.
Katherine Kato’s personal website
Some simple but inspiring work here from Seattle-based web developer Katherine Kato. I really like the use of space, the typography, the colour palette and the use of CSS grid for layout.
My Sketch Cheatsheet
Here’s a list of useful (Mac-based) Sketch tips for my reference and yours.
Bram Stein’s personal website
Bram Stein, a software architect at Adobe, wrote the book on Webfonts, so it’s no surprise that his own website showcases some pretty beautiful typography.
W3C HTML Element Sampler
In all my years of spinning up “HTML Typographic Elements” lists or pages as a reference for designers, I didn’t realise that the W3C provide the very thing I needed in their HTML Element Sampler. These pages provide comprehensive dummy content covering all the main typographic elements which is really handy when designing a website’s typographic styles and pattern library.
Image Color
A handy tool for identifying colours – provided in numerous different CSS-ready formats – and creating a complimentary colour palette from an image you upload or provide as a URL.
TunnelBear – VPN Software for Bears
I was introduced to this smile-inducing website by Val Head’s An Event Apart Talk “Building more expressive projects”.
A Dao of Web Design (on A List Apart)
John Allsopp’s classic article in which he looks at the medium of web design through the prism of the Tao Te Ching, and encourages us to embrace the web’s inherent flexibility and fluidity.
It’s time to throw out the rituals of the printed page, and to engage the medium of the web and its own nature.
It’s choc-full of quotable lines, but here are a few of my favourites:
We must “accept the ebb and flow of things.”
Everything I’ve said so far could be summarized as: make pages which are adaptable.
…and…
The web’s greatest strength, I believe, is often seen as a limitation, as a defect. It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all. The journey begins by letting go of control, and becoming flexible.
See all tags.