Noupe

Web Design Trends: Testimonials Design

2009-11-16T02:22:31Z

Testimonials from happy clients are an important part of any service business’s website, lending trustworthiness and experience to a business. Showing those testimonials in their best light is important, as you want visitors to see them without allowing them to dominate your site’s design.

One great way to figure out how to design the testimonials on your own projects is to look at how others are doing it. There are five predominant trends in testimonial design: speech bubbles, quotation marks, images or icons, minimalism, and video. Read on for information about and examples of each, and some bonus best practices at the end.

1. Speech Bubbles

Speech bubbles create an informal, friendly atmosphere in website design. Some sites use them to surround the entire testimonial, while others might use them around an image or as an icon. In any case, they immediately set apart the text or image inside, and make it recognizable as a quote from someone.

2. Quotation Marks

Quotation marks are another way to indicate that nearby text is something someone said, and are a bit more formal than speech bubbles. They’re more appropriate for corporate sites when done in a traditional font, though using funkier fonts can make them look informal and fresh.

3. Images, Icons, or Other Graphic Elements

Displaying an image next to each testimonial is a popular trend in testimonial design. The image could be a photo of the person who gave the feedback, the logo of the company the work was completed for, or an icon or other graphic element that sets the text apart from that around it.

4. Minimalist

A lot of sites display their testimonials using a minimalist style, usually with plain text, often italic, set near other text blocks of similar shape and size. This is the most subtle method of displaying testimonials, and works best on a site that has a minimalist design, otherwise the testimonials can get lost on the page.

5. Video

Video testimonials are a fairly new trend, and make a lot of sense for sites catering to tech-savvy clients. Video testimonials add another layer of trust that straight text doesn’t have; people will naturally trust hearing and seeing someone vouch for a product or service — rather than just reading about it. After all, as far as the visitor is concerned, your testimonials could be fabricated. Video is a lot harder to fake.

5 Best Practices in Testimonial Design

Integrating testimonials in your website design follows the same rules as integrating virtually any other text- or image-based content. But there are additional things to remember when adding a testimonial section to a website.

Adhere to the rules of good typography.
There are plenty of articles that offer tips for improving the typography in your website designs. Pay attention to them as you would for any other element on your site.

Make your testimonials stand out.
Don’t just put a couple testimonials on your about page or in your footer; do something to make them stand out and grab people’s attention without cluttering your design. You want your potential customers to see what your happy customers are saying. You can accomplish this through color, icons, or through prominent placement on your pages.

Correct grammar and spelling.
Although you wouldn’t make content changes, it’s perfectly acceptable to correct any grammar or spelling errors in testimonials given to you by your clients. This will ensure the testimonials look and sound professional.

You don’t have to use the entire testimonial.
Nothing says you have to quote an entire testimonial on your site. While being careful not to alter the overall impression the testimonial gives, it’s often preferable to shorten a lengthy message. The proper way to do this is by only quoting one or two lines, in context, that show your business in its strongest light.

Always ask for permission to use a testimonial.
In many locations around the world, you’ll legally need permission to use a testimonial from a client. Even if you don’t need it legally, it’s the polite thing to do. Most satisfied customers will be happy (and even honored) to let you use what they’ve said about your company to promote yourself. And especially ask permission if you want to use a photo or the logo of a client, or if you want to include their name and company along with the quote. After all, you want to keep your happy customers happy!

Further Resources

Showcase of Testimonials in Web Design
A gallery of great testimonial design from Vandelay Design Blog.

(ll)

The Ultimate Ugly Showcase of Current Government Websites

2009-11-13T19:44:15Z

By Callum Chapman

Something a little different today: a showcase of government websites. The biggest difference between this showcase and others you see here at Noupe is obvious; the majority of the web ‘designs’ (if you can call them that) in this showcase are tremendously awful and poorly coded. And, well, let’s be honest here: butt ugly!

So, what is it all of these governments don’t quite understand? Someone is going to have to help me out here! Some of them say they are ‘Optimized for Internet Explorer 6 and Firefox 1.0′. Firefox 1.0?! How many years ago was that?

Having very out-dated websites representing an entire country can’t be a good thing – at all. They are difficult to use, the text is usually difficult to read, they have ridiculously slow loading speeds (depending on the country, of course), some of them are so bad they hurt your eyes.

To top the above points off, if you happen to be looking for one small piece of information (which you most probably are), it could take you hours on end of waiting, clicking, more waiting, napping, more clicking… until you’re finally presented with a ‘Server not found’ error message! If I was looking at moving to a country and I got a server not found message, I think I would be put right off on the spot!

Bangladesh, Costa Rica and Papua New Guinea are just a few of the culprits of the dreaded non-loading pages, Russia is one of the many (far too many!) design offenders that use horrific drop-shadows. Also, the body copy font size is usually way too small for comfortable reading (Belarus).

However there are a couple that stand out from the rest – how many of you can tell me which ones they are?

Asia

Afghanistan

Afghanistans website manages to incorporate a workin RSS Feed but not much else. What’s with the lowered opacity image?!

Bangladesh

Well, this site was loading for 10 minutes and, as you can see, didn’t get very far!

Cambodia

Cambodias government website has a great selection of Related Sites, but its 90s style color scheme and poorly coded structure makes it yet another terrible looking website.

China

China has half managed a decent website for their government, a suitable and easy to read color scheme, a nice bold heading and an RSS Feed!

Hong Kong

Hong Kong has a better idea then a lot of other sites here.

India

India has incorporated some nifty Web 2.0 highlight effects in with their 90’s style layout. The spotlight section doesn’t quite hit the spot though!

Indonesia

Indonesias government website looks a little like several different images merged together to create a banner style header with almost impossible to read text.

Iran

Iran makes great use of an iFrame style text box to display the ‘Last News’ in a scrollbox even though they have plenty of space left directly beneath it.

Iraq

Iraq uses some terrible gradients and drop shadows on their aligned header type. For some unknown reason, the links on the right aren’t doing what they’re told either – but on second thought I highly doubt they were told in the first place.

Israel

Israels government has done their website pretty well compared to others, don’t quite understand what the two dots off the ‘v’ in their logo are for though!

Japan

Japan has a very calm, simple and informative design.

Kazakhstan

Kazakhstan has a better knowledge of color schemes and has come up with a half decent advertisment in the bottom left. Something still isn’t quite right though… and the calendar obviously serves a great purpose for those who were about to ask!

Korea

Korea has managed to pick up some great internet talk when creating their government website and decided to call it an e-Goverment… that explains it all.

Malaysia

Malaysia has incorporated the option to change text size and color with their website. The designers should sort out the spacing between the thumnbail images and bullet points.

Maldives

The Maldive’s government website seems to have the content randomly placed on the page. And off the record: guys, letter-spacing isn’t just used for fun!

Pakistan

Pakistans ‘official web gateway to the Government’ uses lots of Photoshop feathering, gradients and drop shadows with some groovy dotted tables!

Saudi Arabia

You can’t get much worse than Saudi Arabia’s government website, it’s overcrowded and uses bevel and emboss; a user’s nightmare!

Singapore

Singapore hasn’t done too badly with their government website, they’ve incorporated a pretty stylish photo of the city center in both daylight and nightlight; we are not too sure about the blending it into the rest of the page via feathering, though.

Thailand

Thailand’s government website can’t get much simpler, it has various gradients and feather objects with outer glows to produce an attractive design – someone, please remove these terrible HTML borders!

Uzbekistan

A very clean and well-commented (see the source code) design from Uzbekistan. The site uses many icons and a very light color scheme that makes it easy to read the text. However, on some pages there are certainly too much whitespace. Nice surprise: that’s certainly not what we expected from Uzbekistan.

Vietnam

Vietnam has combined various warm colors to make a slightly over-the-top color scheme to use on their government website. The alignments are all wrong and you can see the table borders… should they even be using tables?!

Europe

Austria

Austria, compared to other websites, is on the right track. There are no visible HTML tables and the navigation menu down the left side of the page is half decent.

Belgium

Well done, Belgium! I actually quite like this government website – they’ve combined a sleek color scheme with plenty of important information and stylish icons.

Belarus

Hey, Belgium had a good government website, you can’t really expect much more, can you? We’re back to normal with Belarus’ website; table layout, small body copy size, not enough white space and a bit messed up site. However, the page does contain an RSS feed.

Bulgaria

Bulgaria’s government website’s source code is full of the legendary HTML table tags, and what for? Empty tables! Excellent!

Croatia

I admit, Croatia’s website doesn’t look great, but it looks a damn lot better than other government websites in this showcase. They’ve managed to include some headers, search options and a half decent menu!

Cyprus

Cyprus’ government website makes it feel like Autumn all year round; of course it’s not true, so I’m not quite sure what the leaves are there for!

Czech Republic

Czech Republic are in a similar position as Croatia, their site is much better but not quite nice. If they improved some horrible type and updated a few things to make it a little more modern, it wouldn’t be half bad. Nothing compared to what we’re used to, though!

Denmark

Denmark, I’m impressed! They’ve managed a pretty good looking color scheme, a nice navigation menu and have even chucked in some nice photography in there to show off their country!

Finland

I hate to say it Finland, but to me, the website doesn’t look finished. There are gaps between menu items, and unfinished edges on areas that display the main content.

France

France’s site honestly did damage my eyes. Purple and red might work well in some very rare cases, but it really doesn’t here. A uneven menu on a government website? Hmm… Looks like someone hacked at this design with a very sharp machete.

Germany

Germany has a solid, clean and sharp design with probably way too many navigation options. I have to admit I don’t really know where to start. There seem to be some random blocks that don’t align well with each other.

Greece

Greek ‘e-Government’ website uses some really strange shapes and some very, very out of focus stock photos. The seperators used in the navigation menu seem to be random lengths, or is that just me? The site looks a bit more like an online-shop than a government website.

Hungary

Hungary’s government website isn’t something I’d usually like, but compared to some others on this list it’s actually been put together reasonably well. They’ve even managed to incorporate seamless patterns – now that’s the spirit!

Iceland

Iceland, Iceland, Iceland. Oh why have you given us the option to make your website worse via a user styles link? Hey, nice drop shadow on the Information advertisement!

Ireland

Ireland can’t get much simpler with their government website, they seem to have thrown a couple of images, some tables and some text together to form a very outdated website.

Italy

Italy, with so many others in this showcase, also has a very outdated website. They do however have an RSS feed, although being reminded old HTML pages like that still exist day in day out would make me feel quite depressed!

Latvia

Sure, Latvia doesn’t have a great looking site, but it does a much, much better job than some other sites in this showcase. They even have a map in their sidebar!

Lithuania

Lithuania’s government website uses horrible colors; a combination of red, green, brown, yellow and blue – and none of them are particulary nice shades!

Luxembourg

Luxembourg’s website feels a little incomplete and like the web developer ran out of time to work on the project. The buttons in the right sidebar (that aren’t actually buttons – all they do is display a URL and telephone number!) are on a white background – why did they not just use a transparent PNG?

Netherlands

Netherlands have done a better job than most on this list. They’ve gone with a simple layout with quite a nice sleek style – I think this style works really well as a government website. Nice, clean and simple!

Norway

Again, Norway’s website isn’t great, but it looks clean and modern.

Poland

