Posts Tagged ‘nav’

23
Feb
2011

10 Completely Free Wireframing and Mockup Tools

1 Comment

The wireframing process is the straight-to-the-point and completely non-tech stage of any web project. It only requires that you define a skeletal outline of essential page elements such as headers, footers, navigation and content area and should illustrate how to cater and respond to any possible interaction from a user.
It is the most important, yet underused, stage of any web or apps development.

There are several avenues you could take for sketching a wireframe, most notably pen and paper (the easiest and most cost effective way), but for the sake of this article we have focused on apps that are not only highly effective and easy to use, they are also completely free.

We have covered free wireframe apps before (here), but a year is a long time in web development – some of the apps we had previously covered are either no longer completely free or are no longer available. And as such, we felt that we should compile a new list with more detail and covering all areas of design including web pages, mobile apps and application dev.
As well as showcasing a variety of free apps (11 in total), at the bottom of the post, we have also highlighted some premium wireframing services that do offer free, yet limited, options. You may like to try them.

You may also like…
A Collection of Useful Web Design Wireframing Resources →
Printable Web Browser Sketching and Wireframe Templates →
Illustrator Template Toolbox for Web, Mobile and App Developers →
20 Free Web UI Element Kits and Stencils →
An Introduction to HTML Prototyping →
Please note that all of these apps have been confirmed as completely free on this articles publishing date.

Lumzy – Quick Mockup Creation and Prototyping Tool

Lumzy - Quick Mockup Creation and Prototyping Tool
With Lumzy, you can create mockups of how your site or application will function by adding events from the extensive list of controls on offer. As well as having great tools for creating your mockup, you can also create Message Alerts, interactive Page Navigation, add Links to external content, and much more. It does offer a great set collaboration tools for live team editing and a chat engine for deliberating over designs. All of this and it is absolutely FREE.
Lumzy Homepage →View Editor →

Lumzy Editor Screenshot

Lumzy Demo

Mockup Builder – A Killing Prototyping App

Mockup Builder
Mockup Builder has just recenly been released and looks very promising. It is feature-rich and versatile by allowing you create various prototyping styles, including: UI mockups, interactive wireframes, website layouts, desktop software prototypes and even sitemaps & screen navigation.
Of course, it does come with great collaboration tools for sharing with clients and colleagues. And yes, it is completely FREE.
Mockup Builder Homepage →View Editor →

Mockup Builder Editor Screenshot

Mockup Builder Demo

Tiggr – Creating Prototypes Collaboratively

Tiggr - Creating Prototypes Collaboratively
The idea behind Tiggr (currently in beta) is to give you the resources needed to create prototypes (for web, app or mobile) that look and feel like the final product. It allows you to design from a large number of components, share (via email, Twitter or Facebook), you can collaborate with any number of users and will generate an HTML/JS/CSS so that you can preview your UI mockups very quickly. A 10 second registration (email & password) is the only thing you have to go through to use this fantastic FREE tool.
Tiggr Homepage →

Tiggr Editor Screenshot

Tiggr - Creating Prototypes Collaboratively

Frame Box – Lightweight Online Tool for Creating Mockups

Frame Box - Lightweight Online Tool for Creating Mockups
Frame Box does not have an extensive list of features (like the web based apps above). You can drag and drop, re-size and copy/paste the UI units, but its main focus, and why we like it so much, is that it allows you to create your mockup/prototype very, very quickly by using its very easy to use drag and drop interface. Again, this app is FREE and only requires a quick registration.
Frame Box Homepage →

SimpleDiagrams Free Edition (Adobe Air App)

SimpleDiagrams Adobe Air App
SimpleDiagrams (free version) is a tiny Adobe Air app that helps you express your design ideas quickly and simply. Drag & drop symbols from its libraries, add images or post-notes, export as a PNG are all of its features, adding up to just just enough functionality to create a decent mockup.
SimpleDiagrams Homepage →

iPhone Mockup

iPhone Mockup
With iPhone Mockup you have a choice of using either the Pencil styled editor (screenshot above) or the Illustration editor (screenshot below). Whichever editor you decide to use, the functionality remains the same: Its a very simple and easy to use app that allows you to create your own iPhone mockups very quickly, share them with other people at the click of a button, and any changes you make will by synced to everyone who has the mockup’s URL.
iPhone Mockup Homepage →Illustration Editor →Pencil Editor →

