This category features articles on general design principles, Web design, typography, user interface design and related topics. It also presents design showcases and practical pieces on the business side of design. Curated by Alma Hoffmann.
In the physical world, no one builds anything without detailed blueprints, because people’s lives are on the line. In the digital world, the stakes just aren’t as high. It’s called “software” for a reason: because when it hits you in the face, it doesn’t hurt as much. No one is going to die if your website goes live with the header’s left margin 4 pixels out of alignment with the image below it.
But, while the users’ lives might not be on the line, design blueprints (also called design specifications, or specs) could mean the difference between a correctly implemented design that improves the user experience and satisfies customers and a confusing and inconsistent design that corrupts the user experience and displeases customers.
Apple launched the Macintosh personal computer in 1984. It was more user-friendly than other PCs at that time — and, with its desktop publishing software, graphical user interface and mouse (all novel at the time), the Mac was uniquely geared to designers. Compared to what we can create on the computer today, the original Macintosh, with only 128 KB of memory, had limited capabilities. At the time, though, it opened up so many new possibilities.
Of course, using a computer didn’t automatically make designers better at their craft. Instead, the new technology gave them more control and sped up their exploration process. As with anything unfamiliar, the Mac sparked debate among designers during this time: While some saw the computer as simply another tool for creating work, like a drawing pen, others saw its potential as a medium in itself.
As we refine our methods of responsive web design, we’ve increasingly focused on measure (another word for “line length”) and its relationship to how people read.
The popularization of the “ideal measure” has led to advice such as “Increase font size for large screens and reduce font size for small screens.” While a good measure does improve the reading experience, it’s only one rule for good typography. Another rule is to maintain a comfortable font size.
Similarity and contrast, connection and separation, grouped and ungrouped are all ways to describe the varying sameness and difference between elements. Based on the information they carry, we’ll want some elements to look similar, to indicate that they are related in some way. We’ll also want to show that some elements are different and belong to different groups.
Key to showing both is the visual characteristics of elements and their relationships. If two elements are related in some way, then they should show similar visual characteristics. If the elements are different, then they should look different.
To badge or not to badge? That is the question. Because badges — and a lot of stuff designed for conferences — often look the same. But if you have a little, different conference, you need different kinds of things. Badges included.
It all started in 2013 with the first Kerning conference. I was asked to design the official notebook: we ended up with a really typographic design for the cover and a funny pattern on the back. And an Easter egg on the cover — more on that later. It was a really funny project, so when my dear friend Cristiano Rastelli, a member of Kerning’s organizing committee, asked me to design the notebook and some printed materials for Kerning 2014 I immediately said “Yes, let’s start!”
Many modern software development best practices draw on influences from the industrial era and concepts like specialization, where individuals with specialized skills worked in an assembly line to mass-produce physical products. These practices from the world of manufacturing have come to influence how things are done when designing and building software products as well.
Lean thinking is one of the latest approaches software development companies have adopted to maximize value and reduce wasted effort and resources. It does so by breaking down an objective into a series of experiments. Each experiment starts with a hypothesis that is tested and validated. The output of each experiment informs the future direction. This is similar to the idea of “sprints” in the agile world, where the overall product roadmap is divided into smaller and meaningful bodies of work.
Many companies and design agencies tend to look at the design and creativity stage from a narrow perspective. Usually, the design team is locked inside the ideas room with no contact with the rest of the world until it delivers the idea that gets approved by the client or project manager.
Once a project goes into crisis mode and stress increases, creativity is given an even more limited role in the project. This can be a result of the high cost of developing creative concepts or a lack of confidence that creative people are able to handle pressure and provide help at this critical stage of the project.
This article is the first part of a series of articles on emerging responsive design tools. Today, Richard Knight explores the advantages of Webflow and how you can use it today to build responsive websites — perhaps a bit faster than you would build them otherwise. – Ed.
New tools have emerged to address the challenges of responsive web design — tools such as Adobe Reflow and the recently released Macaw. Today, we’ll look at one that I have tested extensively in the last few months. Though not perfect, it’s been a leap forward in productivity for the team that I work with. Its name is Webflow, and it could be the solution to the problems you face with static design comps produced in Photoshop and Fireworks.
This article will take you step by step through the process of creating a responsive website layout for a real project. As we go along, we’ll also identify Webflow’s advantages and where it comes up short.
Subscribe to our email newsletter for useful tips and valuable resources, sent out every second Tuesday.
Meet Smashing Book #5, our new book on real-life responsive design. With front-end techniques and patterns from actual projects, it's a playbook to master all the tricky facets and hurdles of responsive design. Save 25% today.
Fixing RWD issues can be quite easy — once you understand exactly why they come up. The Mobile Web Handbook will help you understand technical issues on mobile and how to deal with them effectively.
Hungry for more content? Over 60 eBooks are waiting to be discovered in our lovely Smashing Library. And guess what? You can watch Smashing Conference talks there, too.
SmashingConf isn't the eighth wonder of the world, but we are pretty close. Join us at at the shores of Santa Monica for SmashingConf LA on April 27–30 or at SmashingConf NYC on June 15–18. You won't be disappointed.