19 Approaches to Color

With over 9 billion indexed sites on the web and counting, sites are having to do more to get noticed and encourage users to spend time on them. Color is becoming more and more important in making your page stand out. Here are some sites that do just that: use interesting colors in unusual combinations to stand out from the billions of standard color schemed sites out there.

How to Create a Price Range Filter in Adobe Illustrator

In the following tutorial you will learn how to create a price range filter which would look great in a mobile phone app or website interface. Andrei Marius will be working in Adobe Illustrator with some basic tools to create an essential element for any designers portfolio.

UI Design Guidelines for Responsive Design
The web development community has come up with endless solutions, best practices, and tools for coding a responsive design with ease. While the vast majority of websites can be made responsive now, it’s time to push the envelope further. It’s easy to pay attention to great coding best practices, but sometimes the best design practices for various screen sizes get pushed aside. Many resources on responsive design cover the basics. With various screen sizes coming out each day, and even the big players like Apple switching things up with the new iPad mini, you need to evolve the way you think about design and the user experience as well.
How to Create a Set of Toggle Buttons in Adobe Illustrator

In the following tutorial you will learn how to create a set of toggle buttons in Adobe Illustrator. Andrei Marius will be using basic shapes and the Pathfinder panel to create this UI essential for anyone's tool kit. Further more, you won’t need the Pen Tool, so it’s easy to follow along for beginners!

Insert Off-Canvas Navigation For A Responsive Website

In this article, David Bushell will be walking through a build demo that centers on two topics. The first is responsive design patterns that embrace the viewport and that improve content discoverability beyond the basic hyperlink; in this case, off-canvas navigation. The second is the complexities of implementing such ideas in an accessible and highly performant manner. These are two topics that he believes are at the heart of the Web’s future.

Preparing Websites For The Unexpected

Designing websites for smartphones is easy compared to retrofitting those already in place. More than that, it’s embarrassing how, almost eight years after CSS gained practical acceptance, a lack of foresight haunts those of you who write HTML. Converting older websites to responsive design causes headaches not because small screens are difficult, but because most HTML documents were written under an assumption about screen size.

Design a Textured App Icon with Fireworks

App icons are often the first thing you see before making a purchase. In this tutorial James Parker is going to use Fireworks to create an app icon for a fictional basketball game. Because realistic textures can really enhance icons, he’ll show you a quick and simple way to replicate a brushed metal effect, along with some simple lighting techniques that will really make your icons stand out from the herd.

Forge Your Own Evil Sword of Evilness in Illustrator

One to rule them all… Wait, that’s not the story. But, of course, every Lord of Darkness needs some dark, evil weapon that will make their enemies cry in fear just looking at it. Today Monika Zagrobelna will create an Evil Sword of Evilness in Adobe Illustrator, perfect for the vector warrior! So, let’s forge one!

How Fluid Grids Work in Responsive Web Design

Responsive design is the process of arranging the layout in a way that all the important information is presented in a user readable way in any kind of device or screen size. Most designers will choose a grid based layout since it’s easier to handle grid based layouts in different kind of devices. It’s your decision to choose between a fixed or fluid grid to design the layout. Throughout this tutorial Rakhitha Nimesh is going to focus on fluid grids and their importance in responsive design.

Stop Chasing Screen Resolutions

Resolution is a funny thing to measure; it’s not a physical size change, but a clarity change. It’s not making images, brighter, or more rich in color, but making them denser. Of course, when designers get a taste of high-resolution displays, they’re hooked. And they all want their websites (and the websites of their clients) to look awesome on the devices that are sporting these displays. Many web designers are racing towards that goal by creating images for each new resolution that comes out.

Newer articles Older articles