Well I have to say, out of all the countries in this showcase, Poland was one of the ones I was expecting to have a poor website, but instead they have one of the best on this list! They use some lovely cloud images, a great creative logo that fits in well with the web design (or the other way around!), lots of nice colors, some great photography and overall a clean and modern design. This one could quite easily make it into a beautiful showcase!

Portugal

Portugal hasn’t done too badly either! Their website is aligned well, has a nice color scheme and they even use Twitter which they managed to incorporate into their design! However, things do seem a bit cramped – maybe they need a little more white space!

Romania

All the better sites on this list are coming at once! Romania have managed to incorporate RSS icons into their web design; however the upper half of the design does feel a little overloaded with blue!

Russia

I hope the design of Russia’s government website doesn’t have a degree in anything to do with design or art, or any kind of qualification for that matter. This is just a nightmare; bevel & emboss, ugly drop shadows and awful glows. Something tells me that the site was designed back in 90s. Eurggh!

Slovakia

Slovakia’s website is nice and very simple – they’ve managed to lay it out pretty well and have used a matching color scheme. Not bad, not bad at all!

Spain

Oh dear! Spain uses some huge drop shadow effects on their graphics, but the overall look and feel is not that bad. The line height could be increased and the design could use some padding.

Sweden

Swerden has done a nice job on their government’s website. They used an attention grabbing color scheme which actually draws your eyes to different areas (such as the red, blue and green). The only thing I’m not too sure about is the dark red/brown to red gradient used as a header background at the top of the left sidebar.

Switzerland

Switzerlands website is a bit overcrowded and the alignment seems to be incorrect. Overall the design appears to be simple and the navigation is more or less OK. The images on the left hand side seem to be underlined!

United Kingdom

United Kingdom’s government website isn’t too bad – it’s aligned pretty well, has enough whitespace and is relatively easy to read. I’m not quite sure why they use an orange color scheme, though? Notice that this website doesn’t have a UK flag anywhere – that’s a bit odd for a government website.

Ukraine

It sure would be boring searching Ukraine’s government website for a vital piece of information! Everything seems to look the same and nothing really stands out from anything else on the page! Also, the small font size makes the page difficult to read.

Africa

Cameroon

Cameroon’s government website is over-crowded. It uses various different colors in a desperate attempt to grab your attention but simply doesn’t work.

Egypt

Egypt’s government website could have been one of the nicer ones in this showcase, but it’s poorly coded and seems to have randomly placed images.

Ethiopia

Ethiopia’s government website uses several shades of blue which don’t quite go with their green, yellow and red flag despite the blue circle.

Kenya

The biggest fault with Kenya’s government website is there poor use of justified text alignment. They also use a crazy color palette to catch your attention which again doesn’t work!

Madagascar

Madagascar’s government website could have possibly been influential in 1999 with its hover image buttons and patterned background.

South Africa

Possibly one of the worst on this list; there seems to be random blocks of color aswell as really ugly tables. Please do remember that this website is best viewed using a 800×600 resolution in IE4!

Tunisia

Tunisia uses a terrible color scheme of light cyan and mid-blue mixed with a little brown and red. Hey, at least they have an RSS Feed!

Uganda

Uganda’s government website is one of the best so far; although I’m not quite sure why they’ve used that horrible pastel yellow and white gradient under the interact heading.

Zimbabwe

You’ll see from the screenshot that Zimbabwe’s government website doesn’t look like it’s finished loading, that’s because after 5 long, long minutes, I had enough and decided to screenshot anyway!

North America

Canada

Canada is yet another culprit of the outdated glow and feathered banners. That’s a pretty random color scheme they’re using on their left sidebar, too!

Mexico

Woah, now this is a pretty bad design. Everything seems to be everywhere and it’s all right in your face, I don’t know what to look at! They have managed to keep up to date a little though and have a Facebook and Twitter page!

United States

After looking at USA’s Drupal powered Whitehouse website, their actual government website is a huge letdown, it uses dated HTML and awful header graphics.

Central America

Costa Rica

Well, having a Server not found message come up when visiting a governments website would certainly make me change my plans (if I had any) to move there!

Guatemala

Guatemala’s government website is highly focused on the leader of the Guatemala’s government, having many photos of him throughout the page. The site seems to have way too many design elements that are all fighting for attention making the site difficult to scan.

Nicaragua

Nicaragua’s government website decided to stick to a blog layout to display its news and updates. That’s an unusual choice. Can you find the search box on the page?

Bahamas

Bahamas’ goverment website with a striking color scheme, a news ticker and a bit weird <more>-links. The page has a copyright statement with the year 2005 in the footer.

Barbados

Barbados’ government website is a typical 90’s HTML website – random colors, drop shadowed/gradient headers and some real ugly graphics!

Cuba

Cuba tried to do ’something special’ with their government website by including a background image – it’s a shame they did it completely wrong and left far too much white space!

Dominican Republic

(Updated)Well, that’s a real surprise: the government website of the Dominican Republic is clean and nice and uses a layout which is common for newspapers and online magazines. However, the page seems to have way too many design elements at once – a bit of padding would be very helpful here.

Jamaica

Jamaica’s government website isn’t too bad – some things are a little big in my opinion, such as the header gradients and the type used under the ‘news’ section, but other than that it’s not bad at all!

Puerto Rico

The header used in Puerto Rico’s website design is quite nice; a cute photograph of a parrot and a case where a drop shadow on the header actually works reasonably well. Any lower on the page though and things become a little dated with terrifying borders and horrible color schemes.

Saint Lucia

Saint Lucia’s website reminds me of the first website I made when I was about 7 years old using Yahoo! Geocities. Now that’s what I call old-fashioned!

Trinidad and Tobago

Trinidad and Tobago’s site isn’t too bad – it’s a little old fashioned but they have managed to draw my attention to different sections of the design by using a reasonable color scheme – unlike most others!

South America

Argentina

Argentina played it safe when designing their website. They’ve used a simple color scheme and an easy to read layout.

Bolivia

Bolivia’s government website is a complete mess to put it nicely! The header is awful, and everything graphic makes me cringe!

Brazil

Brazilian website kind of reminds me of a dated online shop with it’s multiple navigation menus and drop down lists – or is that just me?

Chile

Now this one made me laugh the most. Chile is kind enough to put a message at the bottom of their website ‘design’ stating that it has been Optimized for IE6 & Firefox 1.0 – yay!

Peru

Peru’s website is a tiddy bit dated but it’s better than a few in this pretty terrible showcase! I think they need to rework the structure of the main content area.

Uruguay

I can’t bare to look at Uruguay’s government website, just look at them terrible black and white gradients used down the left side of the design – ahhh!

Venezuela

Venezuela, for a country a lot of people haven’t heard much about, did a pretty good job with their design. Everything has ben laid out quite nicely but they need to improve that terrible text layout in their main content area!

Oceania

Australia

Australia has done a great job with their government website; it’s simple, stylish and isn’t over the top. In other words, it does what it’s suppose to do well, and that’s a good thing!

Fiji

I’m not quite sure what happened to Fiji’s ‘online portal’ but the alignment of the main content seems to be a little (or a lot) out of place!

New Zealand

New Zealand, like Australia, has done a great job. They use a simple and sleek design that serves easy to find and read content – just what the user needs!

Papua New Guinea

When visiting Papua New Guinea’s website I didn’t even get a ‘Server not found’ error message – instead I got a broken URL/image error message, that’s nice of them!

Solomon Islands

Solomon Islands, as can be seen from the screenshot, is a Drupal powered website. It looks like it could have been a promising website, if only the rest of it was actually there! Maybe they forgot to finish it?

Take a look at some of these beautiful showcases!

12 Tips for Creating a Great Portfolio Site
Twelve tips for creating a great portfolio site, no matter what you particular artist field is!

20 Vital Techniques & Best Practices for Effective Web Design
Creating beautiful and unique websites is getting harder everyday – this post offers 20 excellent techniques you can incorporate in to your own designs.

Showcase of Beautiful Textured Web Designs
Grunge design has become more popular and has been put to greater use in recent years. This post showcases a huge collection of some of the best web designs that use texture.

50 Beautiful and Creative Blog Designs
This post showcases 50 fresh, beautiful, inventive and, hopefully, inspiring blog designs.

Designing “Coming Soon” Pages
A perfect post showcasing some great “coming soon” pages, as well as a great explanation to why you’ll benefit from it!

About the author

Callum Chapman is a freelance graphic designer. He is the creative blogger behind Circlebox Blog, a design related blog offering articles, inspiration, tutorials and free, high-resolution textures. Drop him a line at Twitter!

20 Free Mac Apps For Web Designer’s Toolkit

2009-11-12T17:57:42Z

Professional web designers on the Mac platform rely on commercial heavy-hitters like Adobe Photoshop, Illustrator, Fireworks, and InDesign for their graphic design needs. And when it’s time to slice and dice, some depend on the excellent Dreamweaver CS4 for WYSIWYG design/development; while many Mac code jockeys swear only by editors like Coda, BBEdit or TextMate. Others prefer to mix, match or blend.

Designers also rely on various supporting apps to accomplish every day jobs like FTP uploading, cross-browser testing (important if you’re designing/developing on a Mac platform only), screen-shot snapping, pixel measuring, and the like.

While many of these programs are slick, they also of course cost … money. Which brings us to free apps for the Mac crowd. Which are the best compared to their commercial counterparts? Or are simply great apps in a league all their own? Put away that credit card for now and let’s find out!

Free Photoshop alternative

GIMP (Mac)
In a nutshell, GIMP provides designers with the power to accomplish almost any task that Adobe Photoshop is used for. Mac users familiar with typical Cocoa apps will find GIMP’s interface and menu system very “un-Mac” like (requiring the X Window System, commonly called X11), but if you soldier through you’ll find a powerful image editing program with all the fixins – advanced multi-layering, text and image effects, pro-level image manipulation, and a full range of design tools. High quality plug-ins are freely available to extend the app, including the ability to use some native Photoshop ones.

Also check out:

Seashore
Based on GIMP, Seashore is a pure cocoa app which makes it very OS X friendly. A range of tools for gradients, textures, layers, and drawing are found in Seashore. However, the program lacks many of GIMPs more powerful features so it’s not exactly a GIMP replacement either.

LiveQuartz
Sporting a sleek Mac interface, LiveQuartz describes itself as a “simple and powerful free photo editor for Leopard.” It does two thing very well: layers and filters. Basic drawing tools are also included but, as with Seashore, it’s not billed as a Photoshop replacement either. In the hands of the right designer, however, fairly sophisticated designs can be created with this nice app, which is also fun to use.

Free Illustrator alternative

InkScape (Mac)
The open-source InkScape, another Mac application that requires X11, is a viable alternative to Adobe Illustrator with its ability to create and edit graphics in scalable vector format.

AI users will feel at home using InkScape with options like layer control, gradients, connector path control/manipulation, various brushes (including calligraphy), type effects, masking, EPS exporting, a 3-D shape tool, object tweaking/sculpting, and even a diagram connector tool useful for a variety of purposes, like creating site maps. Depending on the complexity of your design, files can be exported from InkScape and into Illustrator and vice-versa.

Free Dreamweaver alternative

KompoZer (Mac)
Featuring WYSIWYG website creation and robust CSS editing, KompoZer is a mature, open-source alternative similar to Adobe Dreamweaver on the Mac, and has many of the same bells and whistles, too.

