Tag-Archive for » Excellent «

48 Examples of Excellent Layout in Web Design

Beautiful graphics and colors are great and play a big part in web design, but most would agree that the backbone of a solid user experience is the layout. After all, what good is all of the eye candy if one can not easily read and digest the content. There is nothing better than opening a perfectly organized and readable website – a page where the layout invites you to browse the site’s content. There are several ways to organize and put together a nice layout for your website, and here we’ll show some examples of sites that use grids, columns and blocks to showcase their content.

Superawesome

contentsites01

leids film festival

contentsites02

Kokoro & Moi

contentsites03

UX Magazine

contentsites04

TRUF

contentsites05

The Bygone Bureau

contentsites06

Live Now

contentsites07

OURHYPE

contentsites08

Minimalist Design Magazine

contentsites09

Computerlove

contentsites10

Simon Collison

contentsites11

YCN

contentsites12

Arnaud Beelen

contentsites13

BB – Bisgrafic Blog

contentsites14

Derek Mack

contentsites15

Magnum Photos

contentsites16

The Canary Collective

contentsites17

Zachary Pulman

contentsites18

de51gn

contentsites19

The Grid System

contentsites20

iniva

contentsites21

graphito.net

contentsites22

TBWA – London

contentsites23

method.com

contentsites24

Theme

contentsites25

Jan Sochor

contentsites26

FYNN

contentsites27

AiGA NY

contentsites28

Draft

contentsites29

skyskraper

contentsites30

cheetos

contentsites31

Haik Avanian

contentsites32

Morphix

contentsites33

nocturn

contentsites34

Zaum & Brown

contentsites35

SF 70folk

contentsites36

Cool And The Guide

contentsites37

T Magazine

contentsites38

next room

contentsites39

Indextwo

contentsites40

The Feast

contentsites41

pips a la carte

contentsites42

Dojo Design Studio

contentsites43

Frieze

contentsites44

The Morning News

contentsites45

Rainfall Daffinson

contentsites46

Mark Boulton Design

contentsites47

design B studios

contentsites48

Sources:

  • Design by Grid
  • site inspire
  • Design Shack

About the Author

Gisele MullerGisele Muller is someone that recently discovered a new career online. A person that really likes technology, design, photography and creativity. An eternal geek wannabe, tech fan and a communication lover! Current location: Porto Alegre, RS Brazil. Twitter: @gismullr

60 Excellent Examples of Illustration in Web Design

The great thing about web design is that we have an enormous range of styles, techniques and ideas to implement when designing. You can go from Super Clean and Minimal Layouts to Colorful Layouts, and you can use Huge Typography or Hand Drawn elements – as long as you keep your style and give your website your own personality. As illustration is somewhere in between those options and is something that can be used to give your website a very unique touch, we decided to gather 60 excellent examples of illustration in web design. There should be plenty here to inspire you.

a modern eden

illustratedsites01

veerle’s blog

illustratedsites02

the waiting room

illustratedsites03

doublenaut

illustratedsites04

the color cure

illustratedsites05

Pixel Thread

illustratedsites06

Hull Digital Question Time

illustratedsites07

The Digital Invaders

illustratedsites08

forrst

illustratedsites09

Siringa

illustratedsites10

fedena

illustratedsites11

Fator Criativo

illustratedsites12

xhtmlCafe

illustratedsites13

Aran Down

illustratedsites14

Alex Buga

illustratedsites15

brizk

illustratedsites16

slavikdizajn

illustratedsites17

Daniel Marques

illustratedsites18

David Hellmann

illustratedsites19

MailChimp

illustratedsites20

iwit.nl

illustratedsites21

meomi

illustratedsites22

Navigant Consulting

illustratedsites23

The Alamo Basement

illustratedsites24

Oslo Internasjonale Filmfestival

illustratedsites25

the ship and the sea

illustratedsites26

Eighty Two Design

illustratedsites27

Matt Hamm

illustratedsites28

UGSMAG

illustratedsites29

Digiti

illustratedsites30

Robbin Waldemar

illustratedsites31

Fully Illustrated

illustratedsites32

Maggie Taylor

illustratedsites33

made by guerrilla

illustratedsites34

Gowalla

illustratedsites35

Silverback

illustratedsites36

Green Ideas

illustratedsites37

