Posts Tagged ‘nav’

45 Free eBooks for Developers and Designers

Over the past year or so we have published several articles featuring a selection of the best free ebooks for web designers, with each post proving very popular and highly resourceful. Sadly, since then some of the fantastic ebooks we previously featured are no longer available or are no longer been offered as a freebie. But looking on the positive side many new web design ebooks have been released and, as you will see within this post, there are also a few ebooks, recommended by our readers, which we missed in those previous articles.

Just as we did with the previous posts we have not offered a critique of each book only a description of the content, as we feel that if someone spends so much valuable time writing an entire specialized book and then offer it for free, in our eyes they deserve only praise and appreciation.

All of the 45 books in this post are completely FREE and can be either downloaded in digital format (PDF) or viewed as a web page (HTML).

Introduction to Good Usability by Peter Pixel

Introduction to Good Usability by Peter PixelThis guide is especially handy if you haven’t done a lot of webdesign yet or if you are involved in webdesign but don’t do any of the real work. I hope to shed some light on some common interface elements and mistakes people often make with them.
A lot of books have been written in the past but the threshold for reading them, especially if you have never built a site, is quite big, hence this short guide. This is by no means a complete guide or solid set of rules, but it is definitely a good start.
Introduction to Good Usability →PDF →

Web Accessibility Checklist by Aaron Cannon

Web Accessibility Checklist by Aaron CannonWritten by Aaron Cannon, blind web developer and accessibility consultant.Aaron explains in his article “The Accessibility Checklist I Vowed I’d Never Write”, that the problems with a “simple checklist that, when followed, will give you an accessible site without fail.” No such checklist exists or likely ever will. He believes that this list is not the perfect solution, nor is it the only solution, but believes it is a good first step, and it gives our developers and designers a place to start from.
Web Accessibility Checklist →PDF →

CSS Systems For Writing Maintainable CSS by Natalie Downe

CSS Systems For Writing Maintainable CSS by Natalie DowneA CSS System is a reusable set of content-oriented markup patterns and associated CSS created to express a site's individual design. It is the end result of a process that emphasizes up-front planning, loose coupling between CSS and markup, pre-empting browser bugs and overall robustness. It also incorporates a shared vocabulary for developers to communicate the intent of the code.
This ebook elaborates on this concept, and also describes a number of tricks used to preempt maintainability issues.
CSS Systems For Writing Maintainable CSS →PDF →

Better CSS Font Stacks by Nathan Ford

Better CSS Font Stacks by Nathan FordBetter CSS Font Stacks →PDF →

Faster, and More Secure Webfonts by Bram Pitoyo

Faster, and More Secure Webfonts by Bram PitoyoFont embedding for the web is a great step in making the web look better and become more functional, but what about security and load times?
Bram Pitoyo’s ebook takes the top layer off font embedding and shows us how things work, and ultimately how to improve performance and make it more secure.
Faster, and More Secure Webfonts →PDF →

Designing for the Web by Mark Boulton

Designing for the Web
A Practical Guide to Designing for the Web aims to teach you techniques for designing your website using the principles of graphic design.
Featuring five sections, each covering a core aspect of graphic design: Getting Started, Research, Typography, Colour, and Layout. Learn solid graphic design theory that you can simply apply to your designs, making the difference from a good design to a great one.
Designing for the Web →HTML Version →

Building iPhone Apps with HTML, CSS, and JavaScript by Jonathan Stark

Building iPhone Apps with HTML, CSS, and JavaScript
If you know HTML, CSS, and JavaScript, you already have what you need to develop your own iPhone apps. With this book, you’ll learn how to use these open source web technologies to design and build apps for both the iPhone and iPod Touch.
Building iPhone Apps with HTML, CSS, and JavaScript →

UX Storytellers – Connecting the Dots

UX Storytellers - Connecting the Dots
UX Storytellers – Connecting the Dots →Google Docs →Scribd →

Essential JavaScript And jQuery Design Patterns by Addy Osmani

Essential JavaScript And jQuery Design Patterns
Design patterns are reusable solutions to commonly occurring problems in software development and are a very useful tool to have at your disposal. Addy Osmani wrote this mini-book because he felt that patterns were an area a lot of new and intermediate JavaScript developers may not have had a chance to explore just yet and I’m hopeful my book will encourage you to check them out as they can be quite powerful.
Essential JavaScript And jQuery Design Patterns →

20 Things I learned about Browsers and the Web

20 Things I learned about Browsers and the Web
Essential JavaScript And jQuery Design Patterns →

Taking Your Talent to the Web by Jeffrey Zeldman

Taking Your Talent to the Web
This book was originally written in 2001 for print designers whose clients want websites, print art directors who’d like to move into full–time web and interaction design, homepage creators who are ready to turn pro, and professionals who seek to deepen their web skills and understanding.
The dot-com crash killed this book. Now it lives again. While browser references and modem speeds may reek of 2001, much of the advice about transitioning to the web still holds true.
Taking Your Talent to the Web →PDF →

Dive Into HTML 5 by Mark Pilgrim

