Steps to Design Your Web Page
This document is a resource for teachers to use in the classroom for web development projects. Within this document are six suggested steps to creating and designing a website.
Each step contains the following:
- Explanation: what is involved in this part of the design process.
- Resources: tools that are available to assist.
- Example: uses the Code Avengers homepage as an example.
- Task: a related task for students to implement in creating their website.
Overview
- Write your copy (text content)
- Draw a wireframe
- Collect other content
- Visual Design Mockup
- Code the layout
- Final implementation
1. Write your copy (text content)
Copy refers to the written material on a web page, in contrast to photographs or other elements of layout. Copywriting is one of the most important elements of effective online marketing. It takes special skill and attention, whether your trying to sell products or services or your just wanting to let people know the latest.
Copywritting involves strategically delivering words whether written or spoken, in a way which gets people to take some form of action ie. persuades consumers to buy goods or services. Creating direct-response copywriting is an art. The science and craft behind it can take much invested time and energy to master. Its no wonder that copywriters are some of the highest paid writers in the world.
Another element to consider when writing the text on a page is the ease with which your content is read and understood by your visitors (i.e. its readability). The readability will determine how much information users digest.
Example:
See the copywritten for the Code Avengers home page >>Resources:
10 Ways to Write Good Copy10 Steps to Effective Copywriting
Task:
Write your copy into either Word or Google docs. Google docs is best to use if you are working in teams where multiple people need access to the document for editing.2. Draw a wireframe
Wifeframing is an important part of the web design process. The wireframe is a visual guide that represents the skeletal framework of a website. It allows you to define the information hierarchy of your design and plan the arrangement of the content according to how you want users to view the information.
The wireframe may include the arrangement of interface elements and navigational systems, and how they work together. They usually lack typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content.
Example:
Code Avengers home page wireframe
Resources
To create a wireframe, you need a tool that enables you to quickly sketch a page and get feedback from others. It often begins with pencil drawings or sketches on a whiteboard. Then by using one of the many wireframe software tools like mockflow, moqups etc, more detailed sketches can be created through collaboration.Moqups:
Moqup is a web app for creating mockups, wireframes and interactive prototypes that look great onscreen and on paper.Moqups free Plan offers 2 active projects and 5MB of storage.
Try Moqups >>
MockFlow:
Mockflow is a full featured wireframe software to design and collaborate user interface concepts for software and websites.Mockflow free package includes 1 Designer License, 1 Project in each App, 2 Co-Editors per Project, 1 GB of Cloud Storage and Project Restrictions.
Try MockFlow >>
Task:
Using one of these online tools, create the wireframe for your website.3. Collect other content
The content of a web page is the reason that people come to your page and includes the text and multimedia content that is encountered as part of the user experience on websites. Multimedia includes, among other things: images, sounds, videos and animations.
Images: images are the most commonly used multimedia on webpages. They add interest to the page and help decorate an article. Images on a webpage should be optimized so that they download quickly.
Sounds: sounds are embedded onto a website so that users hear it as they enter into a website. Be careful when using sounds however, that they don't distract users from the main purpose of the page. It is best to provide a way to turn it off easily.
Videos: this multimedia is becoming more and more popular. The main challenge to using videos in webpages is having it work reliably across different browsers.
Animations: animations should be used in moderation.
Example:
Code Avengers homepage multimedia
Resources:
Guide to Content Strategy for the WebTask
Collect any multimedia for your page and place into a folder.4. Visual Design Mockup
Visual Design
The visual design of the webpage focuses on the aesthetics of a site by strategically using lines, shapes, color, texture, typography and form to engage users. By applying principles of visual design such as unity, gesalt, space, hierarchy, balance, contrast, dominance, scale and similarity, we are able to create a clear visual hierarchy of contrast, so users can see at a glance what is important and what is peripheral on our webpages.More about Visual Design Basics >>
Mockups
A mockup is a realistic, middle-to-high fidelity, static design representation of what the product will look like, in this case the website. Very often a mock up is a visual design draft. The goal of a mock up is to show, a close as possible how all final appearances will render including the structure of information, the visual aspects such as typography, color choices, images etc, and the basic functionalities in a static way.Example:
Code Avengers (homepage) visual design mock up.Resources
Moqups:
Using Moqups, you take your wife frame a step further by inserting images, colors, fonts to create an accurate visual mockup of your web site. Try Now >>Sumo Paint:
Sumo Paint is an online image editor, without need to install anything to your device. It is very similar to and very useful in creating a visual design of your web page. Try Now >>Pixlr
Allows you to use create and edit designs online. Try Now >>Task
Using one of the tools online, draw a visual design mock up of your website.5. Code the page structure
The web page is built using HTML, which defines the structure of the content.Using page sections and elements such as <div>
, <section>
, <header>
, <footer>
, and <article>
etc, we can set up the structure and styling of our web page. This is the way we can easily group related text and multimedia.
Using CSS we can horizontally and vertically position our elements and create white space around them outside (margins) or inside of them (padding).
Example:
Section elements in Code Avengers home page:
Task:
Using HTML and CSS, create the structure of your webpage. Add margins and padding to align sections to match your visual design layout6. Final implementation
Coding
Now that the structure is set, we can insert all our content into the HTML, adding links and any necessary attributes to our tags. Using CSS we can add any other styles to the code, so +that our website matches the visual design we created in step 4. Add necessary links so the functionalities of the website are complete.Testing
You should always TEST the site. Testing is a critical part of the building process of a website. Throughout the design process, test your HTML and CSS, by previewing your web page, to make sure the code is working properly. Check that all functions have been implemented correctly.*Test that the website layout looks okay in multiple browsers, e.g. Firefox, Chrome and IE.
- Proof read text content for spelling and grammar mistakes.
- Check all links work correctly.
- Check all images are displayed correctly.
- Validate code using the W3C validator (optional for level 1).
Example:
View the final implementation of the Code Avengers Home Page >>Task:
Now code the rest of your website and insert the content into the HTML. Add CSS styles to create the visual design you created. Finally test all the functions of the web page by previewing it in the browser. Make any final changes.- download
- new file
- upload media
- rename
- delete
Run Ctrl+Enter
Check Ctrl+Shift+Enter
Reset Ctrl+Backspace
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Find Ctrl+F
Find & replace Ctrl+F+F