Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

February 21 2014

09:38

September 23 2013

11:40

25 Inspiring Single Page Parallax Scrolling Sites


Yes, sometimes single page parallax scrolling sites do need a powerful machine and a fast connection to keep up with the motion, meaning that at times you will have to wait for the page to either finish loading or for the page to catch up with as you scroll. But when they do work, there is something captivating and engaging about being gently guided through the ever-changing screen, leaving the user eager to discover and learn more.

There really is no better medium for guiding you through a story than the parallax effect. Check out these inspiring examples:

Beatbox Academy

Beatbox Academy animated css parallax scrolling

Discover Shadow

Discover Shadow mobile app animated css parallax scrolling

This is Now

This is Now animated css parallax scrolling

Sam Markiewicz

Sam Markiewicz personal animated css parallax scrolling

Erős Balázs

Erős Balázs personal animated css parallax scrolling

Le Tour de France

Le Tour de France animated css parallax scrolling

Cyclemon

Cyclemon animated css parallax scrolling

Pi's Epic Journey

Pi's Epic Journey movie animated css parallax scrolling

Scroll For Your Health

Scroll For Your Health animated css parallax scrolling

TCM Summer Under the Stars

TCM Summer Under the Stars movie animated css parallax scrolling

numéro10

numéro10 animated css parallax scrolling

TEDxGUC

TEDxGUC animated css parallax scrolling

NASA: Prospect

NASA: Prospect animated css parallax scrolling

aBenção – Malhas e Tricots Criativos

aBenção - Malhas e Tricots Criativos animated css parallax scrolling

WAAAC

WAAAC animated css parallax scrolling

Lord and Taylor First Looks

Lord and Taylor First Looks animated css parallax scrolling

De Might of Mister Miller

De Might of Mister Miller animated css parallax scrolling

Negative Space

Negative Space animated css parallax scrolling

Anthelios SPF Sunscreen

Anthelios SPF Sunscreen animated css parallax scrolling

The Avalanche at Tunnel Creek

The Avalanche at Tunnel Creek animated css parallax scrolling

Flandria

Flandria animated css parallax scrolling

InfoQuest Infographic

InfoQuest Infographic animated css parallax scrolling

Reunite the River

Reunite the River animated css parallax scrolling

Fillet

Fillet animated css parallax scrolling

Eone

Eone animated css parallax scrolling


25 Inspiring Single Page Parallax Scrolling Sites

September 04 2013

15:09

Inspiring & Creative Contact Forms


In this post, we’ve collected a bunch of creative contact forms for your inspiration that take form design above and beyond the norm.

Out-of-the-box, a typical contact form is just a bunch of empty and dull boxes, with a generic submit button. Nothing special there then. But with just the right amount of styling and design innovation you can transform a form into something truly enticing and attention grabbing. Check these out…

Creative Contact Forms:

Contact Page from Café Evoke

Contact Page from Café Evoke

Bold Contact Page from Mixd

Bold Contact Page from Mixd

Signup Form from Involvio Orientation

Signup Form from Involvio Orientation

Sliding Contact Page from Whoa Nelly Catering

Sliding Contact Page from Whoa Nelly Catering

Submission Form from Dear Mum

Submission Form from Dear Mum

Clean Contact Page from Mud

Clean Contact Page from Mud

Minimal Contact Form from Eduardo Nunes

Minimal Contact Form from Eduardo Nunes

Dark Minimal Contact Form from group94

Dark Minimal Contact Form from group94

Clean Contact Form from Littlelines

Clean Contact Form from Littlelines

Contact Form from Mostly Serious

Contact Form from Mostly Serious

Bold Contact Form from Denise Chandler

Bold Contact Form from Denise Chandler

Clean Contact Form from Grain & Mortar

Clean Contact Form from Grain & Mortar

Signup Form from Solo

Signup Form from Solo

Minimal Contact Form from Cobble Hill

Minimal Contact Form from Cobble Hill

Innovative Submission Form from Simple as Milk

Innovative Submission Form from Simple as Milk

Textured Contact Form from Jarad Johnson

Textured Contact Form from Jarad Johnson

Drop In Contact Form from Online Department

Drop In Contact Form from Online Department

Minimal & Bold Contact Form from Ola Kvernberg

Minimal & Bold Contact Form from Ola Kvernberg

Sign Up Modal Form from Dropbox – DBX

Sign Up Modal Form from Dropbox - DBX

Illustrated Contact Form from Wing Cheng

Illustrated Contact Form from Wing Cheng


Inspiring & Creative Contact Forms

August 15 2013

09:22

The Creative Portfolios Sites of 50 Designers


A few months ago we reviewed Web Design Agency Homepages. However, many designers prefer to work alone, and their portfolios are also worth checking out. Thus, here are 50 individual creative portfolios, which will knock your socks off!

Keeping in mind that most agency sites are built on a “Logo – Tagline – Best Work – Contact Info” basis, we were curious to see if this formula would work as well for freelance designers as it does for web design agencies. Yes, it works sometimes, and you can see it from the examples featured in this article, but it seems, as expected, the main focus of most portfolio sites is to catch visitor’s attention, introduce the designer and then invite readers to get deeper into the portfolio in order to see the best works and know more about the designer, his/her skills, awards and experience.

A lot of designers prefer one page portfolios; some designers put personal photos on their sites; many of those whose websites are listed below are fans of minimal design, and so on. Some of the other features and trends available on designer portfolios are: white space, illustrations, big background images, flat design, big typography and geometric shapes. As for colors, white, gray and emerald seem to be very popular.

And if you believe reading is not enough to understand what an inspirational portfolio site is, please take a look at the following examples:

50 Creative Portfolios

Erik Ford

The design portfolio of Erik Ford

Marc Thomas

The design portfolio of Marc Thomas

David Hakkert

The design portfolio of David Hakkert

Pierrick Calvez

The design portfolio of Pierrick Calvez

Joshua James

The design portfolio of Joshua James

Tyler Finck

The design portfolio of Tyler Finck

Matthew D. Williams

The design portfolio of Matthew D. Williams

Oliver Brux

The design portfolio of Oliver Brux

Sam Markiewicz