Although it can’t top Dreamweaver’s rich offerings, KompoZer offers full CSS support, code viewing/editing, tabbed views, FTP site management, a color picker, clickable hierarchical properties view bar for code isolation, split views, live preview, and much more. There is even the option to call W3C’s HTML validator to check for valid markup.

KompoZer is built on the NVU architecture, but is less buggy and more feature-rich than NVU since development on that project was stopped and has been replaced by KompoZer.

Also check out:

SeaMonkey
For creating very simple web pages.

Amaya
A project started by W3C, Amaya aims to be a WYSIWYG editor for standards compliant web developers, but lacks KompoZer’s power. It also claims to be a web browser, but will likely not pass muster for most people’s normal web browsing activities.

Free InDesign alternative

Scribus (Mac)
This open-source page layout program for the Mac, similar to Adobe InDesign, is geared towards print professionals in creating business cards, ads, magazines, newsletters, brochures, posters, signs, or just about any other kind of printed material.

Although the application doesn’t allow for measurements in pixels, web designers can still take advantage of Scribus’s multi-page capabilities, master pages, and precise typographic control for quickly generating rough ideas for web banners, buttons, or even website mockups faster than you can say Photoshop! The ability to create PDFs within Scribus (including interactive ones) is another plus. Image export options include PNG, EPS, and PDF.

Free Mac text/coding editors

TextWrangler (Mac)
A powerful general purpose text/code editor for OS X, TextWrangler has many of the same pro features found in commercial editors, such as multi-file search and replace, open/save in various line-ending formats and character sets, find/compare/merge file differences, hard/soft text wrap views, FTP/SFTP support, tabbed viewing, and more.

Simple CSS (Mac)
Simple CSS sports a Mac-friendly interface that helps you point and click your way to building CSS stylesheets. One column allows for style creation, and a main window gives you complete control over fonts, displays, borders, and box dimensions. Multiple projects can be opened simultaneously, and styles are displayed via a WYSIWYG pane. Finalized CSS code can then be previewed and exported.

Firebug (Mac Firefox plug-in)
A must-have Firefox extension for web developers, Firebug offers an impressive array of features for live in-browser code viewing, testing, editing, and debugging of HTML, CSS, and Javascript. Firebug easily overrides HTML and CSS on any webpage for live previewing in Firefox – saving you precious design/development time. A DOM inspector adds to the extension’s impressive capabilities.

Free cross-browser and server-testing apps

VirtualBox (Mac)
VirtualBox sets up a professional virtualization environment on your Mac, similar to Parallels or Fusion, allowing you to install Windows XP, Vista, Windows 7 and others. But if you just need a Windows environment for browser testing on your Mac, the good news is that you don’t even need a licensed copy of Windows to run IE6, IE7, or IE8. VirtualBox can be configured to run all three browsers by installing the VirtualPC disc images (for free) directly from Microsoft.

Adobe BrowserLab (Mac/PC)
This free online screenshot service (still in beta) shows you what your latest web design will look like on the PC side in IE’s 6, 7, 8 and Firefox; and on the Mac side in Safari and Firefox. Although it only takes static screenshots, BrowserLab is useful for catching pesky CSS layout issues, especially with the difficult-to-justify-installing-but-still-important IE6.

There are a number of online browser-testing screenshot services out there already, but BroswerLab is different because load time is much faster than the others and the interface is much better. For Dreamweaver users there’s a slick plug-in that allows you to preview the page you’re working on at the touch of a button. Browser screens can be compared side-by-side, and an interesting Onion Skin View can help idenitify layout quirks at a glance.

MAMP
Although OS X allows you to run a full-blown Apache server out of the box, setting up a properly configured PHP server on your Mac can sometimes be a frustrating endeavor to get just right. Enter MAMP, which stands for “Macintosh, Apache, MYSQL, and PHP.”

Everything you need to run a PHP server is included, complete with phpMyAdmin, SQLiteManager, and a nice control interface to easily start and stop the server. MAMP will not interfere with other Apache installs or modify them in any way. It’s all self-contained within the application folder and can easily be removed. An OS X Dashboard Widget gives you start/stop server controls.

Free Mac FTP program

Cyberduck (Mac)
For Mac users the robust and stable FTP browser/client, Cyberduck, is an open-source must-have for tasks requiring FTP, SFTP, WebDav, Mosso Cloud Files, and Amazon S3 server interaction. Its clean and straightforward operation allows you to quickly upload and download files without the interface clutter found in some FTP programs.

Features include file synchronization, access to file permissions, bookmarks, and integration with various text editors to edit files directly. OS X technologies like Spotlight, Bonjour, Keychain, and even Quicklook are all supported. An included OS X Dashboard widget allows for quick access to servers. Various localizations are also available.

Also check out:

FileZilla
The interface is definitely not Mac-like in elegance, and it doesn’t make good use of integrated Mac technologies like Cyberduck does, but those looking for a dual-pane FTP browser will find it in FileZilla.

Free supporting apps for designers on the Mac

Skitch (Mac)
If a picture is worth a thousand words, then the ability to annotate a picture may be worth even more. Beyond your average screenshot app, Skitch combines the ability to capture anything on-screen with drawing and annotation tools.

With Skitch, for instance, you can quickly capture a design you’re working on and mark it up with non-destructive colored arrows, text, highlights, boxes, and lines – helpful for illustrating concepts not easily conveyed using words alone. Or you could use Skitch to create a series of screenshot tutorials.

Screenshots with our without edits are managed in the app’s history and can be revived later for further editing; or simply drag and drop to the desktop or directly into any application that supports images (like Mail, TextEdit, or any graphic app). You can even upload your screenshot creations to a free skitch.com account or to your own FTP server by simply selecting the “webpost” button. Since Skitch is in beta, rumor has it that the developers will start charging at some point, however this fact is not entirely known and the app has been free of charge for some time now.

Paparazzi! (Mac)
Have you ever been frustrated by the seemingly simple process of capturing a webpage screenshot that scrolled beyond your screen area? Instead of taking multiple screenshots and then pasting them together to form a single file, Paparazzi! allows you to capture an entire page from top to bottom and then export it as a single file into PNG, PDF, JPEG, or TIFF format. Optional cropping parameters can be set, and different screen resolutions can be tailored to fit your needs. A handy timed-delay snapshot function can also be adjusted.

Imagetricks (Mac)
This handy little app claims to “reveal the hidden power of your images,” and that’s exactly what it does. The free version of Imagetricks boasts a myriad of popular Photoshop-like filters and effects. Various masking effects can also be applied to allow for even more options. Modified images can then be exported in any of the major web file formats for insertion into your next layout.

Pixius (Mac)
This Adobe AIR application gives you a slick tool for measuring anything on-screen in pixels. Easy resize handles give you quick measurements in height and width, and the multi-screen mode allows you to move the tool back and forth between screens for dual-monitor users.

A light-dimming feature darkens the background but leaves your focus area lit. You can also pick between three skins for the app, two of which emulate browser chrome for IE and Safari Mac, respectively; handy for quickly checking screen sizes during design-time without taking your design into a browser. Screenshot functionality is slated for a future release.

Also check out:

PixelStick
Uses the Cartesian coordinate system for exacting on-screen measurements.

Calipers This Adobe AIR app floats above all other applications. Future release plans include custom skins, alpha transparency, and customizable blade colors.

Colors (Mac)
Colors lets you sample color values anywhere on-screen. You can then copy and paste the RGB values into any application. Simple, fast-loading, and very handy for your design toolbox.

Also check out:

DigitalColor Meter
Many of us forget that Apple already provides a free color-sampling tool. Just look inside your Utilities folder! Formats include RGB, YUV, and CIE.

Xee (Mac)
A lightweight and ultra-fast image viewer, Xee can replace OS X’s Preview while also offering designers additional power options like the ability to move, copy, or rename files while viewing. Opening an image within a folder containing other images allows you to browse all the images in that folder with keyboard shortcuts and forward/back commands, or via the automatic slideshow. You can even browse images inside archives. File type, EXIF info, creator, and color space are displayed front and center. JPEG lossless is supported.

Integrity (Mac)
Moving, modifying, or deleting file names is a common practice for web developers, but it can be all too easy to incorrectly re-link files during the process, too. Conversely, outgoing links on your site can change unexpectedly. Integrity removes the tedium of manual link-checking by quickly crawling internal and external links on your site and reporting broken ones.

MindNode (Mac)
This dead-simple open-source “mind mapping” program is a great way to quickly explore creative concepts of all shapes and sizes, and also works for site map layouts during website planning. It sports a lean interface and is especially handy when you want to get ideas down fast. MindNode lets you create multiple maps, and nodes remain connected to their respective maps, yet can be moved anywhere in the pasteboard area; which expands automatically to self-adjust. The free version lets you customize background color, node paths, and fonts – individually or in groupings. Export options include PNG, PDF, and HTML.

Conclusion

The number of quality web design apps on the Mac has grown along with the surge in popularity the platform has enjoyed in recent years. Finding decent free apps can still be a challenge, however, especially for graphic designers. Hopefully you’ve found a few on this list that are interesting to you. One caveat: the term “free,” used liberally throughout this article, should also be followed with “donation requested” kept in mind if a program is particularly useful to you and the author requests it. Please help support your Mac development community. Happy web designing!

About the author

Corrales Cachola is principal of Corrales Creative, a web and print design firm based in Portland, Oregon. On weekends he stays in shape by carrying CRT monitors and an Apple LaserWriter up and down flights of stairs. Follow him on Twitter and he’ll tell you all about it.

60 Dazzling Panorama And Vertorama Photos

2009-11-11T15:01:08Z

Our post here today is on panorama and interactive panorama photos. A panorama is any wide view of a physical space. Some digital cameras have features that help you to take multiples photos in sequence that can later be manipulated into a large panoramic image.

A true panoramic photo is a continuous scene of at least 110 degrees. Many panoramic photos are about the width of the field of human vision, while some go as wide as 360 degrees. Panorama photos can be classified as vertorama (vertical panorama), polar, planar or flat, cylindrical, equi-rectangular, and so on.

This post contains a huge collection of all different kinds of panorama and interactive panorama photos. We are sure you’ll like them.

Panorama And Vertorama Photos

HDR-Vertorama: ~.High Hopes.~
Palm Beach, Florida.

The Kometik
“This monster is an oil tanker docked in Halifax. It appears to be elevated at the bow while they are working on it (probably wouldn’t fit in our dry-dock!). Look at how small the guy who is working on it looks in comparison! I was trying to get a full profile shot of it, but it is too big for my wide-angle lens. I took a couple of shots and will try to stitch them into a panorama later.”

BBC Television Centre: 360 panorama
“This is a new version of a 360 I couldn’t quite make work before, taken with AutoStitch but put together using AutoPano Pro. I translated the equi-rectangular projection into a stereographic projection using the Flexify plug-in for Photoshop. The original 360 panorama used around 100 shots. It has also been tone-mapped using Photomatix to bring up some of the shadows.

In the corner
Lysefjorden and the Pulpit Rock. One photo, composed of four handheld HDRs of five exposures each, then merged in Photoshop.

Breakthrough
“Four images stitched together with handheld pano vertically. Later added manual bracket exposure by +/- 1 stop each, for a total of five images. Merged and tone-mapped with Photomatix and touched up further in CS4, particularly for shadows and highlights, color balance, curve and USM.”

Pasco Tower
Hay stacked up in Pasco, Washington. This is a vertorama, a total of six images (three exposures at the top and three at the bottom), blended with Photomatix for HDR then stitched together in Photoshop.