iPhone Mockup Editor Screenshot

iPhone Mockup

fluidIA

fluidIA
fluidIA is a downloadable web based design tool for prototyping rich user interfaces. It allows for rapid refinement and exploration of concepts using an object-oriented approach to design. The original idea behind fluidIA is to discover whether a group of interaction designers, IA’s, UX professionals and developers can create there own prototyping tool in an open way. Progress on FluidIA has been a little bit slow recently, but the actual app works perfectly for designing a wireframe mockup.
fluidIA Homepage →Fluidia (GitHub) →

fluidIA Editor Screenshot

fluidIA

Pencil Project (Firefox Extension)

Pencil Project
Pencil Project is a free and opensource Firefox addon for designing GUI prototypes. With its built-in stencils you can create linked multi-page UI documents and finally export your mockup in either HTML, PNG, Openoffice.org document, Word document or PDF. What more would you want from a wireframing app? This truly is an essential Firefox extension that any serious developer or designer should use.
Pencil Project Homepage →Screenshots →

Pencil Project Editor Screenshot

Pencil Project Screenshots

CogTool – General Purpose UI Prototyping Tool (Standalone Application for Win & Mac)

CogTool - General Purpose UI Prototyping Tool
CogTool is a FREE and powerful general purpose UI prototyping tool with a difference – it automatically evaluates your design with a predictive human performance model (a “cognitive crash dummy”). You simply create a storyboard of your design idea with sketches, images or on a canvas with CogTool’s widgets, demonstrate tasks on that storyboard, then press a button to produce a valid cognitive model predicting how long it will take a skilled user to complete those tasks. CogTool offers a lot of support via its extensive user guides, step-by-step tutorials (video and articles), its forum and also offers example files to help you get started.
CogTool Homepage →

Prototype Composer (Community Edition)

Software Prototyping - Serena Software
Prototype Composer makes it possible to simulate how an application will look and function before any code is ever written. Instead of endless text entries, complex data hierarchies, or too technical UML diagrams, Serena Prototype Composer makes it easy for business users and business analysts to collaborate on requirements by building simple, high fidelity prototypes that simulate a working application. It is a tool for prototyping data, processes, activities and most importantly, user interfaces. The application also works as a fairly easy to use Project Management tool.
The Community Edition is its free version which allows users to work in a sample project as well as in one user-defined project.
Prototype Composer Homepage →

DUB – DENIM (Standalone Application for Win, Linux & Mac)

DUB - DENIM
DENIM is a free desktop application that is available for Windows, Unix, and Mac OS X. DENIM describes itself as “an Informal Tool For Early Stage Web Site and UI Design”.
It combines many of the benefits of paper-based sketching with existing electronic prototyping tools. It allows designers to quickly sketch an interface, preserving the important properties of pencil and paper: a rough drawing can be produced quickly and the medium is flexible. However, unlike a paper sketch, this electronic sketch is interactive and can easily be annotated and modified.
DUB – DENIM Homepage →

Premium Wireframe/Prototype Apps with a Free Option Available

All of the Wireframe/Prototype/Mockup web-based applications below are premium services that do offer a free, yet limited, option. You may like to try them:

MockFlow: Online Wireframe Tool

MockFlow: Online Wireframe Tool
MockFlow Homepage →

Gliffy – Online Diagram Software and Flowchart Software

Gliffy - Online Diagram Software and Flowchart Software
Gliffy Homepage →

Naview – Create Easier Navigations Through Prototyping and Testing

Naview - Create Easier Navigations Through Prototyping and Testing
Naview Homepage →

iPlotz – Wireframing, Mockups and Prototyping

iPlotz - Wireframing, Mockups and Prototyping
iPlotz Homepage →

Creately – Collaborative Online Diagram Software

Creately - Collaborative Online Diagram Software
Creately Homepage →

FlairBuilder – Wireframes. Mockups. Prototypes

FlairBuilder - Wireframes. Mockups. Prototypes
FlairBuilder Homepage →

Cacoo – Create Diagrams Online

Cacoo - Create Diagrams Online
Cacoo Homepage →

Mockabilly – iPhone app mockup

Mockabilly - iPhone app mockup
Mockabilly Homepage →

You may also like…