The design portfolio of Sam Markiewicz

Daryl Thornnhill

The design portfolio of Daryl Thornnhill

Cody Sielawa

The design portfolio of Cody Sielawa

Derek Boateng

The design portfolio of Derek Boateng

GregSuj

The design portfolio of GregSuj

Daniele Petrarolo

The design portfolio of Daniele Petrarolo

Nicolas Borreil

The design portfolio of Nicolas Borreil

David Mcmenemy

The design portfolio of David Mcmenemy

Matt Luckhurst

The design portfolio of Matt Luckhurst

Oli Lisher

The design portfolio of Oli Lisher

Mahédine Yahia

The design portfolio of Mahédine Yahia

Fabien Cazals

The design portfolio of Fabien Cazals

Adam Hartwig

The design portfolio of Adam Hartwig

Jrutland

The design portfolio of Jrutland

Amanda Cole

The design portfolio of Amanda Cole

Ashley Farrand

The design portfolio of Ashley Farrand

Àlex Catalan

The design portfolio of Àlex Catalan

Jacob Heflin

The design portfolio of Jacob Heflin

Jake Lee Haugen

The design portfolio of Jake Lee Haugen

Daryl Brunsden

The design portfolio of Daryl Brunsden

Martin Fletcher

The design portfolio of Martin Fletcher

Caramel Budgie

The design portfolio of Caramel Budgie

Justin Aguilar

The design portfolio of Justin Aguilar

Yaron Schoen

The design portfolio of Yaron Schoen

Andreas Knutsson

The design portfolio of Andreas Knutsson

Maarten Teunis Hoogvliet

The design portfolio of Maarten Teunis Hoogvliet

Nicolas Bessol

The design portfolio of Nicolas Bessol

Armig Esfahani

The design portfolio of Armig Esfahani

Beta Takaki

The design portfolio of Beta Takaki

Mario Petrone

The design portfolio of Mario Petrone

Audrey Brouir

The design portfolio of Audrey Brouir

Kyle Thacker

The design portfolio of Kyle Thacker

Eliot Slevin

The design portfolio of Eliot Slevin

Simone Capano

The design portfolio of Simone Capano

Florian J. Färber

The design portfolio of Florian J. Färber

Bob Galmarini

The design portfolio of Bob Galmarini

Takumi Kobayashi

The design portfolio of Takumi Kobayashi

Nicolas Desle

The design portfolio of Nicolas Desle

Ivo Mynttinen

The design portfolio of Ivo Mynttinen

Cole Townsend

The design portfolio of Cole Townsend

Davy Rudolph

The design portfolio of Davy Rudolph

Anthony Goodwin

The design portfolio of Anthony Goodwin

You might also like…


The Creative Portfolios Sites of 50 Designers

July 17 2013

06:31

50 Clean and Modern Ecommerce Sites


Smaller ecommerce sites have the luxury of not having to follow the pre-defined design styles that many larger corporate stores need to use. They really don’t need to have a content-heavy landing page, a mega-menu with hundreds of categories, or even a section for suggested or alternative products. All smaller stores need for their fantastic products is a great designer that will build a simple and modern site around those items. Of course, a buy-it now button would be helpful as well. Nothing more is needed. Shopping really does not have to be complicated.

Many smaller stores still have the notion that they need to look like one of the big boys. That really is not case as we prove with these 50 ecommerce sites below:

Hard Graft

Hard Graft - Ecommerce Web Inspiration

Saturdays Surf NYC

Saturdays Surf NYC - Ecommerce Web Inspiration

Optimo Hats

Optimo Hats - Ecommerce Web Inspiration

United Pixelworkers

United Pixelworkers - Ecommerce Web Inspiration

Lemon & Mint

Lemon & Mint - Ecommerce Web Inspiration

The Goodhood Store

The Goodhood Store - Ecommerce Web Inspiration

Wootten

Wootten - Ecommerce Web Inspiration

OWL Shop

OWL Shop - Ecommerce Web Inspiration

Rachel Gant Jewelry

Rachel Gant Jewelry - Ecommerce Web Inspiration

Steven Alan Optical

Steven Alan Optical - Ecommerce Web Inspiration

X-Doria

X-Doria - Ecommerce Web Inspiration

F A L V É

F A L V É - Ecommerce Web Inspiration

Budnitz Bicycles

Budnitz Bicycles - Ecommerce Web Inspiration

Aria

Aria - Ecommerce Web Inspiration

BOLDKING

BOLDKING - Ecommerce Web Inspiration

Ermenegildo Zegna

Ermenegildo Zegna - Ecommerce Web Inspiration

Emmanuelle.d

Emmanuelle.d - Ecommerce Web Inspiration

AÃRK Collective

AÃRK Collective - Ecommerce Web Inspiration

Eden

Eden - Ecommerce Web Inspiration

Anthonij Rupert Wines

Anthonij Rupert Wines - Ecommerce Web Inspiration

B&O PLAY

B&O PLAY - Ecommerce Web Inspiration

Kershaw Knives

Kershaw Knives - Ecommerce Web Inspiration

Nixon Watches

Nixon Watches - Ecommerce Web Inspiration

Eastworks Leather Company

Eastworks Leather Company - Ecommerce Web Inspiration

Harry's – Great Shave

Harry's - Great Shave - Ecommerce Web Inspiration

Dolbeau

Dolbeau - Ecommerce Web Inspiration

Satorisan

Satorisan - Ecommerce Web Inspiration

The Hub Coffee & Bicycles

The Hub Coffee & Bicycles - Ecommerce Web Inspiration

Hommard Cashmere Sweaters

Hommard Cashmere Sweaters - Ecommerce Web Inspiration

noodoll

noodoll - Ecommerce Web Inspiration

Noon Solar

Noon Solar - Ecommerce Web Inspiration

Emporium Pies

Emporium Pies - Ecommerce Web Inspiration

VANMOOF 10

VANMOOF 10 - Ecommerce Web Inspiration

NiftyThrifty

NiftyThrifty - Ecommerce Web Inspiration

Bornshoes

Bornshoes - Ecommerce Web Inspiration

Kubxlab