My Dam Story: HDR (vertorama and panorama)

Peggy’s Light

Wat Chiangman
Wat Chiangman, Chiang Mai, Thailand

Royal Mile, Edinburgh: Vertorama, no HDR

Prédio da Antiga Cervejaria Brahma

Sailing Under Skeletal Skies
“This cloud formation looked so much like spinal column and ribs… or is it just me? Either way, it made for a nice opportunity for another vertical panorama HDR image.” Howard Amon Park, Richland, Washington.

Locker room
HDR panorama, 2 Reihen, 3×3 Belichtungen.

180 degree vertical panorama

MonumenTaal: Vertorama, no HDR

Vøringsfossen panorama

King Harbor Vertorama 1221.
“Vertorama of the restaurant at the top of King Harbor in Redondo Beach at sunset. This was made from two nine-exposure HDRs, edited and tone-mapped in Photoshop Lightroom and Photomatix, then merged with final editing in Photoshop.” Brookville.

Where the old pier was
“An HDR panorama from the lagoon.”

Palau de les Arts Reina Sofia, Valencia
Nikon D80 18mm HDR stack of 12 exposures.

Vertical Panorama

Rowley Way
“Approximately 40 images merged in AutoStitch (I must get a wide-angle lens to reduce the number needed). Rowley Way, off Abbey Road, NW London. I’d like to try this again when the sky is a bit more interesting.”

Rouen cathedral panorama, France
“Panorama of the inside of Rouen Cathedral. I took 13 pictures with a Pentax K10d, stitched with Hugin, plus several hours of work in Photoshop (mainly to correct stitching errors, because this is a handheld panorama). Best viewed large.

Staples Center panorama
Home of the L.A. Lakers and four other Los Angeles sports teams. This was on the evening of a Depeche Mode concert. This panorama is two rows of eight images, the first I ever stitched. The post-production is still a bit sloppy.

Between Walls…

Norse Explorer
This is a statue of the explorer Leif Ericson in front of Hallgrímskirkja, in Reykjavík, Iceland. It was a gift from the United States in 1930. This is a vertical panorama image, taken with a total of six images, three differently exposed images at the top and three at the bottom; merged together as HDR in Photomatix, then stitched together by hand in Photoshop.

Precast Soldiers
Joostenberg Vlakte, South Africa.

Half Pipe, Cambará Tur: HDR vertorama

Twins, Vertorama Edition

Green Hallgrímskirkja

Molo Sanità: HDR virtual tour panorama

Move Aside Vertoramas…
“It’s panorama time. This is the view from the lower look-out point at the Makapuu lighthouse (Hawaii). This pano is made from four vertical shots of six exposures each. I’m not sure which I like better, verto or pano, but I’ll give you guys both so you can decide. Each frame is an HDR, tone-mapped from six exposures and blended with two of them. Then auto-stitched in CS3. I used curves, contrast, the highlight/dodge tool, unsharp and noise ninja. Oh, and I adjusted the lens distortion in CS3 to fix the curved horizon.”

Te Mata Strange Attractor
Panoramas within panoramas… starting with a 360×180 image of Te Mata Peak and orbiting out.

Untitled, in high-resolution HDR
Library of Congress in Washington, DC. This is a panoramic HDR built from ten single photos.

Old Aberdeen High Street: Portrait Photostitch
Canon 5D with 17-40 f4L portrait view. At f16, correct shutter speed is 15s – 17mm. Four images each with 3x, 2 stop +/- and one correct exposure. HDR’d and tone-mapped in Photomatix Pro and joined manually in Photoshop.

Berlin Olympic Stadium: Panorama HDR

Polar Panorama Photos

This section contains interesting polar panorama photos. Polar panoramas are also referred to as little planet, planet panoramas, 360 degree panorama, wee planets, tiny planets, polar panorama effect, and so on, but they all mean the same thing: photos edited with Photoshop’s Distort filter and Polar Coordinates (or in any other image editor).

Planet Brooklyn, Grand Army Plaza
Sam Rohn, Location Scout: Panoramic Photography, New York City

Planet Central Park, New York
“Picture taken in Central Park, NYC, from the bridge (don’t remember its name). I used a handheld Canon 400D and Sigma 8mm F3.5 fish-eye.”

water planet
Thirty exposed panoramas made from six HDR photos of five exposures each.

Horse Planet: Polar Panorama

Tubby Man

Planet Nagoya! TTI terminal… (HDR)

Planet IMAX

Square (or, rather, circle) in Copenhagen

Saint-Guénolé Church of Batz-sur-Mer: Small Planet

Interactive Panoramas

As the heading suggests, this section contains appealing interactive panoramas. Have a look at these photos, and you will be amazed. We have collected fully interactive 360 degree versions here. Just click on any of the images below.

Audubon Terrace, NYC

Tirtagangga
Tirtagangga (Holy Water of the Ganges, in Balinese) water garden was built in 1948 by the King of Karangasem, Anak Agung Anglurah Ketut Karangasem. This water garden was constructed in the unique Balinese and Chinese architectural styles.

Apple Store, Manhattan

Hall of Science, New York City
The Great Hall at the New York City Hall of Science, designed by architect Wallace K. Harrison. Originally built as part of the 1964 World’s Fair, it now houses a science museum.

Horseshoe Bend

Antelope Canyon

Hayden Planetarium, New York City
Originally built in 1935, the Hayden Planetarium was rebuilt in 2000 as part of the Rose Center for Earth and Space, itself a part of the American Museum of Natural History.

Colorado River Rafting: Elves Chasm, Grand Canyon

Chelsea Hotel, New York City

Zingst, Ostsee

Ice Skating in the Eiffel Tower: Eiffel Tower, Las Vegas

Creating an Old Collage Effect Poster
Amazing view above the clouds. Looking straight down to the world below.

Mountain Hiking

(al)

Ultimate Guide To Grid-Based Web Design: Techniques and Tools

2009-11-10T10:28:27Z

Grid-based layouts are generally more aesthetically pleasing and balanced than those not based on grids. While there are definitely great designs out there that don’t use a grid-based layout, they are more difficult to create and often end up falling into some sort of loose grid structure anyway. So why not just design based on a grid in the first place?

This post offers up a complete guide to designing with grids. There’s plenty of basic information here, as well as tons of links to more in-depth information on specific aspects of grid-based design from other sites. And to top it all off, we’ve compiled a showcase of excellent grid-based designs for inspiration.

The Basics of Grid Design

Virtually any website you design should be based on a grid. Grids lend a sense of structure to your site and improved usability for your visitors. And designing to a grid can simplify your design process and make you a more efficient designer. In a grid-based design, since the guides are already in place for you, your options are reduced, making it easier to decide on the width and height of different elements on your pages.

Basic Principles and Ideas

Most grid systems are split up into either 9, 12, 16, or 20 columns. Custom grids might use more or fewer columns than this. Some grids also break up the design into horizontal rows, which are generally the same width in pixels as the columns.

Many designers feel that grids are only appropriate for fixed-width layouts, but grids are versatile enough to be used in fluid layouts, too. There are already some grid frameworks that make provisions for fluid layouts.

Best Practices in Grid Design

There are a number of things to keep in mind when designing with a grid. While many of the tips below are flexible, it’s helpful to know what they are before you embark on a grid-based design project. There’s nothing wrong with breaking the rules as long as it’s a conscious decision and not an accident.

Use only enough columns as you need for your design. What’s the point of using a grid with 20 columns if you’re only going to use four of those? While combining columns is expected for individual elements, if you only need 12 columns, then pick a grid system (or design your own) that only uses 12 columns. Anything beyond that only creates visual clutter in your design workspace.

Pay attention to both horizontal and vertical spacing. While some grid frameworks don’t have provisions for designing along a horizontal baseline, others do. If you work with one that doesn’t, consider creating your own horizontal rows to help with the spacing of elements vertically. Generally, rows should be the same number of pixels high as columns are wide.

Don’t be afraid to step outside the grid. Sometimes you need to break free of your grid for certain elements. This is fine, as long as it’s a conscious decision and you know why it’s necessary. This is especially prevalent in header and footer design with complex backgrounds (like with an illustrated header). It’s okay to get away from the grid if you feel it’s integral to the design.

Use a pre-designed grid if possible. You don’t have to reinvent the wheel. There are more than a dozen good, grid-based layouts available. One of them will most likely fit your needs, even if you have to tweak it a bit.

Additional Resources

Grid-Based Design 101

Grid-Based Design: Six Creative Column Techniques which covers six techniques for working within grid columns.

Grid Design Tutorials and Resources

There are numerous tutorials and resources available for grid-based design. While many rehash what’s been said over and over again, there are some real gems out there that provide valuable insights into grid-based design. And while tutorials are more sparse than articles, there are some great ones available, some of which are included below.

Tips and Tutorials

Five Simple Steps to Designing Grid Systems—Part 1

This tutorial series on designing with grids comes in five parts. It covers all aspects of grid-based design and walks your through designing a grid from scratch. Here are parts 2, 3, 4, and 5, and the preface to the series.

Seven Smooth Steps to Superb Grids
This article offers a seven-step outline for creating grid-based designs, with linked resources to help you along the way.

O Rule + Golden Proportion for Calculating the Gutter in a Grid
As the title suggests, this article explains how to use the Golden Proportion (also called the Golden Mean or the Golden Rectangle) and the “O Rule” to establish the gutter widths in your grid design.

Gridlasticness
A short post on elastic grid design based on em sizes. Includes some helpful tips based on a real-world site redesign.

Fluid Grids

This post from A List Apart offers a comprehensive tutorial on creating fluid grids. It covers everything from font sizing to the markup used for the example site.

Prototype a Magazine-Style Home Page Template with the Blueprint CSS Framework
This tutorial from Nettuts+ goes through the entire process of creating a magazine-style grid-based website design using the Blueprint framework (more information on that below). This is a very thorough tutorial with a demo and downloadable source materials.

960 CSS Framework—Learn the Basics
This article offers a great introduction to work with the 960.gs system. If you’re new to working with 960.gs or grids in general, this is a great place to start.

General Resources

Grid-Based Layout

This is an excellent introductory article for grid-based design that provides a good overview of what grids are and how they’re used.

Web Design Trend Hunting—Fluid Grid Layout: 10+ Outstanding Examples and 1 Tutorial
This post from Inspired Magazine offers up ten great examples of fluid grid designs, as well as a tutorial for creating your own fluid grid-based designs.

Setting Web Type to a Baseline Grid
This is a great post from Dev Opera about baseline grids and vertical flow in grid-based designs. It covers not only why you should use a baseline grid, but also how to go about it.

Thinking Outside the Grid
An early article on grid-based design from A List Apart. It covers how to break out of the traditional table-based grid, while still showing designs in the context of their looser grid-based structure.

Grid Style in Modern Web Design: Showcase and Resources
This article gives a great overview of grid-based design, and includes an introduction to what it is and how it works. It also has a great showcase of grid-based designs.

Oh Yeeaahh!

This is a now somewhat famous article on redesigning a well-known website to conform to a grid layout. It details the entire process (in the article and in a downloadable presentation), including the challenges the redesign presented.

The Grid System
This site offers up tons of categorized resources on grid design, compiling articles from all over the web. It also includes tools, books, templates, a blog, and inspiration — all in one place.

