How do you pick a color scheme for your design projects? Do you browse various color palettes? Perhaps you employ tried-and-true color wheels. Both are good ways to develop color schemes, but if you want to discover fresh new schemes you might want to give the following five new and cool color scheme tools a try.
You might be familiar with Josef Alber’s “Interaction of Color,” a must-read for all graphic designers published by Yale University Press. Now, meet the iPad app, which features Alber’s teachings alongside interactive plates and videos. The app lets you learn more about color theory and helps you pick the perfect color scheme with its palette tool, which behaves “like paper.”
If you’re into flat design – the modern web and mobile design trend – then you’ll love this free flat UI color tool, which lets you easily copy numerical RGB and hex values for the most popular colors used in the Flat UI Pro palette. The only way this application could be better is if it included suggestions for complementary colors based on the colors you’ve added to your palette.
A new kind of color scheme development tool that lets you build palettes in 3-D, ColorRotate is available on the web or as an interactive iPad app. Click and drag your way to a new custom color scheme, then tweak adjustments on the sliding scale. Or, browse some of the other color scheme creations crafted by users who came before you.
The ultimate color tool for Chrome, even if it’s still in beta. Colorzilla lets you get the color of any pixel on any page, generate CSS and CSS gradients, analyze any URL to generate a color palette, and, of course, pick colors to add to a saved palette. If you use Google Chrome, add the Colorzilla extension to your browser (it’s free) and start picking colors today.
A light yet incredibly useful color scheme application for Windows, ColorBug is essentially a color picker tool that lets you drag and drop colors to multiple palettes, then make adjustments to those palettes right in the application. You can select different color code formats, create instant CSS gradients, and even generate color swatches for popular design applications such as Adobe Swatch Exchange (.ase).
Have you tried any of these color scheme tools? Which is your favorite, and how did it stack up to your usual method of color palette selection? Let us know in the comments!
[Ed.: This is an updated version of a post that was published earlier on Web Teacher.]
Guest Author’s Bio: Brian Morris writes for the PsPrint Design & Printing Blog. PsPrint is an online commercial printing company. Follow PsPrint on Twitter @PsPrint and Facebook.
The Pew Research Center released a new survey on home broadband use in 2015 that has implications for web designers. The overall finding is that fewer people have home broadband, while more people rely on their smart phones for Internet access.
The changes are slight, but possibly significant. Home broadband adoption has plateaued. It now stands at 67% of Americans, down slightly from 70% in 2013.
The cost of broadband is a major problem cited by many of those surveyed.
24% of Americans do not have cable or satellite. 15% are former subscribers who ‘cut the cord.’ Young adults, in particular, expect to be able to use their smartphones to access almost anything they want, apply for jobs, follow the news, access government services and more.
The implications for web designers
websites should work well on mobile devices
websites should download quickly with a minimal hit on a users data plan
O’Reilly Media is offering an ebook called Design for Voice Interfaces: Building Products that Talk by Laura Klein. It’s only 30 pages long and worth reading. It gives a brief background, talks about current issues in designing VUI and concludes with a few helpful resources to get you started learning more about it.
You definitely can’t beat the price for this informative book. It’s free.
I feel like an old man. While preparing to write this article I can clearly recall a time when I used the Netscape browser to load my favorite search engine Alta Vista using my tortoise-speed dial-up internet connection back in 1998.
From this seventeen-year altitude I have seen a lot of web design trends come and go, with only the best becoming relatively standard.
However, like dog and cat years, the internet has an adjusted time too; I’m not sure exactly what it is but for every real year that passes, it seems like the internet experiences many years of trends, growth and development.
And along with the internet itself, its users have become much more sophisticated, both in how they use and perceive the internet and what they expect.
Today’s web designers have their work cut out for them.
Web design trends come and go like any other, but certain aspects can really take hold by the majority of website designers and builders. At the end of 2015 going into 2016 I can see a number of trends that are wildly popular now. Let’s take a look at five of the most prominent.
1. Simplicity
Web designers and companies are becoming more refined in their understanding of how people interact with websites. They are starting to realize a useful concept called the paradox of choice. American psychologist Barry Schwartz penned a book called The Paradox of Choice – Why More Is Less in 2004 where he explains that eliminating consumer choices is a good thing that can reduce shopper anxiety.
This extends to websites where the more choices a site visitor is given the less likely they are to choose anything and maybe they just leave.
So simplicity is what designers are shooting for now. Web users scan content and simplicity facilitates scanning. Apps are leading the way in this and websites are following. Apps are minimal, fast and intuitive. This is because they perform better with consumers, so websites are now emulating this trend.
Pros: Companies can benefit by offering less choices on a page or site because it allows them to funnel site visitors exactly the way they want in order to maximize the chances of them taking a desired action (signing up for something or purchasing). For example, if they only choice a visitor has is to buy, they are more likely to buy.
Cons: If a desired action is not possible on a site, the site risks losing a certain percentage of visitors simply because the choice they are looking for doesn’t exist. And what happens if a company’s site is designed around flawed assumptions? The site’s sparse design elements may be missing the mark completely.
2. Flat Design
Flat design is a style defined by a lack of glossy or three-dimensional visual effects. Three-dimensional effects, skeuomorphism and realism are the opposites of flat design and used to be very popular.
Now flat design is taking over. 3D effects like raised buttons or sunken form fields, Skeuomorphism which is unnecessary, ornamental design features that copy the real world like navigation tabs, and realism which is similar to skeuomorphism but exists only for aesthetic purposes are all being replaced by simple, flat design.
Pros: Flat design helps in making a site appear simple and easy to digest. And as discussed above, simplicity can be advantageous.
Cons: Flat design can sacrifice usability in the name of aesthetics. Although the web is still in its early years, there are already standards. For example, the blue underlined word or phrase signifies that it is a link. This is a standard and most web users know this intuitively now. Flat design can cause users to get confused or discouraged because of a lack of standards.
3. Fewer Stock Photos, More Illustrations
Another emerging trend that will continue through 2016 and beyond is the use of illustrations over stock photos.
Pros: Illustrations are easily scalable for responsive design. An illustration will look the exact same on a smart phone as it will on a large computer monitor. They also load faster than photos. And with illustrations, you can create any image; you are not limited to existing stock photos.
Cons: Photos are much better at invoking emotions, the goal of every marketer. Photos can feel a lot more personal. And photos can help in establishing credibility (think C-level head shots and corporate building photos), another priority of marketers
4. Hero Images
This one is everywhere now. A hero image – a term from the printing industry – is a huge, full-width image that is immediately apparent upon loading a page.
Pros: Hero images offer the web designer the ability to really evoke emotion as soon as a user sees their page. And because of its size, it can also communicate a large amount of information quickly. They can make a web page beautiful, stunning and memorable.
Cons: Large images like hero images can make pages load more slowly, which is a big turn off for users and search engines alike. Hero images sometimes can be overwhelming and too in-your-face. Large images can make a page feel cluttered or confusing. And I often see typography that is lost because it is overlaying a hero image, another thing designers need to avoid.
5. Scrolling Over Clicking
Again, apps are leading the way in this. Any smart phone user knows it is a lot easier to scroll than it is to click. Website design is really beginning to mimic this. You now often see web pages that fill up the whole screen and expect that you scroll down to see the rest of the content.
Pros: Scrolling is better for usability because it speeds up the ability to scan pages and is much easier to do than clicking when using tiny screens like smart phones. And scrolling avoids breaking the user’s reading flow.
Cons: A certain percentage of users will not even realize scrolling is an option on a page and therefore miss most of a page’s content. This has happened to me where I load a page, and see a big white space above the fold and not realize that I need to scroll down to see the actual content.
Of course there are other popular trends today too, but the five discussed above seem to be everywhere now. As web designers, we need to remain aware of all our options when designing and we must be discerning when it comes to following today’s design soup-de-jour. And above all, regardless of the trends we emulate, the site visitor’s wants and needs must be our primary guiding force.
Jason OConnor is a web designer and marketer who owns and operates OakWebWorks.com, a full service Internet firm that helps clients from all over the world.
Two excellent videos from Akamai Technologies are available explaining how to code for responsive images. The first is written by Mat Marquis, the second by Yoav Weiss.
Both films go quickly and bear watching more than once.
The first 50 people to sign up for the Web Design from the Ground Up course at Udemy using the special code webteacher.ws will receive access to the class absolutely free. This is a class for beginners. Here’s what you’ll learn:
Over 38 lectures and 9.5 hours of content
Introduction to HTML and XHTML including the most commonly used elements like linking
Introduction to CSS (Cascading Style Sheets) for working with fonts, colors, and complete layout control
Web Graphics and Image manipulation with an introduction to Photoshop
Introduction to JavaScript with practical applications including script tags, alert boxes, form validation, and much more
Domain name registration – how it works, pointing your domain to your site, best practices and much more
How to put your site on the Internet, including choosing a web host, working with FTP, and much more
Accessibility – make your site visible to all users
Ecommerce with PayPal – setting up a shopping cart, integrating PayPal, making money with your site!
That’s a lot for 10 hours, so I’m guessing it will be basic info, but that’s what a beginner needs, isn’t it?
Many thanks to Udemy for making this special offer available to Web Teacher readers.