Kubxlab - Ecommerce Web Inspiration

BonLook

BonLook - Ecommerce Web Inspiration

Cappellos

Cappellos - Ecommerce Web Inspiration

Tatchies

Tatchies - Ecommerce Web Inspiration

Le Coq Sportif

Le Coq Sportif - Ecommerce Web Inspiration

Lois Jeans

Lois Jeans - Ecommerce Web Inspiration

Discover Bagigia

Discover Bagigia - Ecommerce Web Inspiration

Ballantyne

Ballantyne - Ecommerce Web Inspiration

Wantful

Wantful - Ecommerce Web Inspiration

ECC Lighting & Furniture

ECC Lighting & Furniture - Ecommerce Web Inspiration

Awesome Tees

Awesome Tees - Ecommerce Web Inspiration

IWC Schaffhausen

IWC Schaffhausen - Ecommerce Web Inspiration

Oak Street Bootmakers

Oak Street Bootmakers - Ecommerce Web Inspiration

Shwood

Shwood - Ecommerce Web Inspiration

Ada Blackjack Shop

Ada Blackjack Shop - Ecommerce Web Inspiration

You might also like…


June 19 2013

08:39

50 Modern and Minimal Sites


The definition of minimal design has never changed, and probably never will. It is truly a timeless technique.

Having said that, minimal design does seem to have evolved ever so slightly over the last few years, especially within web design. Trends, techniques and user demands have changed, and quite remarkably has resulted in alterations to the look and feel of what we would typically define as a minimal site.

Those boundaries that had previously existed between all mainstream web design trends have become blurry, resulting in a blend of styles, where only the best parts of each have been wisely selected to create a whole new minimal style.

This is the modern web.

To help understand what we mean, take a look at these 50 minimally designed sites:

Kerem Suer

Kerem Suer - Minimal Web Inspiration

Daniel Benneworth-Gray

Daniel Benneworth-Gray - Minimal Web Inspiration

More Air

More Air - Minimal Web Inspiration

Ale De Carvalho

Ale De Carvalho - Minimal Web Inspiration

Another Pony

Another Pony - Minimal Web Inspiration

Control Films

Control Films - Minimal Web Inspiration

Andrew McCarthy

Andrew McCarthy - Minimal Web Inspiration

Yaron Schoen

Yaron Schoen - Minimal Web Inspiration

Scytale

Scytale - Minimal Web Inspiration

Rachel Gant Jewelry

Rachel Gant Jewelry - Minimal Web Inspiration

Shaun Dona

Shaun Dona - Minimal Web Inspiration

Gavin Potenza

Gavin Potenza - Minimal Web Inspiration

Eone

Eone - Minimal Web Inspiration

Happy Studio

Happy Studio - Minimal Web Inspiration

Erik Ford

Erik Ford - Minimal Web Inspiration

Kyle Thacker

Kyle Thacker - Minimal Web Inspiration

Hover Studio

Hover Studio - Minimal Web Inspiration

Neue Yorke

Neue Yorke - Minimal Web Inspiration

Hatch Inc

Hatch Inc - Minimal Web Inspiration

Jim Ramsden

Jim Ramsden - Minimal Web Inspiration

Ada Blackjack Shop

Ada Blackjack Shop - Minimal Web Inspiration

Oak Street Bootmakers

Oak Street Bootmakers - Minimal Web Inspiration

Find & Form

Find & Form - Minimal Web Inspiration

Refryed Design

Refryed Design - Minimal Web Inspiration

Alistair Lane

Alistair Lane - Minimal Web Inspiration

CO OP

CO OP - Minimal Web Inspiration

John Sparrow

John Sparrow - Minimal Web Inspiration

Ada Blackjack Shop

Ada Blackjack Shop - Minimal Web Inspiration

OCHO

OCHO - Minimal Web Inspiration

Shadow

Shadow - Minimal Web Inspiration

Northbound Design

Northbound Design - Minimal Web Inspiration

ECC Lighting & Furniture

ECC Lighting & Furniture - Minimal Web Inspiration

Cedric Vella

Cedric Vella - Minimal Web Inspiration

Instrument

Instrument - Minimal Web Inspiration

Dan Edwards

Dan Edwards - Minimal Web Inspiration

Maier & Maier Photography

Maier & Maier Photography - Minimal Web Inspiration

The Clocksmiths

The Clocksmiths - Minimal Web Inspiration

Belancio

Belancio - Minimal Web Inspiration

Teehan+Lax

Teehan+Lax - Minimal Web Inspiration

Jean-Maxime Brais

Jean-Maxime Brais - Minimal Web Inspiration

Sketchin

Sketchin - Minimal Web Inspiration

Dumbo Townhouses

Dumbo Townhouses - Minimal Web Inspiration

TriplAgent

TriplAgent - Minimal Web Inspiration

Studio Mister

Studio Mister - Minimal Web Inspiration

Brault & Barnes Design

Brault & Barnes Design - Minimal Web Inspiration

Rype Arts

Rype Arts - Minimal Web Inspiration

Tonic

Tonic - Minimal Web Inspiration

I Think I Might

I Think I Might - Minimal Web Inspiration

Bondfire Inc.

Bondfire Inc. - Minimal Web Inspiration

Pierrick Calvez Studio

Pierrick Calvez Studio - Minimal Web Inspiration

You might also like…


June 07 2013

07:51

May 30 2013

06:49

May 20 2013

04:38

25 Beautiful Content Heavy Websites


Perhaps the hardest project you could ever take on is designing the website of an online news magazine. One of those sites that gets updated umpteen times a day and publishes various formats of content, like news articles, image galleries, videos, blog columns, polls, etc. Yes, I am talking about content heavy websites. Those behemoths of sites that seem to be impossible to plan, nevermind design for.

As you will already know, there are thousands of content-rich websites out there, but very few seem to focus on good design. Sure, they have put a lot of thought into organization and structure, but for the most part they do rely on the old tried and tested magazine-style layouts, and never really tend wander far from those confines.

Fortunately, not all are like that. Some do dare to venture out and breakout off those shackles and design something truly unique and, and dare I say it, beautiful.

Monocle (Responsive)