Adobe Web Tech Curriculum: Page Layout Grids
This lesson from Adobe gives a great introduction to grid design and includes guidelines for creating and using your own grids. The factors and guidelines are provided in an easy-to-reference bulleted list.

Quiet Structure
This post offers a great critique and evaluation of the CNN.com grid-based redesign. It discusses what elements changed, how the site is structured, and how the grid provides structure to the content in an understated way.

The Complex Grid
This post is typography-specific, though many of the principles it discusses in relation to grid-based design could be applied to other design elements.

Developing the Grid that Supports Your Design
A great overview of creating a grid to fit your proposed design, with some great grid examples based on common layouts.

Designing with Grids
This is a very thorough article from .net magazine about designing grid-based layouts. It covers why grids work along with grid-based design theory and includes some practical suggestions for working with grids.

Design By Grid
Design By Grid offers up tons of grid design resources, including a showcase, articles, and tutorials. They also have a resources section with even more information from around the web.

65 Resources for Grid-Based Design
This is an excellent roundup of resources compiled by Vandelay Design. The listings are categorized by articles, galleries, tools, framework resources, and WordPress themes.

Grid Based Design Toolbox

Fuel Your Creativity has compiled a huge list of grid-based design resources, broken down by category. There are tools, galleries, tutorials, WordPress themes, and articles to get you going with grid-based design.

The Funniest Grid You Ever Saw
This article from Subtraction talks about the redesign of The Onion and how it now fits into a grid-based framework. It’s a very thorough article that offers great insights into how to design a complex grid-based theme so common on news and magazine websites.

45+ CSS Grid Systems, Layout Generators and Tutorials that Every Designer Should Know
Tripwire Magazine has compiled this excellent resource list for grid design. Some basic information is provided for each link, as well as some general grid-design info.

Grid (page layout)
This is Wikipedia’s page explaining grid-based design. It offers some great explanations of why grids work and includes a bit of history and further resources.

Grid Tools, Frameworks and Templates

While sometimes a particular design project calls for a custom grid solution, there are plenty of frameworks that can be customized to work for just about any design. And even if you opt for a custom solution, there are tools available that can help you decide on the basics of your grid’s layout.

1KB CSS Grid

Just as the name suggests, the 1KB Grid System is a grid system based on a CSS file that is under 1 kilobyte. You can customize the grid before downloading, with the number of columns (9, 10, 12, 14, or 16), their width (40, 60, or 80 pixels), and how wide you want the gutters to be (10 or 20 pixels) to create grids from 450px wide up to 1600px (not recommended, obviously). The resulting file is not only super-tiny, but also super-easy to understand and work with. If you’re new to grid-based design, this might be one of the best framework options available.

960 Grid System

960.gs is a grid system based on a 960-pixel-wide page layout. It supports designs based on 12 or 16 columns. The download includes a printable sketch sheet for hand-drawing mockups.

Baseline

Baseline is a framework built with both grid-based design and good typography in mind. It works with HTML 5 and CSS 3 (requiring a modern browser for all of their functionality to display properly). Baseline serves as a great framework for creating grid-based sites that feature visually pleasing typography (beyond just nice fonts and styles).

Blueprint CSS

Blueprint is one of the better-known grid frameworks out there. In addition to the grid-design tools, Blueprint also includes support for typography, print styles, sprites, and more.

Boks

Boks is a cross-platform-compatible Adobe AIR application for working with the Blueprint CSS framework. It lets you configure your grid, baseline rhythm, CSS, and exports a .png file to use in your design mockups.

Fluid 960 Grid System

The Fluid 960 Grid System is based on the 960.gs framework but with a fluid width and incorporates MooTools and jQuery effects. The demo page itself is impressive, and the fluid nature makes it a preferrable choice for many designers.

Grid Calculator

The Grid Calculator is a simple tool that uses sliders to adjust the base font size, number of columns and their width, and the gutter width of your grid. It automatically calculates the total grid width and shows the grid layout below the calculator.

Grid Designer

Grid Designer is a simple grid layout tool for creating grids with any number of columns, of any width, with any size gutters and margins. It’s simple to use and even includes tools for developing your site’s typography at the same time.

GridFox

GridFox is a Firefox plugin that lets you overlay a grid on any website design. You can change the width, the number of columns, and the alignment of the grid, though the gutter width seems to be fixed. It’s a great tool if you’re trying to figure out how an existing grid-based website was set up, or even for double-checking your own work.

Gridinator

The Gridinator is an online tool for creating custom grids that match your needs. You can specify how many columns you want, how wide they should be, the margins, and the body font size, and then download the CSS, HTML, and the image file for creating mockups.

Gridmaker

Gridmaker is a fairly robust online grid creator that includes tools for formatting your vertical columns and baseline properties. You can then export a .png file for creating your design mockups. Gridmaker is also available as a Photohsop CS4 plugin.

Gridr Buildrrr

Gridr Buildrrr is another online grid design tool that lets you create custom grids to meet your design needs. You can specify the number of columns, their width and margins, and the container margin. It also allows you to add draggable boxes to your grid (including leaderboards and resizable width boxes).

Gridstarter—The Web Design Starter Grid

Gridstarter is a free grid template for Photoshop that’s based on a 960px layout. It’s based on a 60×60 grid for 16 columns (which also means you can easily do 2, 4, 6, 8, or 12 columns by combining grid columns). The site also includes screencasts for getting started with Gridstarter.

Grid System Generator

The Grid System Generator makes it easy to set up grid templates for 960.gs, The Golden Grid, the 1KB Grid, and Simple Grid. You can choose the width, number of columns, and margins to create a customized template file for your own needs. The site also offers articles on CSS and grid-based design, plus additional resources from around the web.

Layout Grids for Axure and Pencil

If you use Axure for prototyping and wireframing or the Pencil extension for Firefox, then these Layout Grids are for you. The files included here overlay a grid to your workspace (either in Axure RP Pro 5 or Pencil), making the creation of grid-based wireframes and prototypes much easier.

Slammer

Slammer is a program for Mac OS X Leopard that lets you overlay a grid on any window. It includes rulers to help you position elements precisely and also allows you to save your customized overlays for future use.

The Golden Grid

The Golden Grid is a slightly different grid system based on the number 3. It uses a 6/12 grid system instead of the more common 14 or 16 column format. The grid takes into account the Rule of Thirds (Golden Rule, hence the name) to create more aesthetically pleasing designs.

Web Page Layout Grid

The Web Page Layout Grid is a simple, downloadable (just right click and then click on “view background image”) image for laying out your designs on a grid. Just put the image behind your design work and you have a ready-made grid with pixel markings on both vertical and horizontal axes.

YUI Grids CSS

YUI Grids CSS is a grid framework that supports both fixed- and fluid-width grids. It’s a 4kb file that claims to support over 1000 page layouts. Examples and tools are included, too.

Gallery of Excellent Grid Designs

What would a post on grid design be without a selection of awesome grid-based designs to inspire you? Below are 30 excellent designs based on grids. Some have more complex grids than others, and some do an excellent job of breaking outside of the grid when necessary.

About the author

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She also writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of Internet Famous: A Practical Guide to Becoming an Online Celebrity.

(ll)

The Big Collection Of Free Design Textures

2009-11-09T01:27:30Z

Knowing your resources is important in all aspects of design. You could be working on a new draft and realize you are missing one thing, texture. Textures are not always beautiful by themselves and many can appear quite boring, but when you add texture to your design, it gives that little bit of depth you might be looking for to make the image pop. With a digital camera or intermediate to advanced skills in Photoshop, textures are easy to make. One thing we may run out of is time. Time to make or even the countless hours surfing the Web for the perfect texture.

This post presents an extensive collection of resources with textures from which you can choose the perfect background image for your next design. Please visit the linked sites to download the textures of your choice.

40+ Beautiful Patterns and Textures for Ornate Backgrounds
The use of ornate patterns in web design has been popular for several years now. Not only does it add a lot of intricate detail, but it’s also a great way to add a level of sophistication to a design. Here are some of the most beautiful ornate patterns and textures

50 Outstanding Free Design Textures
A few good textures can take a boring design and turn into something stunning. As a designer, you should seek to build a library of all kinds of textures to complement a range of styles. Here are 50 completely free and ready to download textures to get you started.

The Big Smashing Texture Gallery
Smashing Magazine organized the Smashing Texture Contest last year and received over 740 e-mails from over 600 participants, resulting in far more than 2000 photos. The result, however, is not just literally zillion of textures, but truly brilliant textures you can use in your private and professional projects for free.

270+ Sets Free And Beautiful Watercolor Textures
Both grunge and watercolor effects are really cool and hot in web design industrial. There are a lot of website backgrounds using watercolor effect. Some people may think watercolor and grunge effects are “dirty”, but if you are able to mix the design with these effects, then you will have a beautiful layout which able to give visitors an impressive appearance.

23 Water Color Textures I
23 High-Res Water Color Backgrounds are now available for free personal and commercial use. Each individual file can be found and downloaded for free at SadMonkey’s DeviantArt Page. Please feel free to use, redistribute or modify the files any way you see fit

25 Free High Res Watercolor Textures
These awesome watercolor textures are brought to you by Daniel Davidson. Daniel is a freelance graphic designer, you can check out his portfolio at SadMonkey Design

>Grungy Watercolor Textures and Layered PSD
Today’s webtreat is a layered PSD of our Grungy Watercolor backgounds on BackgroundsETC along with a selection of several of our favorites.

10 beautiful Free Wood Textures for Your Designs
Used as background images, wood textures are quite popular on the web theses days. In this article, I’ll show you 10 beautiful wood textures that you can freely use to enhance your designs.

12 Free High Resolution Wood/Rock Textures
Textures design are very popular among designers to add to their design work. Today we are offering 12 free high Res textures of wood and rock. You can download/preview the texture by clicking on the images which will take you to the Flickr Photos.

9 Free Hi-Res Wood Panels Textures
It’s time for another high resolution texture set. This time it’s all about wood panels. Wood textures pop up in more and more websites as background images. It’s a trend which sure won’t disappear in the near future. With a bit of tweaking these wood panels textures can be transformed into tile-able background images for your web projects and at the stunning size of 3264×2448 pixels they’re great for your print projects too.

10 Super High-Res Wood Textures
This texture set is courtesy of Franz Jeitz, who you may remember we interviewed recently. Franz runs the design blog FudgeGraphics, and was kind enough to offer this texture set to our visitors. This texture set is huge! Images are 3264X2448px in size – perfect for large scale designs.

30 Wood Textures Sets
If you create nature design work, you maybe will need Wood textures. Wood textures can add more natural feeling to your artworks. Wood textures you can use as backgrounds or apply them to some objects. In this set you will find 31 large-scale, high resolution (1950 * 1310) suitable wood textures. On Psdeluxe you can download this set for free.

200+ Excellent Free High Quality Tree Bark Textures
Tree Bark Texture is a kind of texture taken from the bark of a tree. Some passionate photographers and designers took these textures and contribute it for the design community. This could be useful for any graphics design artwork and normally used for background purpose.

42+ Free Photoshop Textures
Beautiful collection of background textures for Photoshop. A lot of texture backgrounds are used in modern web designing, textures add quality and beautify designs.

100 Beautiful Free Textures
In this post, Smashing Magazine looks at 100 different textures in a wide variety of different categories. Of course, each image is linked to the source where it can be downloaded. As with any type of freebie, be sure to read the terms and conditions or stipulations by the owner before using it in your work.