Dive Into HTML 5
Dive Into HTML 5 is an ongoing book that seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards. The final manuscript will be eventually published on paper by O’Reilly, under the Google Press imprint.
Dive Into HTML 5 →HTML Version →

jQuery Fundamentals

jQuery Fundamentals
The purpose of this book is to provide an overview of the jQuery JavaScript library; when you're done with the book, you should be able to complete basic tasks using jQuery, and have a solid basis from which to continue your learning. This book was designed as material to be used in a classroom setting, but you may find it useful for individual study.
jQuery Fundamentals →HTML Version →

Data Structures and Algorithms

Data Structures and Algorithms
Put simply this book is the result of a series of emails sent back and forth between the two authors during the development of a library for the .NET framework of the same name. The conversation started of something like "Why don't we create a more aesthetically pleasing way to present our pseudocode?" After a few weeks this new presentation style had in fact grown into pseudocode listings with chunks of text describing how the data structure or algorithm in question works and various other things about it. At this point we thought, "What the
heck, let's make this thing into a book!"
Data Structures and Algorithms →PDF →

Design Your Imagination

Design Your Imagination
Design Your Imagination is a one stop resource for the beginners and learners of website design. Though this e-book is mainly targeted for the beginners of website design, it might prove helpful for the experienced web designers as well. This free web design e-book is clearly divided into 28 chapters and in each chapter a specific topic is illustrated with ample examples. The language is as lucid as possible and proper care has been taken to keep intact the flow of writing.
Design Your Imagination →PDF →

Building Android Apps with HTML, CSS, and JavaScript

Building Android Apps with HTML, CSS, and JavaScript
Device-agnostic mobile apps are the wave of the future, and this book shows you how to create one product that can be used on several mobile operating systems. You'll find guidelines for using the free PhoneGap framework to converty our product into a native Android app. And you'll learn why releasing your product as a web app first helps you find, fix, and test bugs much faster than if you went straight to the Android Market with a product built with the official Android SDK.
Building Android Apps with HTML, CSS, and JavaScript →HTML Version →

The Web Book

The Web Book
The Web Book contains all the information you need to create a Web site from scratch. It covers everything from registering a domain name and renting some hosting space, to creating your first HTML page, to building full online database applications with PHP and MySQL. It also tells you how to market and promote your site, and how to make money from it.
The Web Book →PDF →

Building Accessible Websites

Building Accessible Websites
Building Accessible Websites →HTML Version →

The Elements of Typographic Style Applied to the Web (HTML)

The Elements of Typographic Style Applied to the Web
For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse.
In order to allay some of the myths surrounding typography on the web, this website/book has been structured to step through Bringhurst’s working principles, explaining how to accomplish each using techniques available in HTML and CSS. The future is considered with coverage of CSS3, and practicality is ever present with workarounds, alternatives and compromises for less able browsers.
The Elements of Typographic Style (Full HTML) →Chapters →

Integrating Accessibility Throughout Design (HTML)

Integrating Accessibility Throughout Design
The Web is providing unprecedented access to information and interaction for people with disabilities. It provides opportunities to participate in society in ways otherwise not available. With accessible websites, people with disabilities can do ordinary things: children can learn, teenagers can flirt, adults can make a living, seniors can read about their grandchildren, and so on.
With the Web, people with disabilities can do more things themselves, without having to rely on others. People who are blind can read the newspaper (through screen readers that read aloud text from the computer), and so can people with cognitive disabilities who have trouble processing written information. People who are deaf can get up-to-the-minute news that was previously available only to those who could hear radio or TV, and so can people who are blind and deaf (through dynamic Braille displays). Web accessibility is about removing those barriers so that people with disabilities can use and contribute to the Web.
This book helps you improve your products—websites, software, hardware, and consumer products—to remove accessibility barriers and avoid adding new barriers. One guiding principle is: just ask people with disabilities.
Integrating Accessibility Throughout Design: HTML version →Table of Contents →

Getting Real: The Book by 37signals (HTML)

Getting Real: The Book by 37signals
Want to build a successful web app? Then it's time to Get Real. Getting Real is a smaller, faster, better way to build software.
Getting Real delivers better results because it forces you to deal with the actual problems you're trying to solve instead of your ideas about those problems. It forces you to deal with reality.
Getting Real foregoes functional specs and other transitory documentation in favor of building real screens. A functional spec is make-believe, an illusion of agreement, while an actual web page is reality. That's what your customers are going to see and use. That's what matters. Getting Real gets you there faster. And that means you're making software decisions based on the real thing instead of abstract notions.
Finally, Getting Real is an approach ideally suited to web-based software. The old school model of shipping software in a box and then waiting a year or two to deliver an update is fading away. Unlike installed software, web apps can constantly evolve on a day-to-day basis. Getting Real leverages this advantage for all its worth.
Getting Real: HTML Version →Chapters →

Access by Design Online (HTML)

Access by Design Online
We design Web sites so people can use them. People doesn’t mean “some people” or “certain people.” With universal usability, our goal is to design Web sites that accommodate the diversity of people and the Web browsing devices that they use. To design Web sites that people can use, we must work within the flexible framework that the Web provides.
To this end, we must begin our process with a solid understanding of how the Web works. When we know its nature, we can make intelligent design decisions that uphold rather than impede its functionality. Whenever we face a decision that may impact function, we must look for other options.
Access by Design Online: HTML Version →Table of Contents →