Monocle - Content Heavy Web Inspiration

Award

Award - Content Heavy Web Inspiration

Esquire (Responsive)

Esquire - Content Heavy Web Inspiration

The Next Web (Responsive)

The Next Web - Content Heavy Web Inspiration

Polygon (Responsive)

Polygon - Content Heavy Web Inspiration

Newsweek (Responsive)

Newsweek - Content Heavy Web Inspiration

House (Responsive)

House - Content Heavy Web Inspiration

The Gadget Flow (Responsive)

The Gadget Flow - Content Heavy Web Inspiration

ReadWrite (Responsive)

ReadWrite - Content Heavy Web Inspiration

Mashable (Responsive)

Mashable - Content Heavy Web Inspiration

Google Science Fair (Responsive)

Google Science Fair - Content Heavy Web Inspiration

National Academy Museum

National Academy Museum - Content Heavy Web Inspiration

The Verge

The Verge - Content Heavy Web Inspiration

True Digital (Responsive)

True Digital - Content Heavy Web Inspiration

UGSMAG (Responsive)

UGSMAG - Content Heavy Web Inspiration

BBC

BBC - Content Heavy Web Inspiration

GOOD

GOOD - Content Heavy Web Inspiration

Wired (Responsive)

Wired - Content Heavy Web Inspiration

The Brief

The Brief - Content Heavy Web Inspiration

Black In History (Responsive)

Black In History - Content Heavy Web Inspiration

The Artfuls

The Artfuls - Content Heavy Web Inspiration

DesignTAXI (Responsive)

DesignTAXI - Content Heavy Web Inspiration

Reform & Revolution (Responsive)

Reform & Revolution - Content Heavy Web Inspiration

B-Reel (Responsive)

B-Reel - Content Heavy Web Inspiration

Glamour (Responsive)

Glamour - Content Heavy Web Inspiration

You might also like…

Our 50 Favorite Web Designs from 2012 →
Examples of ‘Flat’ in Web Design →
Creative Depth in Web Design →
30 Clean Web Design Agency Homepages →
20 Websites with Original, Non-Standard Geometry →
40 Examples of Brilliant Responsive Website Layouts →
Essential Elements of a Design Agency Website Layout →
30 Highly Unusual Web Designs →
40 Effectively Designed Non-Profit and Charity Web Sites →


April 01 2013

09:23

30 Clean Web Design Agency Homepages


Over the years (as you can see from 2008 and 2010) design agencies have consistently produced clean and spacious homepages using a simple tried and tested formula: Large logo, a simple medium-sized tagline, main section used for showcasing some of their best work and finally listing some basic contact information in the footer. It is a very simple formula, but it has worked effectively.

Fast forward a few years to 2013 and web trends have dramatically changed, technology has greatly improved, user expectations are much higher and the mobile web has well and truly arrived. Typography is much larger nowadays, sliders are used instead of static images, parallax scrolling & single pagers are overly popular… there are so many changes and improvements that we can’t possibly list them all here.

But the one thing that hasn’t changed, despite all of the progress and as you will see from the beautiful and clean agency sites we have for you below, is that that simple, yet perfect, web design agency formula still works and rings true: Logo – Tagline – Best Work – Contact Info.

It is timeless.

Gin Lane Media

Gin Lane Media - Design Company

DangerDom Studios

DangerDom Studios - Design Company

Whiteboard

Whiteboard - Design Company

Manos

Manos - Design Company

TeamGeek

TeamGeek - Design Company

Grain & Mortar

Grain & Mortar - Design Company

By Association Only

By Association Only - Design Company

45royale

45royale - Design Company

Playground Inc.

Playground Inc. - Design Company

Palantir.net

Palantir.net - Design Company

Always Creative

Always Creative - Design Company

Engage Interactive

Engage Interactive - Design Company

Etch

Etch - Design Company

FHOKE

FHOKE - Design Company

Awesome

Awesome - Design Company

CO OP

CO OP - Design Company

Teehan+Lax

Teehan+Lax - Design Company

Sputnik Creative

Sputnik Creative - Design Company

Kohactive

Kohactive - Design Company

Plain

Plain - Design Company

Mark Boulton Design

Mark Boulton Design - Design Company

35mm Design

35mm Design - Design Company

Supereight Studio

Supereight Studio - Design Company

Envy Labs

Envy Labs - Design Company

I <3 FR

I <3 FR - Design Company

Shelton Fleming

Shelton Fleming - Design Company

FortyOneTwenty Inc.

FortyOneTwenty Inc. - Design Company

Online Department

Online Department - Design Company

The Prince Ink Company

The Prince Ink Company - Design Company

SoftFacade

SoftFacade - Design Company

You might also like…

Our 50 Favorite Web Designs from 2012 →
Examples of ‘Flat’ in Web Design →
20 Websites with Original, Non-Standard Geometry →
40 Examples of Brilliant Responsive Website Layouts →
Our 50 Favorite Web Designs from 2011 →
Essential Elements of a Design Agency Website Layout (with 30 examples) →
30 Highly Unusual Web Designs →
40 Effectively Designed Non-Profit and Charity Web Sites →


February 29 2012

08:23

40 Examples of Brilliant Responsive Website Layouts


Responsive web design become a very popular trend in 2011. It’s likely something we’ll see continuing well into 2012 as designers are beginning to support a myriad of mobile devices. Building layouts for the web can be tough, but inspiration is a huge factor.

In this gallery I’ve collected 40+ amazing responsive website layouts. These designs are built to support a set of different resolutions and re-size accordingly. It’s tricky building this functionality in HTML5, even advanced web developers may not understand responsive design trends. But check out some of our examples below and you’ll pick up techniques very quickly. Additionally let us know your thoughts or questions in the post discussion area.

Fork CMS

Full View:

Mobile View:

SimpleBits

Full View:

Mobile View:

White Lotus Aromatics

Full View:

Mobile View:

1140px CSS Grid

Full View:

Mobile View:

Atlason

Full View:

Mobile View:

10K Apart

Full View:

Mobile View:

Cognition

Full View:

Mobile View:

Reverse Buro

Full View:

Mobile View:

Sunday Best

