We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.
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.
One of the issues we need to be concerned with in responsive design is how to maintain hierarchy as elements on the screen are resized and reflowed. Trent Walton first called attention to the issue with his post “Content Choreography,” which showed how visual hierarchy gets lost when columns are dropped below one another.
While techniques exist to help with part of the problem, the solution also requires conscious thought in how you structure blocks of content in your HTML. You need to think about how you’ll want to rearrange blocks of content as your design moves from single to multiple columns.
Like any overzealous teenager aspiring to be a Web designer back in 1999, I found myself in an “Electronic Design” class, behind the wheel of one of those old-school aqua iMacs. If you found yourself in a similar situation, chances are you were given Adobe Photoshop as your vehicle for designing the Web.
For me, it was version 6.0. No matter which version you had, undoubtedly you know someone who can “trump” you by having adopted an earlier version. We designers take much pride in this, in case you hadn’t noticed.
With a phone or tablet in your pocket, you get instant access to a huge variety of podcasts — both audio and video. They keep you entertained while you’re commuting or on a long plane ride, and they provide useful information that you can integrate into your daily routine as a Web professional.
Keeping track of the ever-changing selection and finding quality podcasts that feature exactly the topics you are interested in can be painful. That’s where we come in. We have put together an extensive list that includes your soon-to-be favorite podcast — whether you are a developer looking for coding advice, a designer seeking inspiration or a startup businessperson. So, tune in, stay informed and learn new skills!
This article again deals with terminology, probably more specifically than most designers are used to, and the title gets to the heart of what I’m communicating in this article. Everyone knows their serifs and sans, slabs and scripts, but most classifications go much deeper than that.
For most websites, navigation is not particularly challenging. A primary navigation bar, supported by sub-navigation, is often enough. Typically, sub-navigation displays the parent, siblings and children of the current page.
A persistent primary navigation bar shows top-level pages, allowing users to move between sections. However, there is one class of website for which this traditional form of navigation falls short. It is what I refer to as a "mega-site".
A record number of shoppers are turning to their smartphones to research potential purchases. Meanwhile, the bigger question — are those same users willing to complete the purchases on their mobile device? — is quickly being answered.
The US, for example, saw an 81% spike in mobile e-commerce (m-commerce) sales in 2012, comprising a $25 billion market. And it’s not just apps. By a landslide, users prefer mobile websites to apps for shopping.
Hundreds of tools may be available for interaction designers, but there is still no industry standard for interaction design the way Photoshop and Illustrator are to graphic design. Popular programs are out there, but many of them have considerable drawbacks, which has led me to explore alternative apps.
I eventually chose Adobe InDesign for much of my preliminary interaction design work. Yes, you read that correctly: InDesign, a desktop publishing app originally created for designing books and magazines, is currently my tool of choice for designing low- to medium-fidelity wireframes and interactive prototypes.
There are several tactics for deciding where to put breakpoints in a responsive design. There is the rusty idea that they should be based on common screen sizes, but this doesn’t scale well. There are no “common” screen sizes. Another popular tactic is to create a breakpoint wherever the layout breaks.
This sounds much better. But it still leaves us with the question, How do you determine whether the layout is broken? One logical answer is to look at classic readability theory and to define our breakpoints based on that.
Layout, for both print and screen, is one of the most important aspects of graphic design. Designs that extend across multiple pages or screens, whether containing large or small amounts of type, must be carefully controlled in a way that is enticing and is easy for all to access.
Careful control of visual hierarchy is a key aspect of the design decisions we have to consider. In this article, we will look at how frequently type needs to be broken down into different levels, such as topic, importance and tone of voice.