Research-Based Web Design & Usability Guidelines (PDF)

Research-Based Web Design & Usability Guidelines
The Research-Based Web Design & Usability Guidelines (Guidelines) were developed by the U.S. Department of Health and Human Services (HHS), in partnership with the U.S. General Services Administration.
The Guidelines were developed to assist those involved in the creation of Web sites to base their decisions on the most current and best available evidence. The Guidelines are particularly relevant to the design of information-oriented sites, but can be applied across the wide spectrum of Web sites.
Research-Based Web Design & Usability Guidelines(PDF) →

Search User Interfaces (HTML)

Search User Interfaces
This book outlines the human side of the information seeking process, and focuses on the aspects of this process that can best be supported by the user interface. It describes the methods behind user interface design generally, and search interface design in particular, with an emphasis on how best to evaluate search interfaces. It discusses research results and current practices surrounding user interfaces for query specification, display of retrieval results, grouping retrieval results, navigation of information collections, query reformulation, search personalization, and the broader tasks of sensemaking and text analysis. Much of the discussion pertains to Web search engines, but the book also covers the special considerations surrounding search of other information collections.
Search User Interfaces: HTML Version →Search User Interfaces: Table of Contents →

Dive Into Accessibility (HTML & PDF)

Dive Into Accessibility
This book is entitled "Dive Into Accessibility: 30 days to a more accessible web site", and it will answer two questions. The first question is "Why should I make my web site more accessible?" If you do not have a web site, this book is not for you. The second question is "How can I make my web site more accessible?" If you are not convinced by the first answer, you will not be interested in the second.
To answer the second question,the book presents 25 tips that you can immediately apply to your own web site to make it more accessible. Although these concepts apply to all web sites, the focus is on implementation using popular weblogging tools. If you use some other publishing tool or template system, you will need to determine how to implement the tips in your tool of choice.
HTML Version →PDF Version →Chapters →

Web Style Guide: Basic Design Principles for Creating Web Sites – 3rd Edition (HTML)

Web Style Guide: Basic Design Principles for Creating Web Sites - 3rd Edition
Written by Patrick J. Lynch and Sarah Horton for web site designers in corporations, government, nonprofit organizations, and academic institutions, the book explains established design principles and covers all aspects of web design—from planning to production to maintenance. The guide also shows how these principles apply in web design projects whose primary concerns are information design, interface design, and efficient search and navigation.
Web Style Guide 3rd Edition: HTML Version →Chapters →

The Woork Handbook (PDF)

The Woork Handbook
The Woork Handbook is a free eBook about CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other topics about web design.
This book is a miscellanea of articles written by Antonio Lupetti on his web design blogr. During the period form January to December 2008 “Woork” has been visited from over 4 millions visitors and has received a lot of requests to distribute a printable version of its contents.
The Woork Handbook: PDF Version →

Web Designers Success Guide (PDF)

Web Designers Success Guide
Web Designer's Success Guide is the definitive guide to starting your own freelance Web design business. In this book, Kevin Airgid gives designers a step-by-step instructions on how to achieve the following: Transition from full-time to self-employment, Freelance on the side to make additional income, Find new clients and keep them coming back for more, Market your freelance business, Manage your projects professionally and how to Price your services appropriately.
Web Designers Success Guide: PDF Version →

Eloquent JavaScript (HTML)

Eloquent JavaScript
Eloquent JavaScript is a digital book providing a comprehensive introduction (tutorial) to the JavaScript programming language. Apart from a bookful of text, it contains plenty of example programs, and an environment to try them out and play with them.
The book is aimed at the beginning programmer ? people with prior programming experience might also get something out of it, but they should not read chapters 2 to 5 too closely, because most of the concepts discussed there will probably be nothing new to them. Do make sure you read the end of the first chapter, which has some essential information about the book itself.
Eloquent JavaScript: HTML Version →Chapters →

Ruby Best Practices (PDF)

Ruby Best Practices
In 1993, when Ruby was born, Ruby had nothing. No user base except for Gregory and a few close friends. No tradition. No idioms except for a few inherited from Perl.
But the language forms the community. The community nourishes the culture. In the last decade, users increased—hundreds of thousands of programmers fell in love with Ruby. They put great effort into the language and its community. Projects were born. Idioms tailored for Ruby were invented and introduced. Ruby was influenced by Lisp and other functional programming languages. Ruby formed relationships between technologies and methodologies such as test-driven development and duck typing.
This book introduces a map of best practices of the language as of 2009.
Ruby Best Practices: PDF Version →

HTML5 Quick Learning Guide by freehtml5templates.com

HTML5 Quick Learning Guide by freehtml5templates.comThis guide introduces you to just the main elements of HTML5 that you’ll probably want to use right away. This guide is for those who want to get the basics figured out first, and worry about the finer details later on.
HTML5 Quick Learning Guide →PDF →

Web Font User Guide by FontShop