Full View:

Mobile View:

Dustin Senos

Full View:

Mobile View:

Clear Air Challenge

Full View:

Mobile View:

Owltastic

Full View:

Mobile View:

320 and up

Full View:

Mobile View:

Yaron Schoen

Full View:

Mobile View:

Build Guild

Full View:

Mobile View:

Do Lectures

Full View:

Mobile View:

Trent Walton

Full View:

Mobile View:

Food Sense

Full View:

Mobile View:

Sparkbox

Full View:

Mobile View:

ribot

Full View:

Mobile View:

Sweet Hat Club

Full View:

Mobile View:

A Different Design

Full View:

Mobile View:

Teixido

Full View:

Mobile View:

Sasquatch Music Festival

Full View:

Mobile View:

Electric Pulp

Full View:

Mobile View:

Stephen Caver

Full View:

Mobile View:

Social Marketer’s Summit

Full View:

Mobile View:

Sleepstreet

Full View:

Mobile View:

Porcupine

Full View:

Mobile View:

Interim

Full View:

Mobile View:

Tileables

Full View:

Mobile View:

CalebAcuity

Full View:

Mobile View:

Simon Collison

Full View:

Mobile View:

Spigot Design

Full View:

Mobile View:

Forefathers Group

Full View:

Mobile View:

Deren Keskin

Full View:

Mobile View:

Robot… Or Not?

Full View:

Mobile View:

Arrrcamp Conference

Full View:

Mobile View:

Thirst Studios

Full View:

Mobile View:

Visua Design

Full View:

Mobile View:

Made by Splendid

Full View:

Mobile View:

Five Simple Steps

Full View:

Mobile View:

Ryan O’Rourke

Full View:

Mobile View:

dConstruct 2011

Full View:

Mobile View:

Diablo Media

Full View:

Mobile View:

Asbury Agile Web Conference

Full View:

Mobile View:

You might also like…

15 Free WordPress Themes with a Responsive Layout →
25 jQuery Plugins to help with Responsive Layouts →
15 Responsive CSS Frameworks Worth Considering →
10 HTML5-Ready Blank, Bare-Bones and Naked Themes for WordPress →



February 05 2012

10:09

30 Highly Unusual Web Designs


When it’s working, we call it developing a distinctive style. When it’s not, we call it falling into a rut. Formulaic, trend-based design might help you get the bills paid on time, but it won’t win you any design awards — and let’s face it, what’s most scary about that feeling is the idea that your artistic side might be slipping as you behave more like a manufacturer.

While this is a common feeling shared by all designers at some point in their professional lives, there are plenty of ways to deal with it. One of them is inspiring yourself with the most unusual, out-of-the-box design you can find. Sure, you might not bring some of the crazier stuff back into your work with corporate clients, but it is nice to get inspired again and try a few new — perhaps subtler — additions to your day-to-day work.

Dean Oakley

Creative Capital

Real-Visuals

Roland Olbeter

Narfstuff

Jiri Tvrdek

Paolo Cavanna

Zillu

Pixelcool

Grip Limited

Juan Diego Velasco

Pretty Production

Stripes Design

Marc Anton Dahmen Architecture

Eutem.com

Get London Reading

HTML5 Readiness

CL Designz

HTC Sense

Nick Jones

Digital Podge

Veerle

Dave Werner

Veboo Labs

Julia Noda

David Jiminez

Jeremy Levine Design

31Three

Transmission Inc.

Convax Solutions

From strange color palettes to unconventional layouts, these thirty designs represent everything that’s not done in regular, corporate web design. Some of the elements work, others not so much, but they’re all the work of designers who are thinking outside of the formulas. Forget two column layouts with a four color palette and start playing again.

You might also like…

50 Examples of Large Photography Backgrounds within Web Design →
50 Examples of Creative 404 – Page Not Found Pages →
A Showcase of 50 Amazing Personal Blog Web Designs →
50 Creative Examples of Illustrations in Web Design →
50 Professional Web Design Agency Web Sites →
50 Bright and Vibrant Web Designs – Color Inspiration →

Looking for freelance design work?
Find graphic design contests and web design jobs at DesignCrowd.



January 25 2012

08:26

A Showcase of Typography in Webdesign


Functional web typography is, of course, key to the usabilty of any website. But functional does not mean boring.
Big, loud and attention grabbing typography does have the presence and magnificence to truly grab the attention of your visitors.
It does not quite shout at your readers, it merely says with a slighlt harder-overtone ‘Look at ME!’.
Its effect can be impressive and memorable.

Today we have a creative and exciting collection of websites who do you use, and succesfully so, big type TO GET THEIR MESSAGE ACROSS!

Hope you find some inspiration for them.

Denise Chandler

Denise Chandler

Me In Motion

Plain and apparent typography with all the letters capitalized to catch the user’s attention.

Me In Motion

Amazeelabs

Amazeelabs

Barney Funk

A moderately sized font combined with red gives a very powerful message to your viewers.

Barney Funk

Justdot

Justdot

Glitch

Simple, clear and attractive typography.

Glitch

Bowtie Period

Bowtie Period

Takeshape

Takeshape

We Shoot Bottles

We Shoot Bottles

Ipolecat

Ipolecat

Cupcake Creative Studio

Cupcake Creative Studio

Git Tower

Git Tower

Fore Father Group

Fore Father Group

Efingo

Efingo

Marie Catribs

Marie Catribs

Stephen Caver

Stephen Caver

Rich Brown

Rich Brown

Finch

Finch

Brunet-Garcia

Brunet-Garcia

Diegolatorre

Diegolatorre

Pieoneers

Pieoneers

Thealbany

Thealbany

Wooconcept

Wooconcept

Rvlt

Rvlt

72ave

72ave

Moozedesign

Moozedesign

Tokyodigital

Tokyodigital

Weareacademy

Weareacademy

Robedwards

Robedwards

Elysium Burns

Elysium Burns

Teez

Teez

Make Photoshop Faster

Make Photoshop Faster

Bills

Bills

Visualbox

visualbox

Gapmedics

Gapmedics

Notorious Design

Notorious Design

Markboulton Design

Markboulton Design