50+ High Resolution Textures, Tutorials and Resources
Hundreds of thousands of incredible Textures are all over the web. Due to this phenomenally vast amount of textures available, you can now add dirt, rust, floral effect, swirls, mold, oil stains in your artworks and photos to give them an aged, damaged, dreamy or any look you want

11 High Resolution Free Fabric Textures
Today I have a good set of high resolution of fabric texture. I found some fabric around my house which inspired me to take up my camera and shot some good high res texture. Fabric texture has always been on of my best favorites. Hope you can use high fabric textures for better use in your design.

45+ Absolutely Useful Free Fabric Textures
Today we will showcase a collection of textures where you can use and apply on your future web page design project or just for graphics use. These type of textures is more on different kind of fabrics.

50 Free Rusted Metal Texture
Textured backgrounds are a great way to add an extra dimension to any graphic design project. Magazines and printed media can resort to textured paper for added impact however, this is impossible to do on the web, and the closest we can do is adding texture to simulate this effect.

Large Textures from India
Five large and colorful textures from India.

12 Large Textures
12 beautiful textures for your designs and inspiration.

17 Paper Papyrus Textures
17 Lovely paper textures.

24 High Res Grunge Textures
This pack contains some really nice grunge-style textures.

10 Catalyst Textures
10 beautiful textures with vibrant colors.

Five Grunge Textures
This is a second set of interesting grunge textures designed by Cloaks

12 Free and High-Res Grungy Wall Textures
In this freebie, we share with you 12 free grungy wall textures that you can use on your future design projects in an innumerable amount of ways.

50 Grunge Icon Textures
For those times when you need to fill a small area, here are 50 colorful grunge icon textures..

60+ Free Textures from SXC.hu
In addition to using brushes, you can get great results and save considerable amounts of time by taking advantage of textures that are freely available. One excellent resources of textures (and other types of stock images) is Stock.xchng. Below you’ll find more than 60 textures from their site. Each image links to the page on sxc.hu where the image can be downloaded.

40 Free Concrete Textures
Concrete textures are excellent for use in web and graphic design. You can quickly take your own, since concrete is so easy to find, or you can take advantage of those that are already freely available. In this post we’ll feature 40 different concrete textures from a variety of sources.

Cool Textures in Bricks and Stones
We find ourselves going through photographs and wonder why in the world we even wasted the battery on that shot, not thinking of course they can be used for textures, patterns or even Photoshop brushes at a later time. We have collected several photographs of bricks and stones which could make some pretty cool texture effects in your designs.

Rust Texture Pack
This is a pack of 10 rust textures. You can get any of them from Flickr, or download the full pack in a zip file at the end of the post. Most of them have a resolution of 2560 x 1920..

101 Free Stone and Rock Textures
Most designers are always interested in quality textures to use in their own work. Recently I was looking for some good stone textures, so I decided to put together this collection that will hopefully be a helpful resource for others. There are textures from a variety of different sources.

New York Concrete: 10 Free Hi-Res Textures
The latest texture pack contains 10 high resolution concrete textures taken during my last trip to New York City. I took over 300 photos, mostly of the regular tourist attractions.

40 High Res Textures
If there is one thing that is ubiquitous among almost all grunge web designs, it’s having a good quality grunge texture or dirty background image

30 Most Incredible Textures for Vintage Style Design
One of the most important aspects of a good vintage style design is the use of authentic looking textures. Since most of you probably don’t have time to browse the local antique shop, and your grandmother’s attic is miles away.

Cloud Textures
Weird colors – 27 cloud textures, made from photos. Please credit the artist if you use these textures. Resolution is 1600×1200 pixels.

11 Free Hi-Res Old Grunge Paper Textures
It’s time for another high resolution texture set. This time it’s all about grunge paper textures taken from old books. As a bonus there’s even a nice book cover texture for you to download. Due to the enormous size (about 7MB each) of the textures I will not offer a single zip file containing all the images. Instead you have to individually download each texture by clicking on the preview. I hope you don’t mind. The files are perfect for both web and print jobs to your designs a more organic or vintage feel

60+ Extremely Useful Free Concrete Texture Backgrounds
You may notice the last few days I made some list of free texture resources. And as a continuation of gathering some High Quality Textures on the Web, here are another textures which can be very useful when it comes to grunge designs.

25 Great Free Photoshop Texture Packs
Photoshop textures are very widely used in modern web design, and hopefully you don’t have to create all your textures by yourself since a great choice is available freely on the web. In the following collection we have selected some of the best free Photoshop texture packs.

25 Useful Digital Textures Tiles
25 tileable textures for your multimedia, web, 3d, game or print designs. Bricks, stones, furs, metals and other materials. These tiles were created digitally, so you won’t get the dirt and impurities normally found on scanned images.

30 Free Cardboard Textures
Having the right textures can make a huge difference for designers. Today we’re going to feature 30 of the best free cardboard textures from a variety of different sources.

15 Textures of Italy
Here is the first of several, Italy Texture Packs. This one includes 15 textures from all over Italy. (The name of the city the photo was taken in is in the file name.

25 Free High Quality Brick Textures
I recently used some brick textures for a design project. I got a good collection and thought of sharing it. In this post, you would find some of the best high quality brick textures which can be used in different ways.

60 Unique and Free Paper Textures
One of the most commonly used texture resources is the paper texture effect, many designers including like this texture and use it in many projects and digital painting works in Photoshop.

25 More Free Photoshop Texture Packs

22 Textures from The Grand Canyon
A couple of nice textures from a trip to the Grand Canyon. There are also a few textures from Vegas.

Free Texture Tuesday Rust 2
The venerable rust texture. Rust can be one of the most useful textures when trying to add a hint (or a lot) of grunge to your designs or photos, very handy.

31 Hi-Res Grunge Remodeling Textures
Free high resolution grunge remodelin textures. Overall 31 textures are included in the pack.

10 Free Original Hi-Res Fully Stained Paper Textures
These were created by soaking A4 pieces of paper in a tray filled with food colouring and then left to dry in the sun. The edges are most concentrated while the middle of the paper has a sort of tie-dye effect.

10 Free Hi-Res Photoshop Brushes for Acrylic Textures
These brushes are perfect for textures, overlays, and even poster making, letting you achieve a great organic feel. This set has a total of 9 Acrylic Texture Brushes all hovering at exactly 2500px.

Gallery of Textures
Textur.es is a community ran texture gallery for designers, photographers, and creatives alike.

The Beauty Of Splash Sculptures

2009-11-06T21:52:14Z

By Tim Mercer

Splash Art is a truly beautiful art form requiring precise timming a specialized photography equipment. Masters of the genre often have complex studios set up with lasers, multiple flashes and controlers to acheive the exact timming needed to capture these wonderfull images. With the abstract nature of splash photography you can often make out figures in the liquid forms. The artists featured below have taken this niche to new heights – perfecting their techniques and inspiring us all.

Today we present 45 Stunning Splash Sculpture Photographs taken by masters of their craft. Be sure to check out the photographers’ websites by clicking on their photos.

Splash Sculpture Photography

A Splash

Ghirlanda Colore
The photo is taken by Antonino Dattola.

The Red And The Blue
The photo is taken by Paul Hocksenar.

Last Click

Resources

Strobist
Learn how to photograph water splashes.

Tutorial
A nice tutorial on how to capture water drops on.

Water splash Photography
A great Flickr group on splash photography.

High speed splash photography
How to set up a splash photography studio.

About the author

Tim Mercer is a photography enthusiast, graphic designer, artist and blogger. His blog digital-artist-toolbox offers free resources to the digital artist and graphic designer as well as tutorials, artist interviews, inspiration and more.

Essential CSS/HTML Lists Styling Techniques

2009-11-04T16:54:58Z

By Justin Johnson

Certain elements in HTML lend themselves to many situations when marking up a website, one of the more useful of these elements is the HTML list. Using lists, a developer can markup horizontal navigation, dropdown navigation, a list of links, and even scrolling content panels (with the help of Javascript). These features can help developers build new sites and applications as well as integrate new content into existing applications.

Unordered/Ordered Lists

Unorderd lists are recommened to be used with a list of items where order is irrelevant. With unordered lists (and all lists actually) the W3C discourage authors from using lists purely as a means of indenting text. This is a stylistic issue and is properly handled by style sheets.
Ordered lists on the other hand are encouraged to be used when order matters for the list elements, example: A cooking recipe or turn-by-turn directions. For the examples in this article it is possible to substitute an ol for a ul or vice-versa. That choice is left to your discretion.

In it’s simplest form an ordered list or unordered list (referred to going forward interchangably as ‘a list’) would contain similar markup to the following:

<!-- an unordered list example -->
<ul>
	<li><a href="#">List Item One</li>
	<li><a href="#">List Item Two</li>
	<li><a href="#">List Item three</li>
	<li><a href="#">List Item Four</li>
	<li><a href="#">List Item Five</li>
&lt/ul>

<!-- an ordered list example -->
<ol>
	<li><a href="#">List Item One</li>
	<li><a href="#">List Item Two</li>
	<li><a href="#">List Item three</li>
	<li><a href="#">List Item Four</li>
	<li><a href="#">List Item Five</li>
&lt/ol>

Examining the box model for a list reveals the following:

In short both ul’s and ol’s are considered block level elements, as are each one of their child li tags. As such we can apply margin and padding to both items on all four sides. In regards to the bullet point for ul’s (or the numeral for ol’s) a left margin will move both the bullet/numeral to the right as well as the text, while padding while increase the space between the bullet/numeral and the content of the li.

The Basics of Styling Lists

Styling a list to be used as it is intended, a list, is a fairly straightforward task. To replace the bullets in an ol with a sample graphic icon you could do something like the following:

HTML

<ul>
	<li><a href="#">List Item One</li>
	<li><a href="#">List Item Two</li>
	<li><a href="#">List Item three</li>
	<li><a href="#">List Item Four</li>
	<li><a href="#">List Item Five</li>
&lt/ul>

CSS

ul li{
	list-style:none; /* removes the default bullet */
	background: url(../images/icon-for-li.gif) no-repeat left center;
	/*adds a background image to the li*/
	padding-left: 10px
	/* this would be the width of the background image, plus a little more to space things out properly */
	}

Basic styling to the numbers of an ordered list is just as straightforward. Consider the following list and CSS.

<ol>
	<li><a href="#">List Item One</li>
	<li><a href="#">List Item Two</li>
	<li><a href="#">List Item three</li>
	<li><a href="#">List Item Four</li>
	<li><a href="#">List Item Five</li>
&lt/ol>

CSS

With the CSS we will change the font of the ol to change the font of the numerals, then we’ll target the a tags inside our li’s to change their font in order to give them
a different visual representation than the numerals.

ol{
	font-family: Georgia, "Times New Roman", serif;
	color: #ccc;
	font-size: 16px;
}
ol li a{
	font-family: Arial, Verdana, sans-serif;
	font-size: 12px;
}

More Advanced Uses for List

Accessible-Image Tab Rollovers

While this is an older article, published in 2003, the information contained in it is very valuable. Dan Cedarholm of SimpleBits explains how to create an image based navigation with rollovers using only CSS, HTML and images. If you haven’t read this article before it’s definately worth reading. The code below is a summarized version, but Dan offer’s a full explanation of the code on his site SimpleBits

CSS

<ul id="nav">
<li id="thome"><a href="#">Home</li>
<li id="tservices"><a href="#">Our Services</li>
<li id="tabout"><a href="#">About Us</li>
&lt/ul>

HTML

#nav {
margin: 0;
padding: 0;
height: 20px;
list-style: none;
display: inline;
overflow: hidden;
}

