Rapid Prototyping for Web Design: Basic Tips and Resources

by Jake Rocheleau
on June 8, 2014

in Web Design

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

If you’ve never heard about rapid prototyping it can be defined by the two individual terms. “Rapid” means a speedy action taking place over a short period of time, and a prototype is typically the first model of a project. This process requires fast iterations of design to implement features, test how they work, and fix what doesn’t work until you reach a comfortable solution.

featured image website wireframing prototype design

This article will go over some of the basics to rapid prototyping and how you can get started. I’ll be focusing specifically on website design, but keep in mind that you can rapidly prototype any interface including mobile apps or GUIs for software. I’ve also included some related posts and popular tools for prototyping.

Read More

33 Website Layouts using Creative Vector Icons

by Jake Rocheleau
on June 2, 2014

in Web Design

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

Vector design is the perfect way to jazz up a bland or simplistic layout. Nowadays designers can export SVG icons which naturally expand or animate for unique visual effects. Connecting a branded vector character into your company logo is a memorable way to capture attention. It certainly works for these websites!

Below you can find a number of excellent vector-based icons blended into typical website layouts. This is a solid collection of websites to understand how other designers create these effects. You might try designing your own Illustrator vectors for the web and see how they can improve overall visitor interactivity.

Metaverse Mod Squad

metaverse mod squad website open source layout

Read More

The Relationship Between Storytelling and Website Design

by Jake Rocheleau
on May 27, 2014

in Web Design

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

Storytelling is a medium we all find throughout day-to-day life. Sharing experiences from your trip to Cancún is a form of storytelling. In fact, much of life can be seen as the raw material for great storytelling. We like stories because they demonstrate ideas in new ways that we might have never thought about.

I feel that the rules of storytelling can be applied to digital interfaces and web design. The precepts of good storytelling are universal across all genres. You must understand how to capture interest and bring people along for the ride. Web design is more fluid because it’s not an archetypal story – but the general structure is the same. In this post I want to look at various similarities between good storytelling and good web design.

Read More

50 Free CSS-Only Icons for Website Graphics

by Jake Rocheleau
on May 22, 2014

in Graphic Design

Get the FlatPix UI Kit for only $7 - Learn More or Buy Now

Modern CSS trends have blown up so quickly that it can be difficult to keep up with all the new stuff. Online projects which most surprise me involve pure CSS designs for layouts, animations, and icons. There is still plenty of use for icon sprite sheets in the right context. But why not try out modern trends for the users who have upgraded from legacy browsers?

This gallery includes fifty examples of my favorite CSS-based icon designs. Some are animated while others are static interface pieces. These range from general purpose icon sets to character designs created purely within HTML/CSS code. The latter doesn’t have much practical use but it’s definitely a way of showing off your skillset.

Iconex Flat Icons

css iconex flat icons design open source

Read More
Page 3 of 4112345...Last »