Design: how to design a website 01 - Details

How To Design a Website

By Eric Miller

Research

As with most design projects, the first step when creating a website is to perform research. Some of this research will be done with the client to get an understanding of their needs, and other research will be done to learn more about a specific industry. When meeting with your client, you’ll be looking to discover as much as possible to help you develop an outline for the site and eventually design it. This includes asking about their target audience, goals, creative direction and other variables that may affect what you can offer the client, such as budget and deadline. Most likely before (to be prepared) and after gathering information from the client you will perform some industry or market research. This can be as simple as looking to see what other websites in the field look like to in-depth research with focus groups. The level of research performed will depend on the client’s budget and your existing knowledge of the industry.

Brainstorming

Once you know what the project is all about, it’s time to get some ideas together, and brainstorming is a great start. Rather than looking for the perfect idea to be your first, throw out any and all ideas or concepts for the website as a start. Some websites might call for a standard web interface, with navigation (a button bar) and content areas where users are most likely to expect them. Others may require a unique concept to present the content. In the end the content will drive the design… a news site will have a much different approach than a photographer’s web portfolio.

Decide on Technical Requirements

Early in the process of developing a website, decisions need to be made regarding the technical requirements of the project. Such decisions will affect the budget, time frame and in some cases the overall feel of the site. One of the primary decisions is what the underlying structure of the site should be, which will determine what software is used and what system makes the site “work.” Options include:

·         Basic HTML: A standard HTML site in which each page is edited manually. This may be relatively quick to develop but leaves little flexibility and a lot of ongoing maintenance.

·         Use a Content Management System: Using a CMS generally allows a client to perform regular content updates, while the designer controls the overall look and feel of the site. Some systems may be developed from scratch, others purchased and tailored to the client’s needs, and others available as online systems (sites such as Blogger andWordPress are free and include a basic CMS). 

·         Flash: Flash sites are developed within Adobe Flash and can offer a rich, animated, multimedia experience. While layout work in Flash is often easier than coding a site, Flash development (making the site operate) can be time-consuming and complicated, but rewarding.

Write an Outline

Now that you’ve gathered the necessary information and brainstormed some ideas, it’s a good idea to get it all down on paper. An outline of a website should include a list of each section to be included on the site, with a description of what type of content will be shown on each page. It should also describe in as much detail as possible what features would be on the site, such as user accounts, commenting, social networking functions, video, or a newsletter sign-up. Aside from helping organize the project, the client should be presented with the outline so they can approve it before the project continues. This will allow them to add, remove or adjust any sections or features, and will ultimately help you develop a budget and time frame and build the site. Agreeing on a price for a website project based on an approved outline will help to avoid additional fees or differences in opinion late in the project.

Create Wireframes

Wireframes are simple line drawings of website layouts that allow you (and the client) to focus on placement of elements rather than color and type. This is extremely helpful as it determines what content deserves the most focus and what percentage of the space on the page. Without being distracted by other visual elements, approved wireframes provide a framework for your designs.

Design the Website

Once you and your client are happy with the wireframes, it’s time to start designing the site. Adobe Photoshop is the most common tool for creating the initial designs. The focus of the site design should be to present the content…. while flashy designs and animation have their place, they should not overpower what the user is looking for. Consistent navigation will help your visitors find all your main content areas, while clean use of type (in the case of a text-driven site) will keep them reading and coming back for more. Before you have actual content for a site design, Lorem Ipsum text will help fill spaces without distracting your client.

Build Web Pages

When your design is approved, the pages need to be turned from mockups into actual web pages written in HTML and CSS. Experienced designer/developers may choose to take on all the coding, while someone focused on the design side of the web may work closely with a developer to bring the site to life. If that is the case, the developer should be involved from the start, helping to make sure the design is a realistic and an effective web layout, and that promised features are both possible to execute and beneficial to the site.

Software such as Adobe Dreamweaver can help a designer turn a mockup into a working web page, with drag-and-drop features, pre-built functions and buttons to add links and images. If the site is done in Flash, it will be built within the Flash software rather than in HTML or other languages.

Develop the Website

Once your layout is completed in HTML and CSS, it needs to be integrated with the system you have chosen in order to build a functioning website. This may mean developing templates to be read by a content management system, altering a WordPress template, or using Dreamweaver to create links between pages and more advanced web features. This is again a step that may be left to another member or members of the team.

Promote the Website

With your website online, it’s time to promote it. Driving traffic to a site can include optimizing it for search engines, sending newsletters to highlight new content, advertising with Google or with banner ads on other sites, and more conventional methods such as print advertising and word-of-mouth.

Keep it Fresh

One of the best ways to keep people coming back to your site is to keep the content fresh. With all of the work put into a site, you don’t want it to remain the same for months after the launch. Continue to post new content, photos, videos, or music… whatever the site was built to present. A blog is a great way to keep a site updated, with posts of any length on any topic related to your site.

What to Include in a Website Proposal

By Eric Miller

A website proposal contains many aspects different from other graphic design proposals, in that technical elements must be addressed along with creative ones. While print proposals do address items such as printing procedures, website proposals must specify web hosting, systems for maintaining content, programs or programming languages to be used and other technical specifications.