#nav li {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}

#nav a {
float: left;
padding: 20px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:20px; /* for IE5/Win only */
}

#nav a:hover {
background-position: 0 -20px;
}

#nav a:active, #nav a.selected {
background-position: 0 -40px;
}

#thome a  {
width: 40px;
background: url(home.gif) top left no-repeat;
}
#tservices a  {
width: 40px;
background: url(services.gif) top left no-repeat;
}
#tabout a  {
width: 40px;
background: url(about.gif) top left no-repeat;
}

Examples

Note that some of these examples use a modified version of this technique in which one large image (aka an image sprite) is used instead of individual graphics for each nav item.

Pat Rogers Harley Davidson

Fast Company

NBC

ToysR’Us

CSS “Sliding Doors”

While the above method is great if you know what your navigation items are going to be, it doesn’t present a problem if you’re using a content management or blogging system like Wordpress that allows you to create and rename pages at will. The following technique has been around for a while but is just as useful, if not more useful than the previous technique. Douglas Bowman wrote an article for A List Apart in 2003 titled: Sliding Doors of CSS

This technique uses two background images that can tile horizontally to encompass a long page title or shrink horizontally to encompass a short page title. Our HTML markup for the list is very similar to the above technique. Our main changes will center around how we style the list with CSS.

<div id="header">
<ul>
<li><a href="#">Home</li>
<li id="current"><a href="#">Services</li>
<li><a href="#">About Us</li>
</ul>
</div>

#header {
float:left;
width:100%;
background:#DAE0D2 url("bg.gif") repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li {
float:left;
background:url("left.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a {
float:left;
display:block;
background:url("right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
color:#333;
}
#header #current {
background-image:url("left_on.gif");
}
#header #current a {
background-image:url("right_on.gif");
color:#333;
padding-bottom:5px;
}

Examples

Content Scrollers
One trend that is becoming increasingly more and more popular is the concept of content scrollers or sliders. These block level elements cycle through (or are toggled via user interaction) a predetermined set of content which can be any web content. This used to be a technique that was reserved soley for Flash, however, with the advent of Javascript libraries such as jQuery, mooTools, and Prototype it is now possible to do this strictly with HTML/Javascript/CSS. Our code snippet below is an example using jQuery and a jQuery plugin called jCarousel Lite.

HTML

<button class="prev">Prev</button>
<button class="next">Next</button>

<div class="anyClass">
    <ul>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
    </ul>
</div>

        $(function() {
            $(".anyClass").jCarouselLite({
                btnNext: ".next",
                btnPrev: ".prev"
            });
        });

Examples of this technique can be found below. Note that not all of the examples below use jCarousel Lite, but they do portray a similar technique/effect.

Ordered Lists: A Side Note

While ol and ul can technically be considered interchangable, an ol was designed to be used for items where order is important. One great example of this could be a list of links that shows a user where they have been, otherwise known as “breadcrumbs”. In the following list you’ll find some step by step tutorials for building CSS breadcrumbs.

Resources for CSS BreadCrumbs

Lists & CSS Resources

The following resources discuss technique and theory in greater detail in regards to CSS and HTML lists.

About the author

Justin Johnson is Rich Media / UI Developer at E-dreamz an established Web Development company in Charlotte, NC. He spends his days meticulously hand crafting CSS and Javascript as well as tinkering with PHP, MySQL, SQL, ColdFusion & Flex. Justin spends his spare time with his wife and son.

The Future Of The Web: Where Will We Be In Five Years?

2009-11-03T12:56:13Z

By Cameron Chapman

We’re approaching the end of 2009, and many people are wondering what the future will bring. While no one can predict for sure what the Internet holds in its future, there are indicators and trends that can point us in the right direction.

A ton of technologies are ripe for further development in the coming few years. Social media and related apps are definitely going to be at the forefront of the Web for a long time. But plenty of other technologies are on the verge of becoming mainstream, either because of more social acceptance or because of advancements in hardware and applications. Read on for 15 predictions about the future of the Web.

1. Micro-Payments For Quality Content

Submitted on Twitter by @mikaelgramont and @simplybastow.

Some companies are already making strides in the micro-payment arena. Many current systems accumulate a big number of micro-payments before paying out a single larger payment. But that may change in the future; you’ll be able to spend micro-payments as soon as you get them, rather than having to wait for them to add up.

Micro-payments will likely be popular among online magazines and news services, as well as other providers of in-depth content. Micro-payments might also be adopted by artists and content creators to defer costs and make a profit.

The most prevalent current micro-payment systems are within MMORPGs (massively multi-player online role-playing games). These systems use credits that are usually a fraction of a dollar to buy and sell things in the game. There are numerous cases of people actually earning a living through these systems.

PayPal is already offering support for micro-payments at a rate of 5% plus $0.05 per transaction. Amazon is also experimenting with micro-payments through its Flexible Payments Service (FPS). Dedicated micro-payment systems are also starting to crop up.

Micro-payments of the future may be closely-related to mobile payment systems. Payment via cell phone opens up whole new area of economic opportunity, particularly in areas where cell phones are more prevalent than computers. Being able to make and receive very small payments, the equivalent of a dollar or less in many cases, via a mobile device paves the way for many in developing nations to participate in the Internet economy in a way that only a few years ago might not have been deemed possible.

Further Resources

iPhone, MySpace, Facebook Race to Micropayments in 2009
An article from TechCrunch about micro-payment options being worked on by some leaders in social media.

What Would Micropayments Do for Journalism? A Freakonomics Quorum
An article from the New York Times about the potential effects of micro-payments on journalism and news websites.

Can Micropayments Save Newspapers?
An article in the New York Times from The Opinionator about the potential of micro-payments to save newspapers.

The Case Against Micropayments
An article from O’Reilly Media on why micro-payments might not be the best idea.

2. Wider Monitors For More Horizontal-Scrolling Content

Submitted on Twitter by @wakeupstar.

Monitors keep getting bigger. Only a few years ago, the iMac came with a 15-inch monitor. Now the smallest one you can get is 21.5 inches (and the largest is 27). Most new PCs, even at the low-end, come with at least a 17-inch monitor, and in many cases 19 or 20 is standard.

Size aside, virtually every new monitor on the market is widescreen. This means that even average computer users have a lot more screen real estate available. It only makes sense that websites will adapt and make more use of horizontal scrolling in future than vertical, especially websites that have multiple small blocks of content, rather than long stretches of text.

Horizontally-scrolling websites are already becoming popular. Some use JavaScript or Flash to simulate a wide layout, while others use plain old HTML and CSS. In any case, a horizontal layout makes a lot more sense for certain kinds of sites, especially portfolios, media galleries and websites that rely more heavily on multimedia than text.

Further Resources

The Horizontal Way
A showcase of horizontal-scrolling website designs.

Fifteen Web Sites Using Horizontal Scrolling
A round-up of great horizontal designs from Sitepoint.

27 Inspirational Horizontal Scrolling Websites
Another great roundup of horizontal designs from Dzine Blog.

How to Create a Horizontally Scrolling Site
A brief tutorial from CSS-Tricks on creating a website with horizontal scrolling.

3. Magazines In A More Interactive Format (Wiki, Digital Video, Etc.)

Submitted on Twitter by @tomforeman.

There’s some question as to whether the majority of print magazines will even be around in five years. Another magazine seems to close every week, often with little or no notice. And how can we be surprised? With mobile devices now fully capable of delivering great content while we’re on the go, what niches do magazines serve? A magazine used to be a good cheap read that we could pick up to check out the latest trends in one field or another, or quick portable entertainment while we’re on the go. But the mobile Web does all that and more.

Of course, that doesn’t mean we won’t have magazines in five years, just that the majority of them will be online, and they’ll have a lot more than just text content. Magazines will be infinitely more interactive, incorporating wikis, video and audio content, and in many cases their own social networks. Some print magazines are already preparing for the change and have websites that could very easily stand on their own. And a whole new breed of online magazines is appearing in a variety of formats. Some hold on to the page-flipping print format (except digitally rendered), while others have broken free and are more blog-like. Whatever the format, they are providing faster, cheaper and more user-friendly content than their print counterparts. The trend is likely to continue as costs for everything but Web space go up.

Further Resources

Switch from Print to Web: Where to Start?
A guide to making the transition from print format to the Internet.

No Magazines Have to Die
An article that includes strategies for print magazines that are transitioning to digital.

Print and Digital – The Future of Magazine Advertising
A great article that covers the future of magazines from an advertising standpoint.

4. More Collaborative And Real-Time Content

Submitted on Twitter by @wakeupstar.

The Web has long been used by people to collaborate on projects with colleagues or clients who are not geographically close enough for a face-to-face meeting. But recently social media has made a whole new level of collaboration possible. Writing projects are particularly popular and seem to do well across a variety of platforms. Twitter novels and stories have been co-written (Neil Gaiman was recently involved in a collaborative story project with BBC Audio Books and hundreds of Twitter users). Novels have been written entirely on Facebook, with input from readers on the work in progress (e.g. The Man Who Painted Agnieszka’s Shoes by Dan Holloway). Even textbooks have been written by collaboration (see Wikibooks).

As broadband Internet becomes more widely available worldwide, collaborative projects will only get bigger and more frequent. Real-time updates and interaction make it possible to work on practically anything in a collaborative environment. Some projects will consist of small groups of people who already know each other, while other projects will bring together hundreds or even thousands of participants who were till then strangers. There’s really no limit to how many people could participate.

Technology that allows collaboration has been around for years. File sharing has almost always been a part of the Web, though new tools make it easier and more efficient. Services such as Zoho and Google Docs allow writers to collaborate on a single document, tracking changes by each participant and allowing others to revert to earlier versions if necessary. Other services let users communicated in real time through video or audio chats in a collaborative workspace. Improvements to these technologies are likely to continue, and new technologies developed.

Collaborative Apps

The following are some collaborative apps that might indicate where online collaboration is headed.

Wridea is an “idea management” service that includes collaborative brainstorming tools.

Writeboard, from 37Signals, is a collaborative writing app.

Twiddla is a Web-based collaboration tool that lets users mark up pretty much anything online as well as work on a group whiteboard-like space.

Spicebird is a collaboration platform that includes instant messaging, a group calendar and email functionality.

Stixy is a collaboration space that lets you share photos, notes, documents, to-dos and more.

Edmodo is a collaboration tool for teachers and students.

5. More Semantic Content And Apps That Exploit Them

Theories and suggestions have been made for ages on how to make the Web more semantic: everything from creating artificial-intelligence apps that interpret data much like humans do, to more semantic tagging conventions that make it possible for current online apps and services to make sense of what code means to humans. So far, though, no one has even come up with an authoritative definition of what the semantic Web actually is. But even with the semantic waters as murky as they are, people are developing programs and services that work more intuitively and make it easier for average Internet users to find what they’re looking for.

Microsoft’s Bing search engine is one of the first truly mainstream apps that aims to help people find what they’re looking for, even going so far as to help them make decisions. While there’s still plenty of room for additional features and improvement of functionality, Bing has helped to bring semantic search options to the mainstream Internet user.