Web Font User Guide by FontShopThis Web FontFont User Guide contains information aimed at web developers, system administrators and website visitors.
Section B is for web developers, showing how to get started using Web FontFonts for display on your website. Section C contains information for system administrators about which configuration changes may be necessary to successfully serve webfonts from your web server and, finally, section D outlines some issues visitors of your website may experience in connection to webfonts and may assist site owners in answering webfont-related support requests.
Web Font User Guide →PDF →

Type Classification eBook by Jacob Cass

Type Classification eBook by Jacob CassThis book has been made to help you learn the 10 broad classifications of type. These are the basic foundations of what you need to learn to learn typography and it is essential for any designer to know how to classify type. This book goes through the 10 type classifications with a brief history as well as the key characteristics of each.
Type Classification eBook →PDF →

Typo Tips – Seven Rules for Better Typography by Erik Spiekermann

Typo Tips - Seven Rules for Better Typography by Erik SpiekermannTypo Tips – Seven Rules for Better Typography →PDF →

How to Start a Business Blog by Michael Martine

How to Start a Business Blog by Michael MartineHow to Start a Business Blog, by Michael Martine, is a step-by-step-guide to help you plan, set-up, and create content for a business blog.
How to Start a Business Blog →PDF →

Forty’s Pocket Guide to SEO by Forty

Forty’s Pocket Guide to SEO by FortyPocket Guide to SEO contains everything you could want to know about SEO. Buried deep inside its pages you’ll find tips, tricks, general information about search engines, and how you can make them work for you – in a completely ethical way, of course.
Forty’s Pocket Guide to SEO →PDF →

Why design? by AIGA

Why design? by AIGAThe “Why design?” booklet outlines the role of design in business strategy. It seeks a common framework for why design adds value to clients’ interests. It defines the power of Designing, a larger concept that includes strategy as well as artifacts across a variety of disciplines.
Why design? →PDF →

The Design Funnel: A Manifesto for Meaningful Design by Stephen Hay

The Design Funnel: A Manifesto for Meaningful Design by Stephen HayFrom the authour of this manifesto, Stephen Hay: "Would you like a process which would help translate the often vague, unclear wishes of your clients (and yourself, for that matter) into a clear and solid basis for your design? This manifesto will show you how."
The Design Funnel: A Manifesto for Meaningful Design →PDF →

How To Be Creative by Hugh MacLeod

How To Be Creative by Hugh MacLeodWritten by HughMacLeod, an advertising executive and popular blogger with a flair for the creative. He offers his 26 tried-and-true tips for being truly creative with each point being illustrated by a cartoon drawn by the author himself.
How To Be Creative →PDF →

Time Management for Creative People by Mark McGuinness

Time Management for Creative People by Mark McGuinnessTime Management for Creative People →PDF →

Who's There? by Seth Godin

Who's There? by Seth GodinWho's There is not an ebook about how to write better or how to follow the traditional conventions about formatting and building a blog. Instead, he talks about how building a blog asset can have a spectacular impact on you, your career, your organization and your ideas.
Who's There? →PDF →

A Concise Guide to Archiving for Designers by Karin van der Heiden

A Concise Guide to Archiving for Designers by Karin van der HeidenAIGA worked with the Dutch Archives for Graphic Designers (NAGO) in the Netherlands to publish an English version of A Concise Guide to Archiving for Designers. The guide provides designers with the proper ways to store and describe their collections in 10 short chapters.
A Concise Guide to Archiving for Designers →PDF →

Guerrilla Freelancing by Mike Smith

Guerrilla Freelancing by Mike SmithGuerrilla Freelancing →
PDF →

KnockKnock by Seth Godin

KnockKnock by Seth GodinKnockKnock →PDF →

You might also like…

A Review of Web Design Trends from 2010 →
The Trend of Minimalist Graphic Design →
How To Control Flow Within Your Web Designs →
Accessibility Principles for the Modern Designer →
Professional Structure and Documentation in Web Design →
Clear Your Mind to Focus on What Matters →
What the Future of Cloud Computing means for Web Designers →
Beginners Guide to Using the Power of Color in Web Design →
Understanding and the Meaning of Color Within Design →


CSS3 Button Tutorials and Techniques Revisited

Once upon a time when a web design required a nice, functional and scalable button it would have had to have been firstly designed in Photoshop, implemented with the sliding doors technique, and you may have had to spice things up with a little Javascript. With CSS3 everything is changing – everything is easier and certainly better.

As well as button tutorials and techniques we have also showcased some CSS3 tools and generators, you will find these at the bottom of the post.

Throughout this Christmas week we are taking a look at the most popular and most resourceful articles that we have published in the past year.
I promise that by next week normal service will resume with even higher quality articles, with even more resourceful posts and, of course, some highly inspirational posts. I can hardly wait !
Hope you have all had a great Christmas!

This article was originally published on February the 15th 2010 and entitled 20 CSS3 Tutorials and Techiques for Creating Buttons.

Pretty CSS3 Buttons