Outline of Content

A website proposal should clearly spell out what will be included on the site. This can be done in a standard outline format, or visually, to show what sections and features you intend to build for the client. An outline serves to both let the client know your ideas for the site (which should be based on meetings with them) and protect you from rounds of changes and additions not initially planned for. By including the outline in the proposal and eventually the contract, you are making it clear what is included for the price and therefore what additional services can be charged for.

Method of Building Site

It is important to decide at the start of a project what system or method will be used to build the website. Some sites are built in static HTML, meaning each page is created manually, and updates are done manually as well. Other sites are built in HTML but utilize a content management system (CMS) that stores the content in a database and allows for easier updating. Sites like WordPress and Blogger offer a simple CMS included for free with your site, while other CMS packages are installed on web servers and completely customized for the project, offering countless feature options. Another option for building the site is within Flash, allowing for a rich multimedia experience and a lot of development time. Regardless of the method chosen, it should be explained in the proposal so you and your client are in agreement as to the best way to build the website.

Hosting

A web proposal should also include the hosting plan for the site. The client should be assured that the hosting plan would properly support the traffic and content expected. For example, a site with a lot of video content will need sufficient storage and speed. Along with a detailed description of the hosting, expected costs over time and for setup should be included.

Maintenance

Once a website is designed, built and launched, it will need to be maintained. Site maintenance includes both technical up-keep such as server upgrades, and updates to content or design on the site itself. The plan, and costs, for maintenance should be detailed in the proposal. This may include specifying what the client will be able to update on their own (through the use of a CMS), what updates you as the designer/ developer will handle, hourly rates for ongoing work, and any other details concerning keeping the site running and up-to-date.

Time Frame

Most clients will want to work on a deadline. While web projects require many rounds of approvals and changes, include the expected amount of time to complete the project. Depending on the needs of the client, a strict deadline might have to be included.

Estimate

After explaining in writing how you plan to develop the site, what will be on it, how long it will take, and the hosting and maintenance, an estimate of your fees should be included. This is something that should be discussed with the client, ideally before creating a full proposal, so you know what type of budget you are working with. Once you have determined the cost for the project, it can be beneficial to again speak to the client (instead of just sending a number in writing) to get an idea of their reaction and potentially negotiate to land the job.

Going to Contract

Once a proposal is accepted, it should be included as part of the contract with the client. This will again clearly spell out what services are expected for the cost. The contract will also have to specify a payment schedule and legal provisions, for which an attorney should be consulted.

How to Create Website Wireframes

By Eric Miller

1 of 4

Previous Next

The Focus of Website Wireframes

Ad

Design Your Own Websitewww.moonfruit.com/WebsiteDesignBuild Your Own Website In Minutes! Free Professional Designs. Try Now.

Website Wireframe

Website wireframes are simple line drawings that show the placement of elements on a web page. You can save yourself a great deal of time by editing the layout of a simple wireframe at the start of the design process instead of a complex design later.

Using wireframes is a great way to begin a web site project, as it allows you and your client to focus on layout without the distraction of color, type and other design elements. Concentrate on what goes where on your web pages and the percentage of space that each element takes up, which can be determined by your client’s needs.

What to Include in a Website Wireframe

Ad

Design Your Own Websitewww.moonfruit.com/WebsiteDesignBe Up & Running Online In Minutes. No Programming Required - Try Now!

Simple wireframe example

All of the important elements of a web page should be represented in your website wireframe. Use simple shapes instead of actual graphics, and label them. These elements include:

·         Navigation: Buttons for users to visit the main sections of your site.

·         Company logo: Can just be represented by a box.

·         Content areas: Where will your different sections of content appear?

·         Search boxes

·         User login areas

How to Create Website Wireframes

Ad

Design Your Own Websitewww.moonfruit.com/WebsiteDesignBe Up & Running Online In Minutes. No Programming Required - Try Now!

OmniGraffle Screenshot

There are a variety of ways to create a website wireframe. They include:

Drawing it by hand on paper
This method comes in handy when face to face with a client. Sketch out your layout ideas on paper, with a focus on what elements should go where.

Using Adobe Photoshop, Illustrator, or other graphics software
Most graphics software packages come equipped with all of the basic tools necessary to create wireframes. Simple lines, shapes and text (to label your elements) are all you need to create a presentable wireframe.

Using software created for this type of task
While Photoshop and Illustrator can do the trick, some software packages are developed specifically for this type of work. OmniGraffle is a piece of software that simplifies the creation of wireframes by providing shape, line, arrow and text tools to use on a blank canvas. You can even download custom graphics sets (for free) at Graffletopia, which gives you more elements, such as common web buttons, to work with.

How to Create Website Wireframes

By Eric Miller

4 of 4

Previous Next

The Benefits

With website wireframes, you have the benefit of tweaking a simple line drawing to achieve the desired layout. Rather than move complex elements around a page, it can take very little time to drag a couple of boxes into new positions. It is also much more productive for you or your client to focus on the layout first…you won’t start out with comments like “I don’t like that color there!” Instead, you will start with a finalized layout and structure on which to base your design.