An Introduction to HTML Prototyping →
A Collection of Useful Web Design Wireframing Resources →
A Collection of Printable Web Browser Sketching and Wireframe Templates →
15 Javascript Web UI Libraries, Frameworks and Toolkits →
25 UI Inspiration and Design Pattern Resources →
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices →
25 Free Pictogram and Symbols Sign Icon Sets →
Illustrator Template Toolbox for Web, Mobile and App Developers →
20 Free Web UI Element Kits and Stencils →


Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
Posted in Design, Inspiration, Photoshop

read more
09
Feb
2011

Examination of Japanese Website Design Trends

No Comments

Japan plays host to some very impressive website designers. Their skills in the arts cannot be compared and demonstrate a powerful digital force among Internet readers. Luckily understanding how to read Japanese isn’t required to admire their website graphics and animation effects.

We’ll be looking into a few Japanese website designs which have pushed the limits on conventional development. As a designer it’s a refreshing feeling to work with alternate design concepts and build your own unique ideas off these.

The Rise in Flash

Many of the most popular Japanese websites have been built in Flash, and this is no surprise. Although Flash-based websites do not rank very well in Google (at all) they offer a unique user experience which can’t be found anywhere else.

In fact, Flash offers so much extensible content you may be surprised at just what is possible. Motion backgrounds and animated menu effects are just the tipping point on many Adobe Flash powered websites. Intricate portfolio layouts and detailed characters almost spring to life off the webpage.

Flash Design Trends

One overlooked misconception is the loading speed of each page. Because the entire website is Flash-based it will require a large amount of bandwidth to transfer and download all of the page content. This frequently leads to very long loading/splash pages which are a huge loss for potential user experience.

Although in the end it’s difficult to provide any judgement on the Flash-based approach. There are also many Japanese websites which are built off HTML5/CSS3 so I’m not categorizing all layouts as Flash-based. However with such a wide range of out-of-box thinking Japan has shown us a new outlook on envisioning the modern day website design.

Animation Ignition

It seems the Japanese community is well renowned for their work in the digital animation arts. Ranging from television to video games it seems the artistic works meld into the islands’ society and culture.

Frog illustrations

In many new-age web designs we are seeing much more illustrated artwork and digital graphics. Icon designers have also integrated an enormous amount of hand-drawn effects into their works. Japanese website designs have become much more branded by the likes of mascots, illustrated vectors, and small page icons.

Similarly artists who offer these graphics showcase their work on many places throughout the web. Twitter backgrounds and Deviant Art accounts are full of some amazing illustrations from past designs.

Custom UI Pattern

This is a common trend amongst web designers and has been growing rapidly. Many Japanese companies which involve their products in the entertainment sector have gone above and beyond to create a dynamic user interface to match their website.

Katamari Damacy official

Many of the websites coming to mind include innovative virtual worlds from video games. Katamari Damacy and Kingdom Hearts II specifically stand out as offering a very powerful user interface presence. The striking similarity between menu links in-game and on the webpages are resounding.

This can be seen not only for these games, but countless other series. The most common approach of course is an entire Flash-based website constructed through ActionScript events. Even so, other Japanese graphics artists are creating unique UI effects outside of just the video game industry.

Elements of Physical Reality

It’s not too often we’ll see images of physical reality built into the most popular websites of today. This is quite the contrary of many popular Japanese artists which in fact specialize in building outstanding modern-day layouts.

These include shots of arial birds-eye-view photos from cities and taller buildings. Many times the background or Flash animation on a page will include common everyday natural elements such as cats, trees, cars, and entire human cities. There are neat user effects applied to create a natural mood (e.g. website colors changing from day to night).

Shanghai Financial

These graphics of buildings and people can sometimes even be built into the website itself. The varied degree of creativity from Japan shows even entire websites using a small land mass as navigation for the entire website. Pages can be accessed via buildings, lawn signs, even blimps flying atop the page heading!

Web Gallery Showcase

Below is a small collection of Japanese website designs. These include mostly Flash pages with animation effects and custom UI elements. If you’re looking for design inspiration this may be one of the most creative and “out-there” galleries.

The designs are from a selection of varied topics and niches from a handful of time periods. If you have other suggestions for similar websites feel free to share them in the comments below.

Nestle

Eye Talk Town

Egao Saku

Hiroto Rakusho

Love Happy

kids wonder project

Naruhodo Agent

You might also like…

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


Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
Posted in Design, Inspiration, Photoshop

