Holiday Treats
With the holidays just around the corner, it’s time to find some tasty pixel treats.
With the holidays just around the corner, it’s time to find some tasty pixel treats.
One aspect of web design that can take a website to the next level is icon design. A good website will incorporate icons in such a way that they both match the aesthetic of the rest of the site, yet stand out enough so that users know how to interact with them. There’s also a growing demand for high-detailed realistic icons for app icons and other web uses.
Here are some examples of all the different types are icons you can create for your website:
Minimalist, one-color icons
When coding and designing a website, it’s good practice – hell, it’s absolutely crucial – to have a grid system in place. By grid system, I of course mean a visual way to break up content in such a way that it is organized and easy for the reader to follow and understand. It guides the user through the website smoothly without the user even realizing it. Without grids, content can get sloppy and people can get lost and disoriented.
As useful as grids are in the web design world, it can sometimes be seen as a restriction: you have to work within the confines of these lines you’ve drawn but you don’t want it to seem obvious to your user. Many designers have found one way to break up the monotony that can be seen in the grid system by introducing illustrations. By combining the rigid restrictions of the digital world with the fluid and organic feel of illustrations, an enjoyable experience can be made.
Agency Websites

This site is riddled with illustrations. Every page has a different visual that tells a little story with the scientist and his rocketship. The characters, texture, and color feels a lot like a children’s book, but after viewing their portfolio, it’s clear they are capable of many different styles.
More and more HTML5 websites are popping up all over the web. And who can blame them? Things like parallax scrolling give a very modern and almost playful feel to what could be pretty straightforward content. It also has uses in story telling, forcing the visitor to scroll through the content in a linear fashion rather than the usual and seemingly random clicking around all over the page.
Check out these examples of great parallax scrolling. You might learn something too!
HD Live 2012 is a responsive site (play around with the browser size and you’ll see what I mean!) that uses subtle changes such as the moving hexagons in the background to keep the experience interesting. The colors and fonts are bold and attention-grabbing while the format is very straightforward. The stationary menu at the top makes navigation easy while the different background colors separate the sections into manageable sizes. I’m also a huge fan of faint textures and all the hexagons everywhere (an under-appreciated shape in the web design world).
If you’ve stumbled upon this blog hoping to find some inspiration, some design tips, and some shenanigans every now and then, you’ve come to the right place.
The idea for this blog came out of necessity: I already had a tumblr account to post projects and prints I was currently working on (found here! for the curious) and I wanted to take a stab at writing a blog featuring some of my favorite sites. The theme on my current tumblr doesn’t exactly lend itself to long blog entries, so Align Refine Design was born.
So stick around! I’ll be doing my best to update often. But not too often.