CSS3 Buttons
The Objective of this tutorial is to create a set of button styles that are cross browser compliant, can degrade gracefully for non CSS3 compliant browsers and are are entirely scalable, meaning that you can make it a variety of sizes and colors with ease.
This tutorial lends its self heavily from the Super Awesome Buttons tutorial from Zurb, with some insightful and useful alterations and additions.
Downloads and Docs »Demo »

CSS3 Button That Degrades Nicely

CSS3 Buttons
There was a time where creating a nice looking, scalable button required heavy use of images, the sliding doors technique and even some Javascript.
As it stands a lot of the modern browsers support the CSS we would like to use to create a nice looking button. Firefox, Safari and Opera all have support for rounder corners, box shadows and text shadows.
What used to take six steps and lots of extra mark-up, images and CSS, now only takes three steps and some simple CSS3.
Downloads and Docs »Demo »

Dynamic Buttons With CSS3

CSS3 Buttons
The example in this tutorial demonstrate how to create nice looking, dynamic buttons that are fully scalable using the CSS3 properties border-radius, box-shadow and RGBa.
By using RGBa color values, the button and text shadows will always blend well with any color you choose for your button, no matter if you want the button to be green, red or blue – The code will always remain the same.
Downloads and Docs »Demo »

A Sexy Button Using CSS

CSS3 Buttons
Downloads and Docs »Demo »

Roll Your Own Google Buttons

CSS3 Buttons
Google has a new focus on webkit-specific properties thanks to their new Chrome browser, which uses a branch of the same rendering engine Safari uses.
The buttons use the -webkit-gradient function, which takes in arguments for the gradient start and stop points as well as color and then creates what the browser basically considers an image. That means you can use gradients anywhere you would use images, including backgrounds and even borders (with border-image).
Downloads and Docs »Demo »

Cool Overlapped Menu using Sprites

CSS3 Buttons
Here you can learn how to create a cool overlapped pure CSS menu/button using CSS sprites. CSS sprites can be termed as a method for reducing the number of image requests to a web page by combining multiple images into a single image, and display the desired segment using CSS background-image and background-position properties.
The photoshop source is also available for download, so that you can customize it as per your need.
Downloads and Docs »Demo »

Sexy Buttons

CSS3 Buttons
Sexy Buttons is a HTML/CSS-based framework for creating 'sexy' web site buttons. These stylish, attention getting buttons can be used for calls to action wherever user interaction is desired and can be used with either the <button> or <a> elements.
The entire 1000 icons from the Silk Icons set and the 450+ Silk Companion Icons set are included with the Sexy Buttons download.
Downloads and Docs »Demo »

Radioactive Buttons with CSS Animations and RGBa

CSS3 Buttons
Using CSS animations in Safari, you're able to turn an otherwise ordinary button into a glowing, radioactive mess of awesome.
To make it work, you first have to specify all your button styles and then you add the shadows. Now, in the animation, you switch from a box-shadow that matches the background color to the color of the button to give it the glowing effect – And then you add in some animation. Awesome!
Downloads and Docs »Demo »

Super Awesome Buttons

CSS3 Buttons
This is another tutorial lending itself from the perfectly titled the super awesome buttons, from Zurb. This time the developer has extended them to improve the cross browser compatibility, added a nicer design for when the buttons get clicked and finally removed the necessity to set to different background colors for different states of the buttons.
Downloads and Docs »Demo »

CSS3 Buttons from CSSPlay

CSS3 Buttons
This demonstration, from Stu Nicholls of CSSPlay, will work in Firefox, Safari and Google Chrome and shows how to style buttons using just the border radius, drop shadows and gradient fills.
No graphics have been used in the demo and no extra markup. If you wanted to be adventurous you could also add a hover state change of gradient fill to give an illumination effect.
Downloads and Docs »Demo »

Shiny Happy Buttons

CSS3 Buttons
In this tutorial you will build buttons that use no images, neither in your HTML nor your CSS. There will be no sliding doors and no image replacement techniques. Just straight up, CSS, CSS3 and a bit of experimental CSS. The finished button will be compatible with pretty much any browser (though with some progressive enhancement for those who keep up with the latest browsers).
Downloads and Docs »Demo »

CSS Sprite-Slide Button

CSS3 ButtonsThere are lots of tutorials on sliding doors button and lots on the sprite technique, but never a combination of both.This button combines the wonderful sprite technique with the sliding doors technique to make a beautiful button that not only loads in a snap but also looks great and scales to your text.
Downloads and Docs »Demo »

CSS3 Box-Shadow Button with Inset Values (Aqua Button)

CSS3 ButtonsThere’re plenty of tutorials that describe how to create a sexy aqua button with Photoshop, but none that will show you how to create the button using only CSS, more specifically CSS3 (-webkit-gradient, text-shadow and RGBa).
Downloads and Docs »Demo »

Simple Button with CSS Image Sprites

CSS3 Buttons
The button you’ll be creating in this tutorial takes on traditional styling using subtle gradients and outlines to give the impression of a rounded, three dimensional object. You will learn how to built this simple using CSS image sprites, starting right at the beginning in Photoshop and finishing with the complete coded example.
Downloads and Docs »Demo »

Beautiful Buttons with CSS Gradients