Semantic tagging and coding conventions are probably the most likely to gain serious traction in the next few years. Many Web designers are already using semantic labels in their code. This makes sense on several levels: it makes it easier for current and future Web apps to figure out what is being displayed on a page, and it makes it easier for designers and programmers to make changes to code without having to leave copious comments explaining what the different parts of the code do.

Further Resources

Semantic Code: What? Why? How?
An excellent article from Boagworld on the importance of semantic coding.

Semantic Web
Wikipedia’s entry on the semantic Web.

The Semantic Web
An older article from Scientific American on the future of the semantic Web.

Semantic Web Road Map
The official road map from the W3C.

6. Augmented Reality In Mobile Web Applications

Given that most mobile devices now have built-in digital cameras (some with video capability), people would naturally now want functionality beyond simple photography. Augmented reality applications can have a range of potential benefits, from making it easier to find your way if you get lost to letting you identify the person sitting across from you at a party.

That last example has many security and privacy experts worried. Facial recognition software is improving all the time, and pretty soon using an augmented reality program on your mobile phone to find out who a person is might be possible. You’d just snap a picture of them, and the app would cross-reference it with social networking profiles and photos across the Web, eventually coming across a match. From there, you could see whatever information the person had chosen to make public about him or herself.

While many people still see augmented reality as the stuff of science fiction, the truth is that at least rudimentary apps are already available. Layar, a free augmented reality app, is available for both the iPhone and Android-based phones. It uses layers provided by a variety of content providers such as Flickr, Wikipedia and Twitter to display an overlay of information on your mobile screen. Other apps will likely follow.

Further Resources

Augmented Reality
Wikipedia’s entry on augmented reality.

How Augmented Reality Will Work
An overview from HowStuffWorks.

Layar Brings Augmented Reality to the iPhone
Coverage from TechCrunch on Layar’s move to the iPhone.

Augmented Reality: A New Way of Seeing
An older article from Scientific American about augmented reality.

7. Better Adoption Of Web Standards

With more and more users accessing the Web from mobile browsers and browsers other than Internet Explorer, Web standards are only going to become more important. Standards-compliant design has already become much more mainstream and been adopted by many (if not most) designers. Great strides are being made across most browser platforms in complying with the standards set by the W3C. Standards-based design will have to be adopted in coming years.

8. Better Web Security Against Phishing, Scams and Spam

Image source

Web security is a constant concern for website providers. From scammers posing as legitimate buyers, to con artists sending out emails posing as legitimate businesses to capture customer information, to spammers sending out unsolicited commercial email, Internet users are bombarded daily by people who want to use their personal information against them.

Individual websites, Web hosts, payment processors and others involved in online transactions are constantly making security improvements. With greater consumer awareness of how to identify phishing schemes and other scams, the majority of these issues will no longer be a concern in the next few years. Of course, that isn’t to say that other tactics won’t replace them.

Further Resources

The Web Standards Project
A grassroots group that promotes the adoption and development of Web standards.

Confronting the Future of Web Standards
An article covering both the history and future of Web standards.

W3C Standards
The official Web standards section of w3.org.

Web Standards
Wikipedia’s Web standards entry.

Web Standards Group
The W3C’s Web Standards Group.

9. Even More Social Apps

Social media isn’t going anywhere. While some people believe social media has gone about as far as it can go, others believe it’s still in its infancy. I think there’s still plenty of room for new apps, new platforms and new ideas in the world of social media. One area ripe for improvement and wider adoption is virtual worlds. Today’s kids have been using virtual worlds since they were toddlers (think Webkinz and Club Penguin), so they’ll likely want to continue using them as teenagers and adults. Plus, with advances in virtual reality on the verge of major breakthroughs, virtual worlds could come to the forefront of social media.

Another area ripe for expansion and improvement is content aggregation. While some services out there will aggregate a user’s activity across multiple social networks and websites, most still have a lot of room for improvement. Eventually, services not only will aggregate a user’s activity across all of the websites they participate in, but will also present that information usefully to their followers.

Niche social networks will also continue to grow. Social networks exist for practically every niche, and this will not go away. Services such as Ning and platforms like Elgg make it easy for non-programmers to set up their own social networks quickly and easily. Many corporations, organizations and groups are setting up social networks for their customers and members. While some have been great successes, attracting thousands of users, others have quickly died and been replaced either by other niche networks or by groups on mainstream general-purpose websites.

Further Resources

Elgg
An open-source social networking engine.

BuddyPress
A set of plug-ins that turns WordPress MU into a social network.

Lovd By Less
An open-source social networking platform.

Ning
Offers free hosted social networks.

OpenSocial
Google’s OpenSocial social network applications platform.

The Social Future for Web 2.0/Web 3.0
A series of predictions on social technologies.

10. More High-Quality Online “TV” Programs

Dr. Horrible’s Sing-Along Blog can be credited with bringing quality online programming to the mainstream. While plenty of great Internet programs existed prior to that, Dr. Horrible quickly gained a cult following and made the transition to mainstream media. The fact that Joss Whedon, Neil Patrick Harris and Nathan Fillion were involved played no small part in the show’s success, but it paved the way for lesser-known directors, actors, writers and producers to gain large online viewerships.

Since Dr. Horrible, a number of other online series and programs have gained wide viewership. Webisodes (which are usually mini-episodes of popular TV shows that are aired exclusively online) have also grown in popularity. While online fictional video is still in its infancy, several informative video blogs have been in production for a while, like TreeHugger TV and CNET TV. One of the more popular amateur fictional programs is Star Trek New Voyages, based on the original Star Trek series.

With video technology becoming increasingly cheaper and easier to use, and broadband Internet access becoming more widespread, high-quality Internet-only programs will become only more prevalent in the future.

Further Resources

Jeff’s Guide to “TV Shows Online Available on the Internet”
This website gives an alphabetical listing of online programming.

Hulu
Offers regular and online-only programming. Hulu is where Dr. Horrible was first aired.

13 Places to Watch TV Online for Free
A list of websites that offer free TV shows.

How to Create a Webisode
A tutorial from eHow.

Webisodes – The Future of Entertainment
A great overview of webisodes and how they got started.

11. Web Apps Play A Bigger Role In Daily Life

Submitted on Twitter by @dougoftheabaci.

Web applications already play a big role in the daily lives of many people. But as more apps become available online and traditional software moves to online-enhanced or online-only models (as some programs are already starting to do), more users will turn to Web applications almost exclusively.

One major factor driving this trend is broad mobile Web access. Being able to access important documents or perform tasks on business applications from anywhere is a huge advantage to many users. A lot of opportunities are opening up for mobile workers, who will no longer be tied to a single location, or even a single computer.

Of course, there are potential drawbacks to using Web apps exclusively. There have already been cases of Web apps or services crashing and losing customer data. Website downtime is another critical factor that can have a huge impact on productivity if offline backups aren’t available. Until these hurdles are overcome, Web-based applications will continue to face resistance for critical functions.

Further Resources

Envisioning the Future of Web Apps
A video from CNET on the future of Web applications built on HTML 5 and micro-payments.

The Future of Web Apps: 7 Things Companies Must Do to Succeed
A post from Mashable on the steps that companies need to take to create useful Web applications.

Future Of Web Apps
The official page of the Future Of Web Apps (FOWA) conference from Carsonified.

12. Search Engine Optimization Will Be Less Important

Submitted on Twitter by @seokai.

Search engine optimization may become less important in the future as Internet users rely more on recommendations and social media to find information. Already, people are asking questions on Twitter and Facebook instead of Google. This means that high-quality content and usability will become ever more important, because users are more likely to recommend a website if they have found it easy to use and useful. Also, search engines themselves will be smarter, meaning they’ll be able to better discern a Web page’s usefulness to a particular user.

13. Your OS Will Be Online

Submitted on Twitter by @dahquium.

While your computer will still store some files, the future of the operating system will increasingly rely on Web-based files. In other words, without an Internet connection, your computer’s functionality will be severely limited.

Google’s Chrome OS seems to be the first serious contender in this arena. Jolicloud is another Web-based OS, developed specifically for netbooks. Both operating systems seem to be aiming specifically at netbooks, where their benefits would be most obvious. For regular laptops and desktop computers, expect the Web-based OS to take a bit longer, mainly because users tend to run more robust apps on them, like Photoshop and Dreamweaver, which will take a bit longer to make fully Web-based.

Further Resources

Web operating system
Wikipedia’s page covering Web-based operating systems.

7 Interesting Web Operating System Applications
An overview of seven Web OS options.

eyeos
A “cloud computing operating system.”

Cloudo
Another Web-based operating system.

14. Customized User Interfaces

Submitted on Twitter by @verseijden.

As Web apps become more integrated in our daily lives, customized user interfaces will surely follow. Being able to tailor the user experience to one’s preferences is a huge plus for many Internet users. And some websites already let you make customizations to the information you see, how you see it and even how you interact with it.

Plug-ins are already being used by programmers to customize the interface of many websites they use regularly. Greasemonkey for Firefox (and some other browsers) is one such plug-in that lets you customize the functionality and appearance of many Web apps and sites.

15. The Web Will Be The Center Of Information And Content Distribution

Submitted on Twitter by @cmachanic.

This, to a large extent, is already coming true. The Web has almost always been a major distribution point for information. But this will only grow in future. Publishers, media producers and other content creators are already turning to the Web to get their products out to a bigger audience. Within the next few years, the Web may fully replace more established methods of content delivery.

Newspapers and magazines will likely be the first media replaced by the Web. Not far behind will be TV and movies. The movie theater probably won’t be entirely replaced by the Web for a very long time, but more people will certainly be renting and buying movies online rather than on DVDs and other physical media.

Books are a different story; they have sentimental value. From a practical standpoint, e-paper (like that used in the Kindle and other e-readers) is not really much different than real paper. But from a psychological standpoint, the difference is too much for many book-lovers to overcome. Of course, that won’t prevent the Internet from playing an ever-larger role in book distribution. The e-book market will continue to grow for the next few years, as younger readers opt for them over paper books. Paper versions of favorite titles might be purchased as collector’s editions, with e-books purchased for daily reading material.

This migration to the Internet will profoundly affect how media is produced and consumed. Media will become more interactive and collaborative, and because of the lower barrier to entry, new players will participate in virtually every method of content production and distribution. The shake-up will affect much more than just the way information is disseminated.

Further Resources

Who Killed the Newspaper?
A slightly older article from The Economist on the decline of the newspaper industry.

Do Newspapers Have a Future?
Another older article on the decline of the newspaper industry, this one from Time magazine.

Are Magazines Doomed, Too?
A post from BuzzMachine about the future of magazine publishing.

The Future of Magazines, Possibly
Gawker’s look at the future of the magazine industry.

The Future of Television
An article from Forbes on the future of TV.

Is the Future of TV on the Web?
An article from CNN about the future of television.

How Netflix is Changing the Future of Movies
A great post about how Netflix and similar Internet-based on-demand movie services are changing the way movies are being distributed.

Movies Online: The Future is (Almost) Here
A Salon.com article about the future of the movie industry in relation to online distribution.

Google & the Future of Books
An article about Google’s foray into book publishing, from The New York Review of Books.

Crystal Kindles: What Does 2010 Hold in Store for the Literary World?
A more near-sighted look at what the future holds for the publishing world.

(al)