Posts

Showing posts from 2015

Perfect your Calls to Action with the Right Words

Image
Words are hugely powerful. They are what mostly make up the Web. Without copy the Web would be nothing. Yet in many design projects words are seen as an afterthought when they should be the focus from the off. Jason Fired of 37 Signals fame says that "It was always you design this page and then you just pour the copy in later, and it never felt right to me." Instead, good content should be what we apply our design skills to. When you mix great copy and great design magical things can happen. Great design comes from great use of words. Calls to Action Every single site on the Web should have strong calls to action. In a e-commerce store the most likely call to action is "add that product into the shopping cart and subsequently buy it." Even sites with less apparent success metrics can use calls to action. It could be as simple as to read more content or sign up to a newsletter. Calls to action should happen on every page of the site. T...

The Easy Way to Future-proof your Web Design Skillset

Image
The last century has seen a tremendous shift in the value we place on artisans. Particularly in light of the mass market style production of products, craftsmanship is still sought after for its quality and distinct style. Today, web designers are amongst the list of professionals who are working with the constant threat of being automated and replaced. Luckily for us though, despite previous technological revolutions putting thousands or millions out of work... We have no reason to fear in the short term, if we can adapt. A Brief History of a Bootstrapped Education Our industry is unique in that most, if not the majority, of us have taught ourselves to some degree. Even today, there are shockingly few options in the traditional university setting that adequately teach students a solid foundation of web technologies. This isn't their fault though, with standards constantly evolving and new practices popping up faster than most university professors earn a paycheck, ...

How to use UI Design Patterns

Image
Design patterns are optimal solutions to common design problems. As common problems are tossed around a community and are resolved, common solutions often emerge. Eventually, the best of these rise above the din, self-identify, and become refined until they reach the status of a design pattern. I wouldn't call a design patern a trend in web design, design patterns seem to be more about looking at how common designs are classified in retrospect, rather than forging new territory or looking to where things are headed. How should you approach UI Design Patterns? We use design patterns all the time, if you're unfamiliar with them you probably haven't realized that they're all around you. What about the classic example of having too much content to display on one page? We turn our attention to 'Tabs', a design pattern that enables us to serve all the content we want, without making the user disappear in a sea of links. The typical benefits for...

Responsive Design is Failing Mobile UX

Image
It's no longer enough to simply make sure your web content fits on a small screen. Google reinforced this precedent by updating its algorithm to emphasize the importance of carefully planned and well-executed responsive designs on mobile phones. And it makes sense: Your viewers don't need all the functionality of a desktop on a mobile device. In fact, they may want to remove some content and functionality when they're on a smaller screen. After all, nobody wants to sort through pages of content just to find your company's phone number. That's the missing building block in a lot of companies' web design foundations: true adaptivity. Simply jamming your site into a version that fits on a mobile device is not enough. You need to take a close look at the complete user experience and how it should be changed to adapt to the different environments in which it's being viewed. The Problem with Responsive Design 57% of mobile device users won'...

6 Steps to Perfecting Minimalism in Web Design

Image
Over the past few years, web design has been rocked by various trends that have come and gone. One of the trends that has staying power, is minimalism, simply because it's a timeless concept that has been popular in various mediums throughout the ages. So why not in web design? One of the things about minimalism is that it also enhances the user experience, besides looking nice. A complaint of many a user over the years has been that some websites are just too complicated to navigate. There's just too much stuff going on there that makes the user experience less than what it should or could be. The old adage that "less is more" still rings true, especially when it comes to design in the 21st century. Embrace Flat Design We all know that flat design is essentially the design world's answer to skeuomorphism, which has fallen out of favor in a big way recently, with Apple being a prime example of this sea change. Flat design is notably characteriz...

How to Make Whitespace Work on the Web

Image
The term white space is sometimes used interchangeably with negative space, and the concept is the same. Though the term refers to "white" space in particular, the area in question does not have to be white at all. It's just the empty space around the elements of a webpage layout. Space like this can come in many different forms, such as the space in between images and graphics, gutters, margins, columns and even lines of type. While it seems to be made of "nothing"-only in that no other design element occupies the space-white space should not be treated in that manner. Treating it as "nothing" can lead to missed opportunities in designing something truly aesthetic and appealing. White space, done right, can actually provide a good amount of benefit to web design. Instead of reducing white space in web design, go against the grain and make sure to increase white space on a webpage. Some well-known and popular brands are already moving in th...

4 Ways to Create Richer Web Experiences

Image
The Web has evolved a lot from being a simple document repository, and we now have browsers capable of rich visual interactions on desktop as well as mobile. Because I'd like to talk about where the Web is headed in this article, many of the features I'll cover may have limited support, so it is important to use resources like caniuse.com which has a robust list of features and charts specifying where they are supported. Let's take a dive into the four ways you can enhance your site UX: CSS CSS is the styling language for our documents, we tend to think of this in simple terms like changing font size or color, but it is becoming increasingly powerful with features like transforms and animations. We're also getting new features to make it even more powerful. If you've used Vector Masks in tools like Photoshop, you should be familiar with the idea behind CSS Clip Paths. This feature allows you to define a shape in CSS that defines the transpare...