Love it or hate it the trendy flat style of web design is here to stay. If you’re looking to implement the flat style into your own designs, here’s a few resources to get you started. In this post I’ve rounded up all the best flat UI kits and icon packs to arm you with a range of quality tools for creating pixel perfect app and web interfaces.
design
Showcase of Beautiful iPhone App UI Concept Designs
There are so many great looking apps in the works it’s difficult to keep track of the amazing concepts designers are constructing. This post showcases over 30+ inspiring iPhone app UI designs, all of which boast great interface designs for interesting apps currently in the works. There are a few similarities that could be an indication of what the next big trend will be.
How To Create a Trendy Flat Style Nav Menu in CSS
I’ve heard from a bunch of people who found my CSS drop down menu tutorial really useful, so today’s we’re going to build another menu with some fancy hover effects. With the Flat design trend being so popular we’ll use adopt this style for today’s menu by using bright solid colours and clean icons. We’ll be using various must-know CSS techniques so this is a great tutorial for any web designers learning the basics.
30 Websites Featuring a Horizontal Stripe Layout
One layout trend I’m sure we’ve all noticed recently is the use of full screen horizontal stripes. These horizontal sections are often identified with differing background colours or photos and span the whole screen to create a striping effect as the user scrolls down the page. This post showcases 30 great examples of websites utilizing these horizontal stripes and shows how this layout helps split up the page into clear sections while making use of all the available screen space across all resolutions.
10 Free Mockup Backgrounds to Present Your Work
Uploading samples of your work to sites such as Behance or Dribbble is a great way of getting noticed, so it’s worth spending a couple of minutes adding some polish to your images so they stand out and catch the attention of viewers. This free pack of abstract backgrounds will help you enhance your designs by mocking them up on abstract backgrounds. The vibrant colours and subtle textures help complement your pieces and turn them into stunning pieces of eye candy.
Are you looking for more backgrounds freebies? Check out these free Vector Backgrounds! They will surely help you create awesome, creative websites with vector-patterned backgrounds.
Or maybe you are looking for some inspiration on how to use these backgrounds in web design? Check out these Pattern Backgrounds, Web Designs with Subtle Grain Texture Backgrounds, and Web Designs with Bright Flat Color Backgrounds. Hope these hand-picked website designs will inspire you and teach you new ways on how you can use backgrounds in web design.
How To Create a Simple Collapsing Header Effect
A couple of weeks ago I posted a showcase of web designs with clever header effects. In that roundup we saw a bunch of sites making use of a simple collapsing header effect, where the page header or banner would gradually shorten and disappear upon page scroll. Let’s take a look at recreating this cool effect for use in your own website designs.
Handy Tips For Creating a Cool Twitter Profile Design
Twitter profiles have gone through some big changes over the years, with the latest layouts offering a fair few customisation options. In this post we’ll take a look at some of the options that are available to us and see what kind of clever tricks people are using to create really cool profile designs.
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.