I’m a big fan of the vintage style, both in web design and design in general. Like many, my favourite aspect of vintage design is the elegance of classic typography with its mix of cursive & sans-serif typefaces, clever layouts and the combination of textures and illustrations to relate to the techniques used throughout the early 20th century. This post rounds up a collection of 30 websites all based on the vintage theme and feature great examples of authentic vintage style typography in their logos and titles.
Year: 2012
Which Responsive Frameworks are Designers Using?
All the mathematics involved in creating a responsive website design can be exhausting and time consuming, but thankfully there’s a range of responsive frameworks available that make the process quick and easy. These frameworks or boilerplates have all the complicated grids, layouts and media queries in place ready for you to add your own design and markup. Here’s a roundup of the most popular frameworks currently being used by designers.
How to Create Retina Graphics for your Web Designs
The more products Apple releases, the more widespread Retina displays become. So far we have Retina capable iPhones, iPods, iPads and MacBooks of various sizes, which together make up a pretty substantial audience. Let’s take a look at how you can create special retina graphics for your website so your design looks crisp, sharp and clear on those powerful screens.
Create a TV Screen 404 Page with Clever CSS Tricks
I’m currently working through a redesign of my SpoonGraphics blog and wanted to create something fancy for its 404 page. I decided to have a go at coding up a full screen retro TV screen filled with animated static noise, upon which I could display the usual 404 text and relevant links. Follow the step by step design process of the final 404 page and learn how a bunch of clever little CSS tricks helped transform the idea into reality.
Create a Trendy Retro Photo Effect Purely with CSS
I’ve done plenty of retro photo effect tutorials in the past, but they’ve all been done using Photoshop. After playing around with some cool new CSS3 features I managed to create a pretty decent looking retro style image effect using just CSS. With the help of CSS gradients and filters, let’s take a look at how a cool vintage photo effect can be created directly in the browser.
Create a Cool Website with Fancy Scrolling Effects
I’m sure we’re all familiar with the popular parallax effect in web design. It has become a great tool to create a fun browsing experience that responds to the user’s controls as they scroll up and down the page. In this tutorial we’ll use a couple of readily available jQuery plugins to quickly put together a cool little single page website of our own, complete with fancy scrolling effects.
Create a Custom WordPress Login Without Plugins
WordPress Logins are probably one of the least touched–upon subjects as far as WordPress theme design is concerned, but it can really help create a unique look and feel for a client’s website, or even your own! Here’s how to easily make a login of your own without the need of a plugin.
Top Places to Find Free Photoshop UI Kits Online
Ready made Photoshop UI kits are useful resources for web designers to quickly put together website or application interface designs with buttons, menus and input fields. There’s plenty of high quality free UI kits available across the web, but it’s sometimes difficult to know where to look. This post rounds up the best websites to find great quality UI sets, with a selection of samples from each.
How To Create a Pure CSS Dropdown Menu
With the help of some advanced selectors, a dropdown menu can be easily created with CSS. Throw in some fancy CSS3 properties and you can create a design that was once only achievable with background images and Javascript. Follow this tutorial to see the step-by-step process of building your own pure CSS dropdown menu.
30 Free Icon Packs from the Dribbble Community
Dribbble is not only a great website to find insights into what fellow designers are working on, it’s also home to an array of freebies available for download from generous Dribbble users. This post rounds up 30 high-quality icon sets that can be downloaded and used in your own projects for free.
