Download Web design Stages - Egyptian Language School

Egyptian Language School
2nd Prep.
We Teach For Life
Computer Department
2016 / 2017
First Term
_____________________________________________________________
Website Stages
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.
The exact process will vary slightly from designer to designer, but the basics are
the same.
Web design Stages:1.
2.
3.
4.
5.
Planning Webpage
Design Webpage
Preparation (Web Design & Web Contents)
Website implementation
Site Launching on the internet (Publishing)
(1) Planning Webpage
 Information Gathering
The first step in designing a successful web site is to gather information.
Many things need to be taken into consideration when the look and feel of your
site is created.
This first step is actually the most important one, as it involves a solid
understanding of the company or project it is created for. It involves a good
1|Page
understanding of you – what your business goals and dreams are, and how the
web can be utilized to help you achieve those goals.
 Certain things to consider are:
- Purpose
What is the purpose of the site?
Do you want to provide information, promote a service, sell a product… ?
- Goals
What do you hope to accomplish by building this web site?
Two of the more common goals are either to make money or share information.
- Target Audience
Is 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, Gender or interests – this will later help determine the best
design style for your site.
- Content
What kind of information will the target audience be looking for on your site?
Are they looking for specific information, a particular product or service, online
ordering…?
 Drawing Draft
Using the information gathered from Step one, it is time to put together a plan
for your web site. This is the point where a site
The site
map is developed.
map is a list of all main topic areas of the site, as well as sub-topics,
if applicable. This serves as a guide as to what content will be on the site, and is
essential to developing a consistent, easy to understand navigational system.
2|Page
The end-user of the web site - your customer/Visitor – must be kept in mind
when designing your site. These are, after all, the people who will be learning
about your service or buying your product.
During the planning Step, you must decide what technologies (Web
Applications) should be implemented. Elements such as what CMS (content
management system) such as WordPress, HTML, CSS or Dynamic using PHP, CGI,
ASP.net to incorporate, will any contact forms be needed, etc. are discussed
when planning your web site.
(2) Design
Designing drafts (On paper) for:1- Home page and interior pages design.
2- Distribute the page elements such as text, photos, videos and other elements
inside their page.
(3) Preparation the Contents
This stage is the point where the web site itself is created.
At this time the programmer / Developer will take all of the individual graphic
3|Page
elements in different folders (Photos, Video, Audio,..) and use them to create
the actual and functional site (Dynamic).
(4) Implementation
According to the type of the website Dynamic or static
Static Website
It’s time to determine the look and spirit of your site
designing using computer software
Such as HTML, CSS, Dream Weaver, Photoshop, Visuallightbox, WOWSlider,
Flash and many other software.
BEAR IN MIND:
1- Target audience is one of the key factors taken into consideration.
2- A site aimed at teenagers, for example, will look much different than one
meant for a financial institution.
3- As part of the design step, it is also important to incorporate elements
such as the company logo or colors to help strengthen the identity of your
company on the web site.
4- Decide Background, Font size, color, style, graphics, audio, sound,
hyperlinks and etc..
Dynamic Website
Decide the programming language that the developer will use.
Ex. ASP.net (ASPX) for Windows servers or PHP for Linux Server.
Example: This is typically done by first developing the home page, Saved by a
“shell” name as (Master Pages) for the interior pages.
The shell serves as a template for the content pages of your site, as it contains
the main navigational structure for the web site. Once the shell has been
created, you will take your content and distribute it throughout the site, in the
appropriate areas.
4|Page
(5) Launching (Test and Publish)
At this point, you will attend to the final details and test your web site.
you will test things such as the complete functionality of forms or other scripts,
as well last testing for last minute compatibility issues (viewing differences
between different web browsers), ensuring that your web site is optimized to
be viewed properly in the most recent browser versions.
In this stage you’ll upload your website pages and contents into your Hosting
Space using FTP protocol which use in Transfer your Website and contents from
your Local Site to Remote Site (Hosting Space).
What is the meaning of Hosting?
The web-hosting or server is much like the space that you rent out to have your
business in. It's merely the space itself. It does not include furnishings like
shelves for your products, just as the web-hosting account doesn't include a site
for you to sell your products.
Without the hosting services, you won't have a place for your files to reside, so
your domain would then become like a disconnected phone number in the
phone directory, and your site files would have nowhere to stay.
Please remember:
Updates / Modification according to the type of the website (Dynamic and
Static)!
Static
Cost
Functionality
Updates / Modification
 Good Luck 
5|Page
Dynamic
Dear Students
Please Remember
Web Design Stages:
Stage 1
Planning Webpage
 Draw a simple drafts design (on paper) for
home page and internal pages.
 Collect the site data and information.
Stage 2
Design Webpage
Format and design home page and internal web pages
Stage 3
Preparation
 Prepare and save all your text, photos, sounds,
videos and all elements in one folder.
 Design Home page and internal pages
(Page background, hyperlinks , determine the
places of photos, text, videos, sounds and …)
(Web Design & Web Contents)
Stage 4
Website Implementation
 Do the following using one of programming
language and HTML codes:
1- Translate design to webpage
2- Inserting elements and contents inside
web page.
3- Create Hyperlinks.
Stage 5
Site Lunching online
 Register Domain name.
 Reserve Hosting space on server.
 Good Luck 
6|Page