CSS3 Buttons
Using a CSS-based method means you don’t have to regenerate images every time you change text, pages will load much faster and it allows text to be easily localized. In this case it also makes the page better from an accessibility standpoint – the text contained in the <a href> can add context.
In this demo you'll be shown a simple use for the new gradient capabilities and learn how to build a nice-looking embossed and beveled button using gradients and existing CSS properties.
Downloads and Docs »Demo »

Fancy Buttons Are Here!

CSS3 Buttons

Downloads and Docs »Demo »

Better Button and Nav Interactions

CSS3 Buttons
The iPhone user controls are responsive, like tactile objects in your hand. The panels slide and the icons glow when you touch them. It gives the illusion of tighter control over the app. Switching to a touchscreen-less web browser, interactions feel stiff and unsatisfying and lack of response creates a feeling of distance been the user and the interface.
In this well described tutorial the button you will build has a distinct :hover and :active states so that it depresses when clicked. The text also bumps down 1 pixel and the text-shadow changes to give it a 2-dimensional feel. Now that CSS3 is gaining wider support, most of this styling and behavior can be done pretty easily.
Downloads and Docs »Demo »

Nice 3D Ribbons Only Using CSS3

CSS3 Buttons
Yes, it is possible to create a simple and nice (3D) layout with some CSS3 properties, only using code and without the help of any graphic editor.
You will be using box-shadow to create a drop-shadow with RGBa, border-radius and the transform property for the single items of the list to make a nice 3D effect.
Downloads and Docs »Demo »

Super Awesome Buttons with CSS3 and RGBA

CSS3 Buttons
Super Awesome Buttons are certainly the Daddy of all the CSS3 buttons above. It was back in April 2009 that ZURB first published this tutorial, and set a high bench-mark for all to follow.
They may look like images, but loading speed and maintainability demonstrate that they are certainly not.
It's a simple button that is made possible by a transparent PNG overlay (for the gradient), border, border-radius, box-shadow, and text-shadow.
Yes, they are so awesome!
Downloads and Docs »Demo »

CSS3 Gradient Generator

CSS3 Buttons
The CSS3 Gradient Generator was created as showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS.
CSS gradients generate an image result, meaning the result of a CSS gradient can be used anywhere an image can be used, be it a background-image, mask,border, or list item bullet.
CSS3 Gradient Generator »

CSS3 Generators and Tools from Westciv

CSS3 Buttons
Developers from Westciv offer free to use CSS3 generators, that will not only help with your buttons but with almost every aspect of CSS3.
The tools are:
Linear and Radial Gradients »
Explore CSS gradients (both linear and radial) (an experimental feature in Safari 4, and a proposed addition to CSS3).

Shadows (Text and Box) »
CSS now lets you create drop shadows on text, and on the box of an element. Explore CSS3 transforms (supported in Opera 9, Firefox 3.5 and Safari 1.2 and higher), and box-shadows (supported in Firefox 3.5 and Safari 3.1).

CSS Transforms »
You can rotate, scale, skew, and otherwise transform HTML elements with CSS 3. Explore CSS3 CSS Transforms (supported in Opera 10.5, Firefox 3.5 and Safari 4 and higher).

CSS Text Stroke »
You can stroke text with experimental CSS text-stroke, supported in Safari 4.

You might also like…

15 jQuery Plugins for Better Web Page Element Layouts »
10 jQuery Plugins for Easier Google Map Installation »
25 Tutorials and Resources for Learning jQuery UI »
Creating a Web Development Environment using Google Chrome Extensions »
CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes »
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
50 Useful Tools and Generators for Easy CSS Development »
20+ Resources and Tutorials for Creative Forms using CSS »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
15 Amazing jQuery Image Gallery/Slideshow Plugins and Tutorials »


10 Shining Examples of Grid Based Web Design and Best Practices

The grid is not just a cool-sounding word (why sci-fi loves it), but it’s also an incredibly simple and effective principle for website design. By sticking to a grid, you can make your website look sexy and clean, have it be highly readable, scannable, and navigate-able for your visitors (increasing their chances of returning), and make it easier on yourself since you’re following an existing framework when designing your website. To help with design inspiration, you’ll even get 10 shining examples of grid-based website design.

grid

Before diving into the examples, you’ll get the best practices of effective grid-based website design. They are what was learned from looking at the 10 website designs – what makes a grid-based design effective. Of course, they’re not the only practices or rules, but they are a starting point if you’re just beginning to get into grid-based design.

Without further ado, here are the best grid-based design practices, followed by 10 shining examples of grid-based website design…