tree house editing

illustratedsites38

Healthy Harvest

illustratedsites39

shout

illustratedsites40

ten24media

illustratedsites41

branded07

illustratedsites42

Banjax

illustratedsites43

What Is Your Problem

illustratedsites44

ok.cogaoke

illustratedsites45

Ali Felski

illustratedsites46

jacob lee

illustratedsites47

Douglas Menezes

illustratedsites48

Drupalcon – DC

illustratedsites49

Andy Ward

illustratedsites50

Carol Rivello

illustratedsites51

Surfeited

illustratedsites52

twenty2designs

illustratedsites53

Chirag Solanki

illustratedsites54

Phizz

illustratedsites55

titofelix

illustratedsites56

Starbucks Coffee At Home

illustratedsites57

FIMEL

illustratedsites58

Getting Crazy

illustratedsites59

Corvus Design Studio

illustratedsites60

About the Author

Gisele MullerGisele Muller is someone that recently discovered a new career online. A person that really likes technology, design, photography and creativity. An eternal geek wannabe, tech fan and a communication lover! Current location: Porto Alegre, RS Brazil. Twitter: @gismullr more…

11 Excellent Solutions for Making Your Website Mobile Friendly

It seems that almost everybody has a cell phone these days, and with the growing adoption of smart phones, more and more people are browsing the internet on their mobile device. Even though some phones, like the iPhone, have browsers that make viewing regular webpages suitable, a mobile version of your website can mean several benefits, like faster load times, and ensuring your content can be viewed on a wider range of phones.

Creating a mobile version of WDL has been on my to-do list for a while now, but yet there is still no mobile version of this site. Sensing that I’ve been putting it off for far too long, I’ve started to do research on the best mobile solution for Web Design Ledger. I’ve found that there are a number of solutions out there that make it easy to go mobile with your website, but here are eleven of the best.

WPtouch

mobile version tools

WPtouch is a mobile theme for your WordPress website. Modeled after Apples app store design specs, it loads lightning fast and shows your content beautifully, without interfering with your regular site theme. WPtouch automatically transforms your WordPress blog into a web-application experience when viewed from an iPhone, iPod touch, Android, or BlackBerry Storm touch mobile device.

MoFuse

mobile version tools

MoFuse is currently being used by over 23,000 blogs for their mobile versions. Some notable “big-name” sites are Mashable and Read Write Web. MoFuse gives you tools to promote your content, build and measure your audience, and even make money.

Mippin Mobilizer

mobile version tools

Mippin Mobilizer helps you get your site mobilized in just a few quick steps, and give you full control over the branding and logo. It also give you the ability to monetize your mobile site through advertising.

Mobify

mobile version tools

Mobify gives you full control over the layout of your mobile site with CSS, and it supports over 5000 mobile devices. It also gives you tools to manage mobile advertising and analytics.

Wirenode

mobile version tools

Wirenode currently hosts nearly 40,000 mobile webpages, and include in those are some popular brands like Reebok and Ford. With Wirenode it takes about 5 minutes to get a mobile version of your site up and running, and it gives you features like mobile widgets, RSS mobilization, and mobile polls and forms.

WPtap

mobile version tools

WPtap delivers mobile themes/plugins that can instantly convert your WordPress site into web-application experience when viewed from iPhone, iPod Touch, touch-based Blackberry, and Android smartphones. WPtap offers comprehensive mobile theme solutions for your WordPress website. It comes complete with all the standard WordPress blog features: search, login, categories, tags, archives, photos & more. WPtap also offers many customization features through a user-friendly WordPress admin panel.

mobiSiteGalore

mobile version tools

mobiSiteGalore is a mobile website builder that allows you to easily build, publish & share a full-fledged mobile website that is guaranteed to work fine on any mobile phone. Design templates allow you to completely customize the colors, fonts and layout on the page to create a unique looking mobile version of your website.

WordPress Mobile Pack

mobile version tools

The WordPress Mobile Pack is a complete toolkit to help mobilize your WordPress site and blog. It includes a mobile switcher to select themes based on the type of user that is visiting the site, a selection of mobile themes, extra widgets, device adaptation and a mobile administration panel to allow users to edit the site or write new posts when out and about.

Zinadoo

mobile version tools