Wordit

wordit

Polar Gold

polar gold

Yudisign

Yudisign

Fuelfuture

Fuelfuture

Sabotagepkg

Sabotagepkg

Gritti Rollo

Gritti Rollo

Cassius

Cassius

You might also like…

50 Examples of Large Photography Backgrounds within Web Design →
50 Examples of Creative 404 – Page Not Found Pages →
A Showcase of 50 Amazing Personal Blog Web Designs →
50 Creative Examples of Illustrations in Web Design →
50 Professional Web Design Agency Web Sites →
50 Bright and Vibrant Web Designs – Color Inspiration →
50 Impressive Magazine and Newspaper Styled Web Designs →
50 Inspirational and Fresh Minimally Designed Web Sites →
50 Creative and Inspirational Personal Portfolio Websites →
50 Inspiring Web Application and Service Web Site Designs →



January 06 2012

07:56

40 Effectively Designed Non-Profit and Charity Web Sites

Advertise here with BSA


A charity or cause may not need the sleek sales pages of a business on the web, but a poorly designed one could still mean the difference between helping people or failing to do so. Therefore, a non profit website design should be appealing enough to invite the organization’s targeted donors and volunteers.

The basics of web design are enough to make a difference – An easy to navigate and user friendly website with careful use of fonts, colors and other graphical elements make finding and navigating these websites easy for their users to understand and learn about their cause. Additionally, it will make it much easier to raise money.

If more charities followed the president set by the sites below, perhaps our World could be just a little bit more better.

Here’s Life Mission Africa

Here’s Life Mission Africa has designed a trendy and visually sophisticated website that definitely calls for action from its users. The “Donate Now” button is in red and in a prominent position at the top of the web page.

World Food Programme

World Food Programme website design plays tremendously well with the color handling that makes this website visually comforting.

New York City Coalition Against Hunger

New York City Coalition Against Hunger website is an outstanding example of acquiring lots of information into a tiny space, while at the same time keeping the whole thing cluttered-free as well as user-friendly.

Amnesty International

This website design brings bright color into play with the amalgamation of black color to grab visitors attention. Donate and Take Action buttons are placed prominently.

CUPS

The web designer of Cups has successfully created a very natural and pleasant website design. All the buttons and options are presented symetrically.

Plant with Purpose

Loads of green is used to excellent effect in this website design created for Plant with Purpose. The link to donate has been afforded a spot at the top navigation menu that suggests its importance over other elements.

Stand

Stand makes use of refreshing colors to differentiate the website from others. The donate button is placed at the center of the top navigation menu and in blue to set itself apart from the other elements.

Save the Children UK

Here we have a great example of using soft and delicate colors. The donate button in this website design is red and is placed right at the top navigation menu.

Greenpeace USA

Greenpeace USA makes use of fresh and refreshing colors to distinguish their website from others. The Donation button is placed at the center of the page with the word ‘make’ using bold for emphasis.

Kiva

The website design of Kiva is far beyond the ordinary non profit website design. Not only does it feature a number of users that the website empowers with its services, but it also informs you about how the website works.

ASPCA

This website design plays extremely well with the color usage, making this website design visually appealing and soothing. The header and all the important and attention grabbing elements are in orange while the donate button is placed prominently.

Save the Children

The Save the Children website presents information in a concise and user-friendly manner. The web design provides lots of information in easy-to-read portions around the page.

Oxfam America

Here the website design is slightly more stylish as compared to other non profit site designs in this collection. The use of different colors is interesting to make a distinction between different segments while the Donate button is in red color to grab extra attention.

Natural Resources Defense Council

Natural Resources Defense Council takes advantage of three different colors to make its header easy to read and distinguish. The Donate and Take Action buttons are in orange while the Blogs button is in green with all the remaining buttons in blue.

The Nature Conservancy

The color theme of this website is soothing and subtle. The whole design has been given a very natural and well accepted look with the Donate Now button in red near the top of the page as well as in the side bar.

Witness

Yet another great example of using soft and subtle colors while creating a strong impact. The Donate button in this design is in orange and is placed right at the top in the navigation bar.

Susan G. Komen for the Cure

Here you’ll notice many shades of pink across the page, raising awareness of breast cancer and related diseases. The donate button is designed to draw attention while remaining in keeping with the color theme of this website.

Take The Walk

The dark color theme of Take The Walk’s design is what sets it apart from other similar websites. Although the design is simple, it does grabs the viewers attention. The Donate button matches the color theme nicely.

Change

This is a simple, uncluttered design fresh website design with delicate and nice color choices. The Start A Petition button is in red for emphasis while rest of the design displays a very subtle look.

Charity: water

In this non profit website design, only Charity Water and Email subscription field are blue while the rest of the content and buttons are presented in black and white creating an elegant high contrast design.

Blog Action Day

An extremely simple and fresh website design without too many graphical elements stuffed onto the page. The content of this site is presented against a white background, giving it a very professional look.

Ducks Unlimited

Ducks Unlimited brings typography and color into play to create an attention grabbing and compelling website.

The Memphis Zoo

This website design carries a slightly joyous look that goes pretty well with the name of the website. As far as the color usage is concerned, the header is presented in excellent symmetry without any discrimination in terms of colors and typography.

Custodial Abuse

A vintage look is created for this website with a header that presents the navigation options uniformly.

The Michael J. Fox Foundation for Parkinson’s Research

The Michael J. Fox Foundation for Parkinson’s Research creatively divides the web page into four segments to accommodate a lot of information while keeping the whole design simple and interesting.

Wiser

The header of this website is in dark while the content is presented in lighter colors that draws more attention. The Donate Now and Contact Us buttons are placed at the top of the header to attract attention.

Housing Works

This website design’s subtle and pleasant color combination is straight forward, uncomplicated and uncluttered. The Login button is in black for emphasis while the rest of the design carries a more subtle look.

Practical Family Living

Truth be told, the whole color theme of this website is extremely comforting and delicate. The design has a very natural and well established look, with the Donate button placed at the top navigation bar.

MANNA Food Bank

