23
Web Design Process

Web Design Process

Embed Size (px)

DESCRIPTION

There are numerous steps in the web site design and development process. From gathering initial information, to the creation of your web site, and finally to maintenance to keep your web site up to date and current.

Citation preview

Page 1: Web Design Process

Web DesignProcess

Page 2: Web Design Process

Web Site Design & Development Process

There are numerous steps in the web site design and development process. From gathering initial information, to the creation of your web site, and finally to maintenance to keep your web site up to date and current.

Almost every Web designer can attest that much of their work is repetitive. We find ourselves completing the same tasks, even if slightly modified, over and over for every Web project. Following a detailed website design and development process can speed up your work and help your client understand your role in the project. This article tries to show how developing a process for Web design can organize a developer’s thoughts, speed up a project’s timeline and prepare a freelance business for growth.

First of all, what exactly is a ‘process’? A Web development process is a documented outline of the steps needed to be taken from start to finish in order to complete a typical Web design project. It divides and categorizes the work and then breaks these high-level sections into tasks and resources that can be used as a road map for each project.

Page 3: Web Design Process

Hi!We are from IndyLogix Solutions

You can find us at:@indylogix

Page 4: Web Design Process

1.Information Gathering

Page 5: Web Design Process

The first step in designing a successful web site is to gather information. Many things need to be taken into consideration when we design the look and feel of your site, so we first ask a lot of questions to help us understand your business and your needs in a web site.

Certain things to consider are:

PurposeWhat is the purpose of the site? Do you want to provide information, promote a service, sell a product… ?

GoalsWhat do you hope to accomplish by building this web site? Two of the more common goals are either to make money or share information.

Information Gathering

Page 6: Web Design Process

➜ Target AudienceIs there a specific group of people that will help you reach your goals? It is helpful to picture the “ideal” person you want to visit your web site. Consider their age, sex or interests – this will help us determine the best design style for your site.

➜ ContentWhat kind of information will the target audience be looking for on your site? Are they looking for specific information, a particular product or service…?

Page 7: Web Design Process

“Our designs need to stay ahead of the rapidly changing device landscape and content types,

which show no signs of slowing down.”

Page 8: Web Design Process

2.Planning

Page 9: Web Design Process

The planning stage is arguably the most important, because what’s decided and mapped here sets the stage for the entire project. This is also the stage that requires client interaction and the accompanying attention to detail.

➜ Requirements analysisThis includes client goals, target audience, detailed feature requests and as much relevant information as you can possibly gather. Even if the client has carefully planned his or her website, don’t be afraid to offer useful suggestions from your experience.

➜ Project charterThe project charter (or equivalent document) sums up the information that has been gathered and agreed upon in the previous point. These documents are typically concise and not overly technical, and they serve as a reference throughout the project.

PLANNING

Page 10: Web Design Process

➜ Site mapA site map guides end users who are lost in the structure or need to find a piece of information quickly. Rather than simply listing pages, including links and a hierarchy of page organization is good practice.

➜ Contracts that define roles, copyright and financial points

This is a crucial element of the documentation and should include payment terms, project closure clauses, termination clauses, copyright ownership and timelines. Be careful to cover yourself with this document, but be concise and efficient.

➜ Gain access to servers and build folder structureTypical information to obtain and validate includes FTP host, username and password; control panel log-in information; database configuration; and any languages or frameworks currently installed.

Page 11: Web Design Process

3.

DesignWeb design encompasses many different

skills and disciplines in the production and maintenance of websites.

Page 12: Web Design Process

Drawing from the information gathered up to this point, we determine the look and feel of the site. Target audience is one of the key factors taken into consideration here. A site aimed at teenagers, for example, will look much different than one meant for a financial institution. We also incorporate elements such as the company logo or colors to help strengthen the identity of your company on the web site.

Once we’ve designed a prototype, you are given access to the Client Studio, which is a secure area of our web site. The Client Studio allows you to view your project throughout the design and development stages. Most importantly, it gives you the opportunity to express your likes and dislikes on the site design.

In this phase, communication is crucial to ensure that the final web site will match your needs and taste. We work together in this way, exchanging ideas, until we arrive at the final design for the site. Then development can begin…

Page 13: Web Design Process

4.Development

Page 14: Web Design Process

Development involves the bulk of the programming work, as well as loading content (whether by your team or the client’s). Keep code organized and commented, and refer constantly to the planning details as the full website takes shape. Take a strategic approach, and avoid future hassles by constantly testing as you go.

➜ Build development framework.This is when unique requirements might force you to diverge from the process. If you’re using Ruby on Rails, an ASP/PHP framework or a content management system, now is the time to implement it and get the basic engine up and running. Doing this early ensures that the server can handle the installation and set-up smoothly..

➜ Code templates for each page typeA website usually has several pages (e.g. home, general content, blog post, form) that can be based on templates. Creating your own templates for this purpose is good practice.

Development

Page 15: Web Design Process

➜ Develop and test special features and interactivity.Here’s where the fancy elements come into play. I like to take care of this before adding the static content because the website now provides a relatively clean and uncluttered workspace. Some developers like to get forms and validation up and running at this stage as well.

➜ Fill with content.Time for the boring part: loading all of the content provided by the client or writer. Although mundane, don’t misstep here, because even the simplest of pages demand tight typography and careful attention to detail.

➜ Test and verify links and functionality.This is a good time for a full website review. Using your file manager as a guide, walk through every single page you’ve created—everything from the home page to the submission confirmation page—and make sure everything is in working order and that you haven’t missed anything visually or functionally.

Page 16: Web Design Process

5.Testing and

Delivery

Page 17: Web Design Process

At this point, we attend to the final details and test your web site. We test things such as the complete functionality of forms or other scripts, we test for last minute compatibility issues (viewing differences between different web browsers), ensuring that the site is optimized to be viewed properly in the most recent browser versions.

Once we receive your final approval, it is time to deliver the site. We upload the files to your server – in most cases, this also involves installing and configuring WordPress, along with a core set of essential plugins to help enhance the site. Here we quickly test again to make sure that all files have been uploaded correctly, and that the site continues to be fully functional. This marks the official launch of your site, as it is now viewable to the public.

Testing and Delivery

Page 18: Web Design Process

Let’s discuss your business goals so we can get started on your project

today!

Page 19: Web Design Process

IndyLogix #Expertise

WEB DEVELOPEME

NT

PPCSMO SEO

WEB DESIGN

Page 20: Web Design Process

“The team keep abreast of technological developments and evaluate them on an ongoing

basis so that you can maintain your lead.”

Page 21: Web Design Process

Projects #WorldWide[Our Love Spreads Around The Globe]

our office

Page 22: Web Design Process

500+Total Projects

100%Total success!

150+Satisfied Customers

Page 23: Web Design Process

Thanks!Thank you for your interest in IndyLogix Solutions! If you have a general question, please send an email to [email protected].

If you would like additional information on our services, we ask that you please fill out our quote request form so that you can give us specific details on your project.

We look forward to hearing from you! - www.indylogix.com