From analyzing the 10 shining grid-based website designs, here are 5 best practices learned in order to create an effective grid-based website design:

  • 1. Limit the number of elements – this is forehead-slapping obvious, for sure, but bears repeating: the more elements, the bigger the clutter, so keep it easy for you and your visitors by reducing as much as possible.
  • 2. Vary the sizes of each grid – monotony tires the eyes and makes nothing stand out, so include variety in the sizes of the individual grids (not so ones next to each other are varying, but the size of the individual grid boxes for each group of grids).
  • 3. Vary the arrangement of grid sections – similar to #2: avoid monotony by having some grids expand vertically, others horizontally, some groups be forming a square, others rectangles, and so forth.
  • 4. Don’t have each grid too close together (or too far apart) – the right spacing makes your website highly readable, navigate-able, and scannable, so feel it out when spacing the individual grid squares and grid sections next to each other (or ask others if it’s too close/far if in doubt).
  • 5. Have a single big square or rectangle for the featured website element – continuing from #2, have the featured website element—the one you want to draw immediate attention to—big one single big square or rectangle, as this will make it stand out from a grid section that’s a similar size and shape but is broken up by a lot of smaller grid squares.

Okay, now onto the good stuff…

365Mag

365Mag

The international electronic music magazine website manages to juggle a lot with a multi-column design, breaking each column down into square and rectangular grids. It’s an example of how a grid helps to keep a lot of content and information manageable for both the creator and the visitor.

Beatport

Beatport

The design for electronic music’s most popular online store is literally a futuristic user interface – like some console. A huge amount of information is kept manageable, techno-looking, and fun.

Bleep

Bleep

The design for Warp Records’ online music store is just like the music it stocks – slick yet quirky, futuristic yet classic, chin-stroking yet let-hair-down fun.

BPitch Control

BPitch Control

One of Berlin’s top electronic record labels puts the focus on the artists and their latest releases in their website’s design. Like Bleep, the design reflects the futuristic yet classic aesthetic. Gotta love vectors.

BT

BT

Another example of an effective artist site’s grid layout, this time for composer/electronic artist BT’s website. An awesome subtle touch: the “_BT” keeps things techno-futuristic without needing to resort to elaborate fonts or crazy visual flourishes.

Groove Armada

Groove Armada

Groove Armada’s artist website does an excellent job balancing the flashiness with a user-friendly interface and useful content.

Kompakt

Kompakt

The Cologne, Germany-based electronic record label and shop not only uses a clean grid to arrange the content, but cleverly—not to mention cheekily—uses the grid for the navigation menu as well, having each of the pages be a record on a square.

Nine Inch Nails

Nine Inch Nails

Yet another example of an artist’s website using a grid layout effectively. The black-and-rust design immediately shows that NIN is darker, cinematic, industrial music.

Plaid

Plaid

An effective website design with no menu items – nice. A no-nonsense 3 column layout gives you all you need to know about the duo: news/blog, when and where you can see them perform next, and what’s the latest stuff they released.

Warp

Warp

Warp Records’ home base balances the abstract and obtuse thanks to a grid-based design. Admittedly not the cleanest website out there, the design is featured here specifically for the aforementioned reason – it’s a good example of how a grid can be a foundation, keeping your website design grounded and easy-enough-to-navigate as you push the visual style to the experimental edges.

These 10 examples have hopefully shown the advantages to having a grid-based website design. When done effectively, it looks clean and is highly readable, navigate-able, and scannable – great for the visitor, who will now more likely return for more. And it makes adding future elements easy for you, since you simply add some more individual grid squares to a section, or add a new grid section below or next to an existing one. No need to figure out some weird spacing or whatnot.

No go forth, and use the power of the Matrix- er, power of the grid, to create your effective and clean website design.

Over to you: Do you like designing grid-based websites? What effective techniques and tips have you picked up? Any websites that are your favorite examples? Feel free to share in the comments section below.

You might also like…

A Review of Web Design Trends from 2010 →
The Trend of Minimalist Graphic Design →
How To Control Flow Within Your Web Designs →
Accessibility Principles for the Modern Designer →
Professional Structure and Documentation in Web Design →
Clear Your Mind to Focus on What Matters →
What the Future of Cloud Computing means for Web Designers →
Beginners Guide to Using the Power of Color in Web Design →
Understanding and the Meaning of Color Within Design →


[Expired] Competition: Three Membership Packs (worth $99) from IconDemon – Comment for a chance to win

For this weeks Christmas competition we have three 1 Year Membership Packs from Icondemon.com, valued at $99 for each. The membership pack allows for unlimited downloads of 5,300+ icons, covering 20 categories and in 10 varied styles.

All you have to do for the chance of winning one of the membership packs is leave a comment below telling us what you would like to do with the icons. The competition will run for the next 7 days (ending on Monday the 27th of December) with all winners will be selected completely at random.
Winners will be notified within a couple of days of the competition ending.

All about the IconDemon Membership Packs

Membership Packs from Icondemon.com
An IconDemon Membership gives you access to 5300+ (still growing) high quality Web Icons. Each icon you find has been created by a professional designer and have been designed to be used for different purposes like website development, application development, software development, etc. The Icons are available in .png format and sized at: 64×64 pixels, 80×80 pixels, 100×100 pixels and 128×128 pixels.

The homepage has been designed for easy navigation with the icons being classified by categories and by styles. You can use the navigation links to jump to business icons, Christmas icons, buddy icons, animal icons, computer icons, nature icons, vintage icons, 3d icons, glass icons, aqua icons, etc.

How to Enter