Zinadoo is a web solution that allows you to create a mobile version of your website in just a few minutes. You can also optimize your site for Google Mobile with keywords and tags, and make use of their special mobile widgets.

Winksite

mobile version tools

Winksite was the first standards-compliant mobile Website builder that included RSS-driven content deployment and mobile-tuned community features such as forum, chat, and polls. It also allows you to monetize your mobile site with advertising from leading advertising networks. Your revenue share is 100%. Winksite does not take a share of the revenue that your mobile site generates.

MobilePress

mobile version tools

MobilePress is a free WordPress plugin which turns your WordPress blog into a mobile friendly blog when viewed on a cell phone. MobilePress also allows you to create custom mobile themes for different handheld devices and mobile browsers such as the iPhone, Opera Mini and Windows Mobile.

12 Excellent CSS3 Button and Menu Techniques

CSS3 is changing how we build websites. Even though many of us are still reluctant to start using CSS3 due to the lack of support in some browsers, there are those out there that are moving forward and doing some amazing stuff with its cool new features. No longer will we have to rely on so much JavaScript and images to create nice looking website elements such as buttons and menu navigations. So, in order to encourage you to start experimenting with CSS3, we’ve rounded up 12 excellent CSS3 button and menu techniques.

Roll Your Own Google Buttons

css3 buttons

CSS3-Only Tabbed Area

css3 buttons

Radioactive Buttons

css3 buttons

Apples Navigation bar using only CSS

css3 buttons

How to Build a Simple Button with CSS Image Sprites

css3 buttons

Creating Dynamic Buttons With CSS3

css3 buttons

How To Create Depth And Nice 3D Ribbons Only Using CSS3

css3 buttons

CSS3 Chunky Menu

css3 buttons

CSS3 Dropdown Menu

css3 buttons

Pretty CSS3 Buttons

css3 buttons

jQuery style menu with CSS3

css3 buttons

CSS3-only horizontal drop line tab menu

css3 buttons

13 Excellent Tools and Systems for CSS Grid Based Layouts

A good grid can be a strong foundation for any design. Using grids got its start in print design, but has made it’s way over to the web. There are several advantages to using grids in web design, but primarily they help achieve structure and consistency in layouts. If you have yet to start using grids in your web design projects, but want to get started…we’re here to help. In this post, we’ve rounded up 13 excellent tools and systems for CSS grid based layouts.

#grid

grid layout

#grid is a little tool that inserts a layout grid in web pages, allows you to hold it in place, and toggle between displaying it in the foreground or background.

Gridmaker

grid layout

Gridmaker is a handy tool for creating grid templates for use in Photoshop. There’s also a plugin.

960 Grid System

grid layout

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

YUI: CSS Grid Builder

grid layout

CSS Grid Builder is another tool that lets you design your own grid by specifying body width and number of columns. This one even lets you enter content for the header and footer. Once you’re done you can easily copy the generated code.

1 KB CSS Grid

grid layout

The 1 KB CSS Grid is a simple, lightweight approach that doesn’t require a PhD. When server-side options for templating and sub-templating are limited, the grid can be used as an alternative page templating engine. Its convenient row and column syntax provide all the necessary scaffolding.

netProtozo: Grid Generator

grid layout

Grid Generator allows you to design your own grid by specifying the usual parameters like column width, gutter width, etc. You can then download grab the css or a png of the grid.

Blueprint

grid layout

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

Typogridphy

grid layout

Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts.

The Golden Grid

grid layout

The Golden Grid is a web grid system. It ’s a product of the search for the perfect modern grid system. It ’s meant to be a CSS tool for grid based web sites.

YAML

grid layout

“Yet Another Multicolumn Layout” (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

Grid Calculator

grid layout

Grid Calculator allows you to choose the font size you are going to use, and then select the number of columns, column width, and gutter width based on that base font size. As you fiddle with the dimensions, the total width is dynamically updated, so you can check that you havent gone over that magic 1024px.

Gridr Buildrrr

grid layout

Gridr Buildrrr is a useful tool to help you layout your own grids.

Fluid 960 Grid System

grid layout

The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the MooTools JavaScript library. The idea for building these templates was inspired by Andy Clarke, author of Transcending CSS, who advocates a content-out approach to rapid interactive prototyping, crediting Jason Santa Maria with the grey box method.