The MANNA Food Bank website design is in a shade of green that conveys the message of greenery and vegetation suitable for the cause the website is supporting. Donate Online Now button has been given an additional importance and stands out while looking very much a part of the page.

One

No more graphical elements are used in this web design than are necessary. Instead, the designer only made use of typography to draw the difference between vital elements.

Metropolitan Inter-Faith Association

Metropolitan Inter-Faith Association website design is simple, uncomplicated and has a very minimalist look. The Donate button is right at the top on the navigation bar and has been further distinguished with a nice green color.

Action for Children

In this design, the designer kept the design simple and uncomplicated while giving it a very beautiful look. The Donate button is in red and is placed near to the top navigation bar.

Children’s Rights

Here, the Support Us button appears in the area of the navigation bar in red, suggesting its critical importance. Meanwhile the other elements are presented symmetrically.

Dalit Freedom Network

This website design brings dark color into play with a combination of white used for the site content, giving it a compelling look. Also notice the Donate button, placed in the top navigation bar.

Sower of Seeds

You’ll notice a somewhat unique level of contrast in the colors of this design. The designer very creatively blends black, white and pink colors in a single design. The Donate button is at the top of the page.

Urban Roots

Urban Roots has a look that matches its name while creating a very professional feel. All elements and options on this design are presented with symmetry and without any inequity.

A Word from His Word

In the web design of A Word from His Word, the web designer attempted to keep the design straightforward and unfussy. In this design less graphical elements are more, and instead this web designer made use of fantastic typography to draw the difference between elements.

Wide Awake

Yet another example of how successfully colors can be used to create a contrast between different elements of a web page and to draw attention quickly to the most important elements.

Park Angels

Here, Park Angels utilizes a very unique approach that successfully matches the design of this website and creates an interesting result.

Yellow Bird Project

Yellow Bird Project calls more attention to the content of the website rather than the design solely. Therefore, varying font sizes are used to create the distinction.

Hope Unlimited

Hope Unlimited website design is different and unique from other website designs as it does not have any header. Instead, it sports a sidebar that serves the roles usually reserved for the header.

You might also like…

50 Examples of Large Photography Backgrounds within Web Design →
50 Examples of Creative 404 – Page Not Found Pages →
A Showcase of 50 Amazing Personal Blog Web Designs →
50 Creative Examples of Illustrations in Web Design →
50 Professional Web Design Agency Web Sites →
50 Bright and Vibrant Web Designs – Color Inspiration →


Advertise here with BSA


October 08 2011

08:36

Weekly Web Design and Development Inspiration – N.109

Advertise here with BSA


This is our weekly selection of our favorite web designs from the past week, thanks to everybody for their recommendations. Feel free to comment and let us know what you think.

Have you tried StylesInspiration yet? It is our web design showcase that aims to not only showcase the best and most innovative web design styles currently available, it also aims to give you a visual overview of current web design trends and highlight the latest in innovative web technologies. You’ll love it :)

Yann Pochet Portfolio

Yann Pochet Portfolio

Solo

Solo

Moredays

Moredays

Syropia

Syropia

Playtype

Playtype

Millable

Millable

Column Five Media

Column Five Media

You may like to browse our previous Weekly Inspirations

Weekly Web Design and Development Inspiration Archives →


Advertise here with BSA


September 29 2011

08:21

Breaking the Norm: Unusual and Creative Web Layouts

Advertise here with BSA


Web design does not have to be limited to a typical grid structured layout. It sometimes feels like we are locked in an endless cycle of header, content, sidebar and footer. That is it. It would be great if we could to tear away from convention sometimes and also force ourselves to break some usability rules. Just imagine what we could create.

In today’s post we have for you a selection of sites that do exactly as described above: They break convention and the result is that they have built some amazingly creative layouts which, in most cases anyway, are a little unusual as well.

The Secret Location

The Secret Location presents their work by creating the story of a character who follows a strange path to the secret location. Extremely synergistic approach with an extraordinary site layout.

Marshall Haber

This Flash site uses a subway map as a preloader and once it has loaded you’ll be amazed at the detail and creativity of its design and highly original navigation.

Grzegorz Kozak

Very intriguing and interactive layout that presents a beautiful background image of a tower. Clicking on the top menu will take you to the relevant section on the page.

Accept Joel

This horizontal scrolling portfolio website has a unique navigation that asks you to choose from one of five steps that will then scroll to the relevant page.

Thibaud

I love this website. The carefully placed navigation elements have a beautiful mouse over effect and sound. You can drag and drop the elements and can click on each to further explore the site.

Get London Reading

This layout has been designed as though you’re reading a book while sitting in a park.

Basil gloo

The center part of this website is what that make it stand out from the rest. The eye-catching green carpet looks terrific.

Colourpixel

Full of beautiful and vivid colors that grab the attention and develop your interest in the website to browse further.

Dave Werner

This portfolio site make use of a ‘scrap-book styled’ content area that allows you to explore the portfolio in a unique way.

Pretty Production

A very unusual, colorful and creative layout with horizontal scrolling.

Rich Brown

This website is equally divided into two parts. One is completely static with a very nice background image while the other part is scrollable with different tiles where you can click on to browse further.

Matthias Dittrich

You will love browsing through this truly interactive design portfolio site. Simply drag in to scroll.

Real Visuals

With this site, you will discover lots of interactive design elements that add beauty and originality.

Play Jambalaya

An iOS word game app website with bizarre color contrast and some unique interactive elements.

Sitotis

This website has been designed to give you the impression that you are flipping through a personal diary.

Gavin Castleton

This site has been designed to highlight the split personality of each of the musicians albums. Simply choose the album or personality you would like to explore.

Samsung Mobile

This impressive website is easy to use, although it can at times be confusing as new elements are brought in.

Alexbuga

This is a fantastic site with creativity brimming from all angles. The navigation is hidden behind the glass panels of the entertainment center.

Level2

McDonalds

This site has been designed to give you the impression you are walking into a generic McDonalds outlet.

Loysels Toy

Felixng

This dark site, on first load, presents itself with an almost blank layout. But when you move your mouse over the red blocks the attractive navigation appears and brings the site to life.

Nofrks

Tri Win

The background image of this site completely fits the company, which offers mailing services.