read more
21
Jan
2011

20 Essential Tools and Tips to an Accessible Website

No Comments

Accessibility is extremely important to your website. Simply put, what good does your website’s content do if certain people can’t see it? Sure, your fancy new design with the tiny fonts and low-contrast colors might look slick to you and your friends, but those with poorer eyesight, color blindness, and any other visual hindrance won’t be able to navigate, much less read, your website. You want to—nay, must—make your website accessible if you want the maximum amount of visitors.

But how do you go about making sure your website is accessible? Well, today is your lucky day, because your life is about to get a whole lot easier. Here are 20 tools to an accessible website:

You may also like these…
50 Free Tools and Apps for Web Designers and Developers →
25 Free Color Tools, Apps and Palette Generators →
Mobile Web and App Development Testing and Emulation Tools →
Useful Web Design Proposal Resources, Tools and Apps →
10 Online Tools and Apps to Help Optimize and Format CSS →
50 Useful Tools and Generators for Easy CSS Development →

20 Tools and Tips to an Accessible Website

WAVE – Web Accessibility Evaluation Tool


WAVE is a free tool that helps you in the web accessibility evaluation process. Rather than giving you a complex technical report, WAVE displays your original web page with embedded icons and indicators, showing the accessibility of your page.

IDI Web Accessibility Checker


IDI Web Accessibility Checker checks your web pages for conformance with accessibility standards to make sure your content can be accessed by everyone.

Vischeck


Vischeck shows you what your web pages look like to someone who is color blind. You can use Vischeck online with either an image file or running it through your web page, or you can download and use it on your computer.

Colour Contrast Check


Colour Contrast Check lets you pick a foreground and a background color and see if they provide enough of a contrast when someone who has color deficits views it, or when it’s viewed on a black and white screen.

mobiReady – dotMobi Compliance and mobileOK Checker


mobiReady is a testing tool that evaluates your website’s mobile-readiness using industry practices and standards. It gives you a free report that provides both a score (from 1 to 5) and in-depth analysis of your web pages to determine how well your site performs on a mobile device.

Stanford Web Accessibility Checker


Stanford Web Accessibility Checker is a programmatic tool that can analyze your web pages and test for possible access barriers. It can check live code via URL, or you may supply a working file for evaluation. It then produces a report of all accessibility problems for your selected guidelines.

Check My Colours


Check My Colours is a tool for checking foreground and background color combinations of all DOM elements and determining if they provide enough of a contrast when viewed by someone with color deficits.

Lynx Viewer


Lynx Viewer lets you see what your web pages will look like when viewed with Lynx, a text-mode web browser. It is also shows how search engines would see your site. In addition to that, it can help determine if your web pages are accessible to people with impaired vision.

Quick Page Accessibility Tester


Quick Page Accessibility Tester is a bookmarklet that you can click on at any time to get a quick analysis of any of your web pages. It highlights definite issues with your page, warns about possible issues and also highlights areas on the page that could benefit from some ARIA enhancements.

GrayBit – Grayscale Conversion Contrast Accessibility Tool


GrayBit – Grayscale Conversion Contrast Accessibility Tool is an online accessibility testing tool that visually converts your full-color web pages into grayscale renditions for the purpose of visually testing the page’s perceived contrast.

Accessibility Color Wheel


Accessibility Color Wheel lets you see if a color pair is good for accessibility. Choose a foreground and background color by pointing the mouse over the wheel or the grey bar and click. If you see an ‘OK’ message then the color pair is good for accessibility. Otherwise, change one or both colors until you get an ‘OK’.

HERA – Accessibility Tester


HERA is a tool for checking the accessibility of your web pages according to the specification of the Web Content Accessibility Guidelines. HERA does a set of tests on your web pages, identifies any automatically detectable errors or checkpoints that are met, and shows which checkpoints need manual verification.

Accessibility Valet


Accessibility Valet displays the markup of your web pages in a normalized form. It highlights valid, deprecated and bogus markup, as well as misplaced elements. Any accessibility warnings are shown in a generated report.

Cynthia Says


Cynthia Says is a web content accessibility validation tool that identifies errors in your design that are related to Section 508 standards and the WCAG guidelines.

TAW


TAW is a tool for the analysis of your web pages, based on the W3C Web Content Accessibility Guidelines 1.0. In addition to the web-based tool, there’s a standalone download option as well.