All you have to do for the chance of winning one of the membership packs is leave a comment below telling us what you would like to do with the icons. The competition will run for the next 7 days (ending on Monday the 27th of December) with all winners will be selected completely at random.
Winners will be notified within a couple of days of the competition ending.


An Introduction to HTML Prototyping

Since starting work as a web designer I have always, and will always obsess over improving my project workflow, my own design pattern if you will. Never afraid to make a couple of wrong turns along the way, my intellectual pursuit has seen me produce wireframes in Photoshop, sketch them out in meticulous detail, and not so meticulous detail, test-drive prototyping software Axure and Omnigraffle and even…gulp… completely bypassed any formal ‘pre-production’ process. As you can imagine, the results were spectacular.

And then there was the HTML prototype.

Short of living in a cave for the best part of a decade, you will have undoubtedly stumbled across this technique before. An article from January 2003 on Boxes and Arrows is one of the first times it was really exposed to the web design community, and the principles of the article are still valid today.

The rise in popularity of the HTML prototype in more recent years is partly the responsibility of a witch-hunt that has served to oust the ‘web designers’ who can’t code their own designs and shone a spotlight in the faces of those who brand themselves UX Professionals.

HTML Prototype

To summaries, these days you’ve got to bring a lot more to the table if you expect to stay competitive. And it is the embodiment of this more diverse skill set that has lead so many web designers, disillusioned with a less-than-optimal workflow, into the loving embrace of the HTML prototype.

Peer Pressure

If you find that your sketches work perfectly for you – Great. If you’re a whizz with Omnigraffle – fantastic! You should only start creating HTML prototypes when it feels natural and logical for you to do so. Don’t integrate them into your workflow just because everyone else is, no matter how desperate you are to join in. I started using them because I got more proficient at hand-coding my designs. I looked at the pitfalls of the various prototyping methods I had tried, and found that creating my prototypes in HTML meant that I could have my cake and eat it too. I could take the things I liked about these pre-production methods and improve the things I didn’t. But I never bowed to the pressure of the community. I needed to arrive via my own conclusions.

The HTML prototype exposed usability issues straight away and avoided natural omissions that are often made when wireframing.

The process, as a whole, was becoming less time consuming because small changes weren’t taking hours to rectify and the code was completely re-usable when it came to the production stage.

It also allowed me to perform a reasonable level of testing. For example, seeing how adding more content would affect the page, and then making design considerations for those scenarios.

But most importantly it showed the client exactly what they would get. The HTML prototype is a perfect tool for emotionally detaching the client from any crazy aesthetic they may have cooked up in their head. It forces them to think objectively about the purpose of the website and the expectations of the user. It also creates a definitive point of sign off, where you can say to the client – this is what you are going to get for your money. Anything else might costs you.

Show and Tell

My design process starts by listing out the information, actions and user expectations of the various pages. This relies heavily on clear and direct communication with the client in addition to some careful research.

Once I have done this I will group the corresponding parts and prioritize these groups.

I then start to sketch, very crudely, until I have a well balanced, structured starting point. I also, at this stage, begin considering the semantic structure. (Is this a section or an article? – you know, that old chestnut).

HTML Prototype

Now it’s time crack open Coda and start building my prototype with HTML and CSS. I create the code exactly as I would if I were building the completed front-end of the site, avoiding any short-cuts. I often end up tweaking things once I’ve actually got them working. I’ll move things around to balance them and iron out the user experience until I am happy enough with the prototype to show it to the client.

How much detail you choose to go into with your prototype is completely up to you. The more detail – the longer it will take. The less detail – the more chance you have of running into problems when you come to build it. But one thing you should always bear in mind is that HTML prototypes are butt ugly. There’s no need to make them any less attractive than they already are. For this reason I generally build mine to a grid, especially if the site wants to transition gracefully across different view-ports (responsive web-design). I won’t, however bother with any colour or typography considerations which I know a few people will.

HTML Prototype

The final stage is to show the working prototype to the client, collect their feedback and make any necessary alterations. Explaining the purpose of the wireframe to the client and managing their expectations is essential, and is best done either over the phone or face-to-face. Telling them that
“A prototype is a rudimentary version of something designed to exhibit both form and function” probably isn’t your best line of attack, so remember who you’re talking to and tailor your explanation accordingly.

Sigh.

Make a coffee.

Queue a good few hours worth of unobtrusive dance music on Spotify.

You may now design.

So there you have it, my HTML Prototyping Handbook for Web Designers. In truth it’s more of a pamphlet, but I hope there’s enough here to inform your decision if you are interested in changing your work flow. Whether you’ve used the same technique for years, or just a couple of weeks, don’t be afraid to challenge it every once in a while, if only in the name of pursuing perfection, no-matter how unobtainable it may seem.

You might also like…

10 Completely Free Wireframe and Mockup Applications →
A Collection of Useful Web Design Wireframing Resources →
A Collection of Printable Web Browser Sketching and Wireframe Templates →
15 Javascript Web UI Libraries, Frameworks and Toolkits →
25 UI Inspiration and Design Pattern Resources →
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices →
50 Useful Tools and Generators for Easy CSS Development →
20+ Resources and Tutorials for Creative Forms using CSS →
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials →