How to Design a Website Online

Nowadays, with the existing variety of online applications, many of our daily tasks can be handled without the need of a pre-installed software on the computer. But can an entire web design process be carried out without desktop applications?

It is not always easy to get access to the necessary or preferred software packages, so knowing what online alternatives are available can go a long way on the completion of everyday projects.

Documentation

Every correctly executed design project should be accompanied by some documentation to back it up. This project document can also be taken care of entirely online.

Evernote

For simple word processor activities, Evernote serves the purpose well. With a simple rich-text editor interface, it’s able to easily get the document managing task done.

Evernote screenshot

Google Docs

If Evernote’s functionality proves to be insufficient, Google Docs takes care of any additional document requirements. Apart from every word processing functionality included by Evernote, Google Docs can also aid in the creation of spreadsheets and presentations, with the alternative of either sharing through e-mail, online collaboration, or exporting to many of the known formats.

Google Docs screenshot

Wireframes and other necessary diagrams

As an extension of written documents that serve as back-ups for all decision taking during the design process, wireframes and other diagrams illustrate these outcomes more clearly. These are only some of the online tools currently available for the task.

Gliffy

Although Gliffy has a very limited UI element library, it serves as a multiple-purpose online diagram tool, allowing the creation of various other types of diagrams, such as flowcharts.

Gliffy screenshot

Balsamiq

Being a tool dedicated to wireframing, unlike Gliffy, Balsamiq’s application provides a greater variety of UI elements (for both websites and mobile apps), in a sketch-like type of environment. Mark-up tools are also at hand, for further notes and highlights.

Balsamiq screenshot

Mockingbird

In contrast to Balsamiq’s interface, Mockingbird works with straight-lined UI elements for wireframe construction. It also allows the creation of multiple pages in a single related project. Unlike Balsamiq, though, Mockingbird doesn’t support the wireframing of mobile apps.

Mockingbird screenshot

Mockflow

Mockflow, aside from having many similarities to Mockingbird in working with straight-lined elements and multiple-page projects, is an even more powerful wireframing tool. Its advantages include a wider variety of UI elements, the option of choosing a pre-established template, and wireframe support for various mobile OS apps and Facebook apps.

Mockingflow screenshot

Color palette generation

Colors are a very tricky decision for a web designer. Luckily, there are many tools online that can make this process a lot simpler.

Color Scheme Designer

For guiding designers through the process of choosing the correct color palette for the project at hand, this tool provides many different visualization options. Among those mentioned, there are two very effective preview options that allow the user to view the color palette applied to a simple website layout, as to give a better idea of how the colors will look like (in lighter tones and darker tones respectively). In addition to this, it gives the possibility to export the created color palette to various different formats.

Color Scheme Designer screenshot

Color Hunter

Being a lot simpler than the Color Scheme Designer tool, Color Hunter creates a palette based on any image uploaded by the user. It’s a fast solution to color choosing and it requires a lot less expertise.

Color Hunter screenshot

Kuler

Combining the best of the previous tools, Kuler lets the user either create a color palette from scratch based on the common color schemes (like Color Scheme Designer does) or generate a color palette based on an existing image (like Color Hunter).

Kuler screenshot

Image editing

From the creation of a small banner to the construction of a complete page template, an image editor is the most powerful ally of a web designer. And what happens when the web designer doesn’t have access to any of the applications included in the Adobe Suite? That’s when online alternatives come to aid.

Aviary

The Aviary image editor is part of a larger family of online editors, such as editors for audio, vectors and color. It has a very clean interface and even though it doesn’t include as many tools as other editors do, it’s easy to use and it even provides the user with a starting example of what can be accomplished through its usage.

Aviary screenshot

Pixlr

Reaching up to Aviary’s functionality, Pixlr’s tools go farther with the inclusion of more option windows (very similar to the ones handled by Adobe Photoshop), more image filters, and the option of language selection for international users.

Pixlr screenshot

Sumo Paint

The added value of using Sumo Paint is the possibility of working with its many new and fun drawing tools, like the mirrored brush, the pointy star tool, the rounded-corner star tool, the pie chart tool, among others. Apart from this, the Sumo Paint editor comes with a swatches window, not included by any of the tools mentioned before.

Sumo Paint screenshot

Sketchpad

Even though Sketchpad has a more limited amount of tools and functions, its pattern and shape selection tools are very handy additions for quick detailing. The user interface is also a lot friendlier than the other tools’, since it only shows the option windows that are absolutely necessary based on the current tool selection, toggling them on and off screen as the designer works.

Sketchpad screenshot

Font Selection

Visualizing fonts that will be the correct fit for a website is not always a straight-forward process. The following tools offer the type and style previews needed for this particular task completion.

Font Picker

With a very friendly interface, Font Picker provides a long listing of fonts for the designer to choose from. The user is able to change the text displayed by the fonts in the list and, based on personal criteria, just start eliminating the ones that won’t work, checking and keeping the ones that can be used. This way, Font Picker allows the user to easily build a list of viable fonts to use.

Font Picker screenshot

Type Navigator

In contrast to how the Font Picker tool works, Type Navigator asks the user for traits belonging to the ideal font, and afterwards provides results that align to said specifications. Additionally, Type Navigator includes links for learning more about each specified font and purchasing.

Type Navigator screenshot

CSS Typeset

CSSTypeset has a different functionality from the tools presented before. With this web tool one can analyze the appearance of larger amounts of text with certain properties applied, like line-spacing, letter-spacing, and other CSS styles.

CSS Typeset screenshot