WebAnywhere


WebAnywhere is a non-visual interface that lets you interact with your web pages in a similar way to screen readers like JAWS or Window-Eyes.

Colour Contrast Analyser


Colour Contrast Analyser is a Firefox extension that lists color combinations used in your web pages. It lays out the colors in a table that summarises the foreground color, background color, luminosity contrast ratio, and the color and brightness difference.

WAT – Web Accessibility Toolbar


WAT is a Internet Explorer toolbar that helps you manually examine your web pages for a variety of accessibility aspects.

Firefox Accessibility Extension


Firefox Accessibility Extension is just what the name says: a Firefox extension that you can use to check your use of structural and styling markup in your web pages that support functional web accessibility. That will make it easier for people with disabilities to view and navigate your web pages.

Accessibility Favelets


Accessibility Favelets is a collection of bookmarklets that help with accessibility when working on your web pages. These are basically little scripts that you save (ie. bookmark in your web browser) and then use to test for accessibility when on one of your web pages.

What Are Your Most Useful Tools?

Over to you: what accessibility tools do you deem essential? Do you have any useful tips for accessibility? What glaring omissions do you know that should be on this list? Feel free to share your useful additions in the comments section below.

You might also like…

50 Free Tools and Apps for Web Designers and Developers →
CSS3 Compatibility Tools, Resources and References for Internet Explorer →
25 Free Color Tools, Apps and Palette Generators →
Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks →
Mobile Web and App Development Testing and Emulation Tools →
Useful Web Design Proposal Resources, Tools and Apps →
10 Online Tools and Apps to Help Optimize and Format CSS →
50 Useful Tools and Generators for Easy CSS Development →


Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
Posted in Design, Photoshop

read more
19
Jan
2011

50 Free Tools and Apps for Web Designers and Developers

No Comments

Over the past year or so I have bookmarked hundreds of various tools and resources covering all aspects of web & mobile development – There are tools that will improve your work-flow, resources that will clean and validate code, apps that will allow you to collaborate with any number of colleagues, bookmarklets that let you create mockups within your browser, productivity checklists, sites that will track and keep a watchful eye on your sites… and on … and on.

So, having all of these amazing bookmarks, I thought I would share my 50 favorites with you.

I have split the article into the following sub-categories for easier browsing: General Web Development Tools, Web Typography Apps, Browser Tools, Web Site Analysis Apps and, finally, Productivity Apps & Tools.
The apps also don’t include frameworks, Javascript plugins nor template tools, they are all strictly small tools that can help with your development productivity.

Compiling an article about my favorite free web development apps from the past year or so, as you can imagine, was not an easy task, and the chances are that I may have missed a few, so why don’t you tell us about your favorite free development apps within the comment section below. You never know we might collate enough for a part 2 of this post!

You may also like these…
50 Free Tools and Apps for Web Designers and Developers →
25 Free Color Tools, Apps and Palette Generators →
Mobile Web and App Development Testing and Emulation Tools →
Useful Web Design Proposal Resources, Tools and Apps →
10 Online Tools and Apps to Help Optimize and Format CSS →
50 Useful Tools and Generators for Easy CSS Development →

Web Development Tools

ProCSSor – Advanced CSS Prettifier

ProCSSor - Advanced CSS Prettifier
ProCSSor is a useful tool that will 'prettify' and format CSS files on the fly.
ProCSSor – Advanced CSS Prettifier →

ScriptSrc.net

ScriptSrc.net
Tired of hunting down the script tag for the latest version of your Javascript Library of choice? ScriptSrc allows you to copy the latest library (jQuery, MooTools, YUI…) script tags.
ScriptSrc.net →

HTMLform.com

HTMLform.com
With HTMLform.com all you have to do is design your HTML form and you will get a Zip file that can be very easy installed in your website, with everything needed to make it work: a form that can be embedded in any webpage, a small but very potent database to suit your needs, a tool for checking data online and a button for exporting to CSV and Excel formats.
HTMLform.com →

Spritebox

Spritebox
Spritebox is a WYSIWYG tool to quickly and easily create CSS classes and IDs from a single sprite image.
Spritebox →

HTML Purifier

HTML Purifier
HTML Purifier is a standards-compliant HTML filter library written in PHP. It will not only remove all malicious code (better known as XSS) with a thoroughly audited, secure yet permissive whitelist, it will also make sure your documents are standards compliant.
HTML Purifier →

Tiny Fluid Grid

Tiny Fluid Grid
Tiny Fluid Grid is a super-simple CSS grid framework generator, inspired by the 1kb Grid, that ships with an index.html with demo code, and the grid.css containing the CSS for the grid you created.
Tiny Fluid Grid →

TABLEIZER!

TABLEIZER!
TABLEIZER! is a quick tool for creating HTML tables from spreadsheet data.
TABLEIZER! →

Try Ruby! (in your browser)

Try Ruby! (in your browser)
If you haven't as yet tried Ruby, with Try Ruby! you can take the quick and painless Ruby tutorial and then test your knowledge directly in your browser.
Try Ruby! (in your browser) →

Plupload

Plupload
Plupload allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and batch uploads.
Plupload →

Favigen: Favicon Generator

Favigen: Favicon Generator
Favigen: Favicon Generator →

Super Conversion Button

Super Conversion Button
A call-to-action is one of the most important parts of any web page, displaying the primary action you want people to take. With this simple tool you can create a beautiful, effective call-to-action button in seconds
Super Conversion Button →

Subfolio

Subfolio
Subfolio is made for creative types to share their work online with speed and elegance – publicly or privately. It’s good for freelancers, studios, agencies, enterprise or even the classroom.
Subfolio →

jsFiddle

jsFiddle
JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc.
jsFiddle →

A/B Split Testing Calculator

A/B Split Testing Calculator
A/B Split Testing Calculator →

Frame Box – Lightweight online tool for creating mockups

Frame Box - Lightweight online tool for creating mockups
Frame Box does not have an extensive list of features (like the web based apps above). You can drag and drop, re-size and copy/paste the UI units, but its main focus, and why we like it so much, is that it allows you to create your mockup/prototype very, very quickly
Frame Box – Lightweight online tool for creating mockups →

App Inventor for Android

App Inventor for Android
To use the Android App Inventor, you do not need to be a professional developer, instead of writing code, you visually design the way the app looks and use blocks to specify the app's behavior.
App Inventor for Android →

HTML-Ipsum

HTML-Ipsum
HTML Ipsum is a great tool that gives you lorem ipsum snippets with HTML markup to help test your CSS.
HTML-Ipsum →

CSS3 Button Maker

CSS3 Button Maker
CSS3 Button Maker →

CSS3 Click Chart by Impressive Webs

CSS3 Click Chart by Impressive Webs
Each examples on the CSS3 Click Chart visually displays the CSS3 feature, with a clickable heading that opens a box at the bottom of the page for information on that particular feature.
CSS3 Click Chart by Impressive Webs →

CSS3 Generator

CSS3 Generator
CSS3 Generator is a useful tool that generates the CSS3 properties for the likes of @fontface, border-radius, multi-column…
CSS3 Generator →

CSS3 Menu

CSS3 Menu
You can build a cool rounded navigation menu, with no images and no Javascript, and effectively make use of the new CSS3 properties border-radius and animation. This menu works perfectly well with Firefox, Opera, Chrome and Safari. The drop-down also works on non-CSS3 compatible browsers such as IE7+, but the rounded corners and shadow will not be rendered.
CSS3 Menu →

0to255

0to255
0to255 is a simple tool that helps web designers find lighter and darker colors based on any color.
0to255 →

Web Typography Tools & Apps

Wordmark

Wordmark
Wordmark is a tool that allows you to preview any word with the fonts already installed on your computer.
Wordmark →

Awesome Fontstacks

Awesome Fontstacks
With Awesome Fontstacks you can create bundles of matching, free web fonts, with fail-safe font stacks to back them up.
Awesome Fontstacks →

Google Font Directory

Google Font Directory
With the Google Font Directory you can browse all available fonts, learn about the font designers who created them, and then copy the code required to use them directly on your web page.
Google Font Directory →

Fillerati – Faux Latin is a Dead Language

Fillerati - Faux Latin is a Dead Language
If you are tired of using Lorem Ipsum, then Fillerati is for you. You can choose text from the authors Jules Verne, H.G. Wells, Lewis Carroll, L. Frank Baum, Edgar Rice Burroughs or Lewis Carroll.
Fillerati – Faux Latin is a Dead Language →

Browser Tools & Apps

Wirify: The Web as Wireframes

Wirify: The Web as Wireframes
Wirify is a simple bookmarklet that will turn any web page into a wireframe mockup with only one click.
Wirify: The Web as Wireframes →

maki

maki
Just drag the maki bookmarklet to your toolbar, go to a page where you're working on the HTML/CSS, and click the bookmark. You'll then be directed to a version of your site where you can upload the mock-up image, adjust the transparency of the overlay, and reload your changes seamlessly.
maki →

Browize – Online Browser Resizer

Browize - Online Browser Resizer
Browize – Online Browser Resizer →

The HTML5 Test

The HTML5 Test
The HTML5 test – how well does your browser support HTML5? This tool will let you know.
The HTML5 Test →

Support Details

Support Details
Support Details →

resizeMyBrowser

resizeMyBrowser
resizeMyBrowser →

iPad Peek

iPad Peek
iPad Peek is a handy app that allows you to view how any website will be rendered on the iPad.
iPad Peek →

Web Site Analysis

Moniitor BETA

Moniitor BETA
Moniitor is a FREE website stat monitoring tool, it will allow you to monitor multiple sites and check for stats such as Pagerank, Alexa Rank, Feedburner Subscribers, Twitter mentions and more…
Moniitor BETA →

Uptime Robot

Uptime Robot
Uptime Robot monitors your websites by pinging your site every 5 minutes and alerts you if your sites are down.
Uptime Robot →

WooRank

WooRank
WooRank →

Clue

Clue
Clue is a tiny app, from ZURB, that allows you to test your web pages so that you can find out exactly what parts are memorable and will potentially stick in the minds of your users.
Clue →

Productivity Apps & Tools

Wridea.com

Wridea.com
Wridea is a free tool that stores your ideas, allows you to manage and organize them, collaborate with your friends and colleagues over your ideas, etc. It provides you with all necessary tools and services for organizing your ideas.
Wridea.com →

Domainr

Domainr
When you want a short URL or something big, Domainr will find it, fast and helps you explore the entire domain name space beyond the ubiquitous—and crowded—.com, .net and .org. Inspired by jish.nu, burri.to and del.icio.us.
Domainr →

Thoughtboxes

Thoughtboxes
Thoughtboxes is a simple tool that helps to organize your thoughts so you can make things happen.
Thoughtboxes →

Create Free Privacy Policy

Create Free Privacy Policy
With GeneratePrivacyPolicy.com you can create professional privacy policies agreements tailored specifically to your website or your business.
Create Free Privacy Policy →

Recurse

Recurse
Recurse is a simple solution to show clients your spiffy new design. By emulating a website with multiple flat images clients will have a better idea of what the composition will look like ‘in the wild’.
Recurse →

Launchlist

Launchlist
Launchlist is cool tool to help and encourage web designers and developers to check their work before exposing it to the world at large by going through an essential list of web development requirements. When you click 'Submit Report' you will be either given a 'Go For Launch' or, if issues found, 'Not Advisable'.
Launchlist →

TitanPad

TitanPad
TitanPad is the simplest of tools that allows you to collaborate on a document simultaneously. You can either create a 'public' pad or you can create a 'private' pad for your team with a custom URL.
TitanPad →

CeeVee

CeeVee
Not only specific for developers, CeeVee allows you to create a themed professional resume, giving you the option to make it either public or private.
CeeVee →

Billable

Billable
If you don't likes the tedious task of invoicing, then you will love Billable. It really doesn't get any simpler than this.
Billable →

Bounce

Bounce
Bounce is a tiny app that allows anyone to give feedback on the design of any given webpage.
Bounce →

TinEye Reverse Image Search

TinEye Reverse Image Search
TinEye is a reverse image search engine. It finds out where an image came from, how it is being used, if modified versions of the image exist, or if there is a higher resolution version.
TinEye Reverse Image Search →

…and finally…

CopyPasteCharacter.com

CopyPasteCharacter.com
CopyPasteCharacter is a very useful tool for copying & pasting those impossible to remember HTML entities.
CopyPasteCharacter.com →

NounProject

NounProject
The Noun Project collects, organizes and adds to the highly recognizable symbols that form the world's visual language. The symbols can be downloaded completely free.
NounProject →

You might also like…

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


Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
Posted in Design, Photoshop

read more
« Older Entries