Blog

Maybe you are wondering, how to make a website? It is possible to learn web development online, or at least get started.

Design is the process of arranging and visually implementing ideas based on certain principles.

Web design is a similar process of creation. However, the medium of presentation is the Internet.

In other words, you are building websites and web pages which viewers can see using a browser. Creating a site is an easy task. Creating a quality website, however, is more difficult. Yet, you can learn web design at home.

You need to consider quite a few things when designing and building for the Internet, such as typography, color theory, accessibility, and responsive web design. The skills can be perfected with lots of practice, or you can hire a professional design company.

First, you need to have a basic understanding of what you will be creating and learn web design basics.

The following information describes the primary web development structure of what you will be building as a graphic designer.

How to Build a Web Page, A Free Website Design Tutorial

 

Basic Structure of a Site Layout

As any good web designer knows, a very common element in web design is the header. It contains the logo and the navigation which is used to go through different pages.

The banner is an area that showcases someone’s work, displays recent offers or promotions on e-commerce websites, for example, or offers a general description of what a site is all about.

The photo slider element gives the option to scroll through various blocks of information without occupying lots of vertical space. Each page in the web development starts with a heading or main title of the section. It is very prominent and lets the viewer know what the section is about.

The footer is an element present in almost all sites. It contains information that is not related to the section above it, but relevant to the whole website. Links to various pages are located here in the website template. They are organized in columns. It is also very common to find contact information in the footer.

Pages vary from one site to another. There is nearly always an ‘About’ page and a ‘Contact’ page. The ‘About’ page offers some information about the individual or company that owns the website. The ‘Contact’ page offers details such as address, phone number, and email address. Many contact pages have a contact form that allows users to send a message.

There are three stages of developing a website. They are:

• The Design Stage
• The HTML Stage
• The CSS Stage

The Design Stage

Gathering information is the first step in site design. Gather relevant information that includes:

• The purpose of the website
• Goal of the site
• Target audience
• Scope of the project
• Technical and non-technical requirements
• Preferences

Brainstorming is an important phase of website design.

Sketch out a bunch of creative ideas for the project. Narrow them to a few and ask for feedback from clients or potential users.

Review, tweak and get approval until designer and feedback source are satisfied.

Create a workflow diagram that contains a list for each section of the site. It should provide information about the content of each page.

If designing for someone else, get approval before proceeding.

Use a page schematic as a visual guide to represent the framework of the website. Focus on the placement of design elements. This phase is not concerned with graphics, color, or typographic style.

It does include features such as social login buttons or email newsletter sign-ups that are added to the site. This phase helps identify potential issues that are easier to correct in the initial stages.

A high-fidelity wireframe is more or less a resemblance, a beginner created, of the completed website. It is used to determine how user-friendly a site is.

When designing for someone else, it is used to communicate detailed specifications, functionality, and features of each element of design to a client.

Creating a mockup is crucial in the design of a useful site. Mockup software helps demonstrate precise placement of the website’s navigation and content elements, font sizes, and near-precise color.

The HTML Stage

Adobe Dreamweaver is software that can be used by beginners without writing HTML code.

Having some HTML background knowledge is helpful.

Dreamweaver allows editing web page layouts and designs as well as creating, editing, and viewing the underlying HTML coding.

It can be downloaded from the Adobe website products page. After installing, select default settings. Open the app and wait for a blank web page to appear or choose ‘New” in the file menu.

Enter a page title for a web page. The title is typically the first thing seen on a webpage.

It plays a vital role in search engine indexing. The title appears at the top of a web page when opened by any web browser.

Choose text attributes from the palette of text properties at the top.

• Select the size of the heading. The smaller the number, the bigger the title will be.
• Text alignment aligns the text to the left, center, or right.
• Link changes highlighted text to a hyperlink that will take visitors who click on it to another web page, email address, or another area of the current web page.
• Ordered list creates bulleted lists.
• Indent/Outdent moves the margin of selected text outwards or inwards.

The object properties palette allows the user to add and edit images. Illustrations for all this information is found by clicking here.

The CSS Stage Is Important To Learning Website Design

CSS is a technology sister of HTML. HTML is the basic structure of a site. CSS gives the website its style. It improves the appearance of site pages. CSS is the reference used for Cascading Style Sheets.

There are three ways to apply styles to an HTML document.

• External style sheet
• Internal style sheet
• Inline styles

This highlighted link demonstrates how to use the external, internal, and inline style for CSS. It creates background images, attractive fonts, and slick colors. CSS affects the tone and mood of a web page.

It is a powerful tool. CSS allows sites to adapt to different device types and screen sizes. It assigns different properties to HTML tags.

A prime example of the function of CSS is what is seen when a visitor lands on a web page.

If the visitor’s default font is Times New Roman, size 12, the web page without CSS applied would be at Times Roman, size 12.

The information contained here is for beginners to help them learn how to design a website.

It should not be construed as something that can be accomplished without some time and study.

Following the advice above, the site will not look like it was created by a beginner or first timer. We hope you enjoyed this brief introduction and est tips for website design.

---