Pinterest started offering Video pins to its users since August 2011, but the nature of video pinning has greatly changed since then. In April, 2012, Pinterest got into collaboration with Vimeo as...
[[ This is a content summary only. Visit my website for full links, other content, and more! ]]
Is there a sequence to apply design principles when creating a composition? That’s the question Mita asked in a comment on a recent post. With so many things to consider, should we apply certain principles before others?
While some principles are more important than others and are likely to be thought about first, I don’t think you apply design principles in sequence. The principles of design are about how to communicate ideas and concepts graphically. Understanding them leads to better design decisions.
While this post will focus on design, please note much of what’s here could be applied to many other aspects of life. As a general rule I think understanding more about any subject is valuable in helping you make better decisions.
Making Design Decisions
The design of anything involves making a lot of decisions. You have to decide what the thing will do and how it will do it. You have to decide what features to include and more importantly, what not to include. From the moment you begin to design to the moment you stop, you’re making decisions.
Some decisions are easy to make. There’s a clear best among the possible options. However, the more options there are and the less difference between one option and the next, the harder it becomes to decide.
Design principles show you how to communicate the ideas you want to share visually
When designing a site you have to decide what typeface to use, how large should the font be, how wide should a measure of text should be, how much space should exist between each line of text, and on and on. Even with just these few things there’s an endless number of combinations you could choose.
How about color? Why choose one specific color from all the millions of possible hues, shades, and values? Having made the choice once, what colors should you then choose to go with the first? Without any context to provide a reason for choosing you can become overwhelmed quickly. Without a reason you’ll probably fall back on choosing from among your personal favorite colors just so you have some kind of reason to narrow the options.
Design principles serve as a better context to help you decide. They offer guidelines based on decades and centuries of experience to help narrow down a limitless number of options to a few you can more reasonably choose from.
The principles don’t make the decisions for you, but they offer a rational context to constrain options and help you decide.
Unity and Design Choices
If there is a design principle that comes first, perhaps it’s unity, which tells us that every part of a design should work together toward the same purpose. Each then reinforces the others so the whole becomes more than the sum of all the parts. Unity provides the missing context.
You first make some decisions based not on specific design principles, but on the goals of the design and what you’re trying to communicate. You form a concept in unity with site goals and use that concept to lead you down a general path of design decisions reducing an infinite amount of options to a manageable few.
If your concepts calls for being conservative it suggests a more neutral color palette than a varied and colorful palette. Your conservative concept immediately reduces all possible color choices to a more manageable amount.
A second kind of unity, visual unity, works in a similar way though it stems more from design principles. It suggests your second color be chosen from those that work well with your first. It tells you font-size, leading, and measure should all inform each other and be informed by the choice of a typeface.
If you follow both conceptual and visual unity, each decision you make further constrains all the decisions that follow, making it easier to choose.
Decisions at the end should be easier to make than decisions at the start since there should be fewer possible options from which to choose. If you find later decisions difficult to make and you’re fighting against the initial choices you made, either you’ve made a poor decision early or you’re hanging on to something despite what unity is telling you.
Design Principles Show You How
The initial decisions in a design are mostly informed by things external to the design itself. These early decisions are less about visual principles and more about site and business goals. Design principles will come in after you’ve chosen a concept. They guide you in how to communicate that concept.
For example say one of the things you’re trying to communicate in a design is a concept of openness. Further, say in one section of the design you want to show that certain bits of information are related and distinct from other bits of information. You decide to group these related bits together.
How might you go about connecting and separating the information? You could:
Enclose each group of information by drawing a border around it
Provide more space between the different groups than between the information inside each group
Any of the above and more can be used to show some information on the page belongs together and that the group of information is distinct from another group. So which should you choose?
In this example I said the concept called for openness. Of the 4 choices above, space conveys openness better than the other options so it’s the option I would likely choose. Proximity is the principle that shows space can be used this way. Understanding the principle allows you to reference it when making a choice. Had you not been aware of proximity your choice in how to connect and separate information would have come from a less open solution.
The principle didn’t help determine that openness was a goal and it didn’t help decide which information should be grouped together, but having made those choices, the principle helped show how to visually communicate them.
Summary
You’re going to make a lot of choices when designing a site. The early and more important decisions will be informed by the goals of the project and the definition of the design problem. They’ll also be informed by your own experiences and observations. You’ll be looking outside the design to constrain options to a manageable amount.
There isn’t a single right choice with these early decisions. There will be several workable solutions and part of why you’ve been hired is to try to find the best of these workable solutions.
Once a few initial decisions are made, the principle of unity provides a roadmap to decisions that come after. Each unified decision then further constrains the options for subsequent decisions.
Most design principles offer the how. They show you how you can visually communicate the ideas you want to share with an audience. Much as we can choose different words and different ways to form sentences, we can choose among different elements and principles to communicate visually.
A larger vocabulary and understanding of grammar can help you communicate better through writing. A greater understanding of design elements and principles can help you communicate better visually.
You may get confused with the term social media buyers because it is a relatively new term in online business. Currently, e-commerce business organizations are majorly engrossed in increasing the...
[[ This is a content summary only. Visit my website for full links, other content, and more! ]]
One principle of object oriented design that I’ve been wanting to talk about is the single responsibility principle. It’s not an isolated principle, but rather one of five principles grouped under the acronym SOLID. Together these principles aim to help developers create systems that are maintainable and extendable.
Let’s continue what we started last week and again look to object oriented concepts to see if and how we might apply them to the design of websites. In this post we’ll take a look at the first two SOLID principles and next week we’ll continue with the remaining three principles.
Once again allow me to remind you I’m hardly an object oriented programmer and I’m bound to get a few things wrong in this discussion. Fortunately for me others have previously covered this topic in a similar fashion and I’ll be leaning heavily on their work.
SRP calls for more classes with less code inside each.
Trying to do multiple things usually leads to doing none of them as well as possible. It also means that modifying one part of the code could have adverse affects on unrelated parts of the same code.
This idea has been central to the entire discussion of modular design we’ve been having the last few weeks. You break things down to their smallest chunks in order to improve them independently of other chunks and to be able to combine them more flexibility.
Harry Roberts, one of the people I’m heavily leaning on here, offered a good example of a class most of us have probably used that follows SRP. Have you ever done something like the following to fix and center a web page?
1 2 3 4
.wrapper { max-width: 75em; margin: 0 auto }
The code above follows SRP, because it only does one thing. It’s not also setting backgrounds and borders or anything else. The purpose of the class is simply to group everything inside it. Here all it’s doing is centering that group of elements.
Unfortunately most of us don’t carry out this principle throughout the rest of our css. I know I don’t. Here’s a bit of css from this site for styling blockquotes.
The code is doing 3 different things (and not just because there are 3 lines of css). The first line is affecting the box model, the second affects color, and the third deals with type. Each would be better in a separate class according to SRP, since they all have different responsibilities. The following would adhere to SRP since both lines affect color and share a single responsibility.
Following the single responsibility principle should help us separate structure from skin and help us decide what to abstract from a given visual pattern. Colors would go in one abstraction, dimensions, in another., and type in yet another. Instead of placing every property for particular class or element selector, we should divide our css into groups of properties that affect different things.
As defined by SRP, responsibility means a reason to change. Looking at the list above if we only include properties that affect type in one class then the only reason that class needs to change is because we’re making typographic changes. We wouldn’t need to change the class because our color scheme is changing.
If there’s a downside it’s that SRP will lead to an increase in how many classes we add to our html. If I were to separate responsibilities in the css on the blockquote I showed above, I’d be adding 3 different classes to style them. Of course, those classes wouldn’t be specific to the quote and could be used across the site.
Overall SRP calls for more classes with less code inside each. Ideally that will lead to more cohesive, reusable, and independent classes. Taken further it could lead you to write separate stylesheets, one for each responsibility.
Have you ever had to modify a site you didn’t develop or maybe one you developed long ago? You make a change in the css you think will be simple only to find the site completely broken after the change? That’s an example of this principle not being followed.
Say you define a font-family on the body in your css. Later you decide that headings in the sidebar should use a different typeface. You wouldn’t want to change the font set on the body, because it would affect a lot more than the sidebar headings.
We naturally avoid doing that by adding a class or using some kind of descendent selector to target only the specific headings we want to change.
While it’s fine to fix errors in the base class or improve performance, you should only modify the class with new features by extending it with another class. The use of subclasses and chained classes would work well to follow this principle.
Ideally we’ll make good decisions about the abstractions we set up as base classes, but once chosen we should stick with them. Changing them requires changing all that depends on them. This is an argument against styling the most generic selectors. The more generic, the more they’ll html they potentially affect down the road. A change in css we add to the body affects everything across a design.
Summary
As I mentioned last week please don’t take anything here as me suggesting css or html are object oriented languages. Also accept my apologies if I misinterpreted the principles above or applied them to css in a way that makes little sense. These posts are learning experiences for me.
I’m sold on the idea of writing more modular html and css and trying to better understand how to do that. Object oriented programming would seem to offer some help and so I’m giving it a look.
We’ll consider the other three SOLID principles in more detail next week. What I take away from the single responsibility principle is a recurring theme through all this modular design talk. More chunks or classes that are smaller and more specific.
What I take away from the open/close principle is that once set up much will depend on your base abstractions, which for us are css classes. Avoid changing those classes on existing sites, since changes could affect more than you think. Instead you’d do better to extend base classes through things like subclasses or chained classes.
Overall you should be thinking classes over descendent selectors and keep your classes focused on a single category of property instead of mixing different types of properties on a single selector.
Whenever I hear someone say that responsive design isn’t always appropriate I wonder if they truly understand the reasons for designing responsively or how to actually go about creating a responsive site.
Give all 3 posts a quick read if you haven’t seen them yet. My favorite, of course, would be Elliot’s since I agree completely with what he said, though do read the other 2 as well to understand the arguments against RWD.
Countering the Argument Against
Hiroki offered 3 points for why GoCardless decided not to go responsive.
They claim only 2% of traffic was visiting the site using a mobile device
They claim a responsive design would take twice as long to implement
They claim they didn’t have the resources to create 2 different designs
Let me counter each.
Perhaps only 2% of site traffic was from mobile, because the site didn’t offer a good experience on mobile devices. After redesigning this site to be responsive, mobile traffic increased more than 300%
Once you accept the change in mindset, which I can understand isn’t the easiest thing to do, a responsive site takes a similar amount of time to design and develop as a static site.
Designing responsively doesn’t mean you create different designs for different devices. It means you create a single design that works well for multiple devices under multiple conditions.
Elliot’s post offers more details against each of the arguments and once again I encourage you to read it.
Andy’s follow up makes a different argument. He suggests that an information heavy site could provide a better experience by presenting all of that information on the screen and having visitors zoom in and out to find the content they want.
Unless you plan to build a dedicated site for every device and circumstance, at least one of your designs should be responsive.
I can’t speak for others (though a number of comments on Andy’s post will agree with me), but I’m more likely to leave than pinch and zoom or double tap to read your content. Zooming is a better experience than what we had before, but it’s generally not a good experience. At least for me and some of the people commenting on Andy’s post.
While I don’t have universal stats to support the above, I will again offer my own stats that showed mobile traffic went up 300% after a responsive redesign.
The time this traffic has spent on the site has also increased considerably. People using tablets spend about 20% more time on the site. Not a huge increase, though at tablets sizes there’s not as much pinching and zooming needed. On smartphones where there is a big difference, time on site is up 520%.
Responsive Design is the New Baseline
The points above aren’t really why I’m writing this post though. The main argument I see against responsive design is that sometimes a dedicated mobile version of the site is appropriate. I agree. Sometimes it absolutely makes sense to create a mobile version of a site.
When did the two become mutually exclusive, though? A responsive deign doesn’t mean a design that works on a desktop and on mobile devices. A responsive design should certainly work on both, but that’s not the definition of responsive. You can create a dedicated mobile version of a site and still have a responsive site.
Responsive design is the new baseline. Why is this so difficult to understand?
Unless you plan to build a dedicated site for every possible device and circumstance, at least one of your designs should be responsive. For most sites that one responsive design will be enough. For some a dedicated site for a particular device will make sense.
The reality is there are already more devices being used than you’re ever going to design for and more are coming. There’s zero chance you can predict all the devices that will be created between now and the end of life of your design.
Off the top of my head here are some different categories of devices that someone might use to visit your site.
Tablets
Smartphones
Laptop computers
Desktop computers
Game consoles
Televisions
eReaders
Vehicles
Appliances
The last one might be a stretch, but is it really hard to imagine people surfing the web on a screen built into the door of their fridge? I didn’t even include wearable devices like Google Glass and the rumored iWatch. The reality is you have no idea what devices and under what circumstances people are going to be visiting.
Depending on your site, it could make sense to design something dedicated for a particular site. When refrigerators are all built with an internet connected screen, I’d probably create a version of my recipe site tailored to one, but are you really going to tell me that you plan on designing a dedicated version of your site for every conceivable device that might access it?
For all the devices for which you don’t build a dedicated site (which will be most of them) you have responsive design. It’s your new foundation. It’s the baseline, a catchall design for all the devices and configurations you don’t specifically design for. Once your responsive design is in place, by all means create a dedicated site if appropriate for smartphones or tablets or whatever, but don’t assume it means you shouldn’t have a responsive design in place too.
Think progressive enhancement. Your responsive design is the new minimum. Make sure you have something in place that works across as many devices and conditions as possible. Then build dedicated sites on top of that minimum wherever you think it makes sense.
Summary
Please stop saying a responsive design may not be appropriate. In a world with an ever growing number of internet connected devices it’s always appropriate.
There are times when building a dedicated version of a site for a phone or tablet or game console makes sense. However, it’s not an either/or choice between responsive and mobile. It’s responsive + whatever dedicated design you think appropriate for your site.
Responsive design is the new baseline. It’s the new foundation for building a site and it serves as a catchall for everything you don’t specifically design for, which will include far more devices than you will design for.
Many sites will never need more than this baseline. Those that do will create device specific designs to enhance the responsive one, not replace it.
As if I don’t write enough here, I’ve been writing recently for some other sites you may know and thought I’d share a few articles if you haven’t come across them on your own.
Responsive Navigation
First here’s a series of tutorials on responsive navigation patterns I wrote for the Tuts+ sites. The first three are Tuts+ premium tutorials so you’ll need to be a member there to read the complete tutorial. They do let you read a generous amount even if you aren’t a member.
The last (the off canvas patterns) appears on Webdesign Tuts+ so you can read the entire tutorial, see the demo, and grab the code.
It starts with a single column, moves to a two column layout, and ends up as a three column layout. While it does, it plays around with some flexbox properties so you can see how easy it is to move columns around with a line or two of code.
The demos are actually here on the site. For the article I broke things up in seven different demo files, but you only need two of them to get most of what the others cover. I’ll toss in one more that’s a slight variation.
If you resize your browser on demo 3, you’ll see what parts 1 and 2 include. Similarly if you resize demo 6, you’ll see what parts 4 and 5 are about. Part 7 is a slight variation of demo 6 to illustrate a couple more things. If you’d really like to see the other demos check the URLs on any of these and I’m sure you’ll crack my ingenious code to find the others.
You will need to view the flexbox demos in either Chrome or Opera as those are the only browsers that support the latest spec at the moment. Firefox will support it after another update or two with version 20. If you’d to mix the newest spec with an older spec you can make the demos work on most browsers
I have some articles in the works for Smashing Magazine. I’m guessing most of you will see them when they’re published, but assuming I remember I’ll link to a few of them here once enough are published.
Samsung is not waiting for any introduction to make its presence and dominance felt in the market. Whether it's the smartphone division (Galaxy flagship) or the Interface division (Android Smart),...
[[ This is a content summary only. Visit my website for full links, other content, and more! ]]
The field of IT is growing day by day and this is due to continuous changes in the websites. These changes are expected after every millisecond and web developers have to adopt these new changes in...
[[ This is a content summary only. Visit my website for full links, other content, and more! ]]