Classicwfl

Typically the navigation is positioned in either the sidebar or at the top of a site. Classicwfl takes a different route. The non-linear layout breaks past a typical boxy structure and offers something completely original.

Team Viget

Viget Labs uses a sliding navigation and a horizontal scrolling effect to make the user interaction more vibrant and interesting. However, even more outstandingly, the layout itself stands out: the layout is indistinguishable and resembles interactive Flash-interfaces.

Kamil Gottwald

In his layout Kamil Gottwald allows users to determine the width of the sites columns. To navigate vertically users require scrolling horizontally. Consequently no vertical scrollbar is needed. Multiple site views are possible.

Jeremy Levine Design

Pieoneers

This website presents the different components of web application development as different ingredients of a recipe. Nice touch.

SeymourPowell

Self Titled

Self Titled presents a single big circle at the center of the page. Clicking anywhere on the ring will reveal the actual component and clicking on the plus sign will further reveal content.

Agency Net

A very interesting site to browse. Simply click on the section you want to browse.

Elite Webmaster

A somewhat similar approach to that of Agency Net above. You can scroll up and down and click on each section for further information.

Leoburnett

Here you will come to see a very different style of navigation. The mouse over effect is as though you are moving a pencil on a paper. Simply click on the sub-menu to explore further.

You might also like…

50 Examples of Large Photography Backgrounds within Web Design →
50 Examples of Creative 404 – Page Not Found Pages →
A Showcase of 50 Amazing Personal Blog Web Designs →
50 Creative Examples of Illustrations in Web Design →
50 Professional Web Design Agency Web Sites →
50 Bright and Vibrant Web Designs – Color Inspiration →


Advertise here with BSA


September 24 2011

09:41

Weekly Web Design and Development Inspiration – N.107

Advertise here with BSA


This is our weekly selection of our favorite web designs from the past week, thanks to everybody for their recommendations. Feel free to comment and let us know what you think.

Have you tried StylesInspiration yet? It is our web design showcase that aims to not only showcase the best and most innovative web design styles currently available, it also aims to give you a visual overview of current web design trends and highlight the latest in innovative web technologies. You’ll love it :)

James Garner

James Garner

Vision of Beauties

Vision of Beauties

The Mavenist

The Mavenist

Full Frontal 2011

Full Frontal 2011

2create studio

2create studio

Sunday Best Websites

Sunday Best Websites

The Combine 2011

The Combine 2011

CodeVisually

CodeVisually

You may like to browse our previous Weekly Inspirations

Weekly Web Design and Development Inspiration Archives →


Advertise here with BSA


September 22 2011

09:06

Before & After Redesigns of Popular Design Blogs

Advertise here with BSA


There’s a lot to be learned by looking at before and after shots of a website’s redesign. You get to see what the designer or design team has learned about design since the last rendition, where they’ve identified problems and areas of the design that could be improved. The site’s look and feel is brought up to date with trends, and often more timeless improvements are made, such as base typography enhancements.

Examining these changes can help you take advantage of the designer’s learning through trial and error and other means and avoid having to make the same mistakes yourself. Here are 30 popular design blogs that have been redesigned over the past few years for your viewing pleasure.

WebDesignerWall

Before:

After:

Veerle’s Blog

Before:

After:

Tutorial9

Before:

After:

UX Booth

Before:

After:

InspiredMag

Before:

After:

Lord Likely

Before:

After:

Fudgegraphics

Before:

After:

WorkAwesome

Before:

After:

LINE25

Before:

After:

SimpleBits

Before:

After:

Francesco Mugnai

Before:

After:

Speckyboy Design Magazine

Before:

After:

1st Web Designer

Before:

After:

The Design Buzz

Before:

After:

Onextrapixel

Before:

After:

Abduzeedo

Before:

After:

UsabilityPost

Before:

After:

PVM Garage

Before:

After:

Wegraphics

Before:

After:

Janko at Warp Speed

Before:

After:

Visualswirl

Before:

After:

Web Design Ledger

Before:

After:

Think Vitamin

Before:

After:

Dawghouse Design Studio

Before:

After:

Spyrestudios

Before:

After:

AppStorm

Before:

After:

Cats who Blog

Before:

After:

Under World Magazines

Before:

After:

Smashing Magazine

Before:

After:

Elite By Design

Before:

After:

Mashable

Before:

After:

Conclusion

Much of what you see here is designers keeping up with web design trends before their work looks dated. In the last year or so, many of the redesigns would’ve been about taking advantage of new technologies such as CSS3, allowing designers to accomplish completely new things, or just replace hacks that weren’t exactly standards-compliant with proper implementations.

But what you can see in each and every design is the process of designers learning and growing and honing their skills through iteration. Let us know in the comments your thoughts on where these redesigns hit, where they missed, and what you might have done differently.

You might also like…

Creative, Unsolicited Redesigns of Popular Web Sites (6 Examples) →
30 Login Forms with Creative Design →
Showcase of Beautifully Designed Charts & Graphs →
20 Effective Examples of Web and Mobile Wireframe Sketches →
Showcase Of Effective and Creative Pricing Page Designs →

Want to redesign a website? Find

website redesign jobs on DesignCrowd.


Advertise here with BSA


September 19 2011

09:55

September 17 2011

07:45

Weekly Web Design and Development Inspiration – N.106

Advertise here with BSA


This is our weekly selection of our favorite web designs from the past week, thanks to everybody for their recommendations. Feel free to comment and let us know what you think.

We have recently launched StylesInspiration, a web design showcase that aims to not only showcase the best and most innovative web design styles currently available, it also aims to give you a visual overview of current web design trends and highlight the latest in innovative web technologies. You’ll love it :)

Striking.ly

Striking.ly

Column Five Media

Column Five Media

Fork the Open Source CMS

Fork the Open Source CMS

Kitchen Sink Studios

Kitchen Sink Studios

Grave

GRAVE

Jon Phillips's Blog

Jon Phillips's Blog

Bell Creative Studio

Bell Creative Studio

You may like to browse our previous Weekly Inspirations

Weekly Web Design and Development Inspiration Archives →


Advertise here with BSA


Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl