How to Build a Website

Create Your Logo

A logo is an important aspect of your brand that identifies your company, organization, or product to your audience.

Conduct research about your industry to create a logo that will stand the test of time and properly represent your brand’s message and personality. Keep an eye out for logo trends in your industry that you’d like to emulate in your own unique way.

The .xyz logo is legible and clear in all applications. From top to bottom: in color and in black and white; at large and small sizes; in print and on a t-shirt

Great Logo Design

Straightforward

A simple design will be memorable and easy to recognize

Adaptable

A great logo is effective:

in color and in black and white;

at small and large sizes

in print, on a t-shirt, on the web, and on mobile devices

Appropriate

A logo’s style and color should reflect the personality of your brand.

Use a font that is appropriate for your type of business. There are always exceptions to the rule, but it is best to avoid using novelty fonts.

See the “Hire a Professional” section for how to hire a professional to create your logo.

Resources

Design

The Process of Planning a Design

Before planning the design, consider your goals for the website.

Web design is the visual appearance of a website. The style of a website should support the content (the text and images). Design is an opportunity to solidify the brand and to create a good user experience.

Brainstorm how users will interact with your site. Will they be reading your site for information or to complete a task? Will they be searching for something specific or browsing to learn more? Answers to these questions will guide which types of content to create and what type of functionality to plan for.

Everything you design or code for the website should support your site and user goals. This is a good way of keeping a project in scope and on track.

Design “mockups” or “prototypes” can be created by hand, or in programs like Adobe Photoshop or Illustrator. Mockups are the result of planning and brainstorming the following topics:

User Experience (UX)

User Experience (UX) considers how users interact with a product, such as a website. A website with good UX is:

Resources

Wireframes

A first step to designing a web page is a wireframe; a representation of the page layout without style, design, or color. Wireframes plan where each type of information will go. They can be sketches on paper or created on the computer with wireframe programs or web apps such as the following resources:

Resources

Images

Images are a great way to convey information and add visual style to a website. Be sure you have permission to use images. Copying images from a Google Images search means potentially using copyrighted or protected content. Use Open Source or free for Commercial Use images on your website. You can also purchase stock photos and attain the rights to use them. Give the image creator credit (“attribution”) if required.

Resources

Morgue File — Free high resolution images for commercial or personal use

Gratisography — Free high resolution images for commercial or personal use

Color

Resources

Color contrast is also important for accessibility. Accessible websites are available to as many people as possible. This includes those with disabilities, like color blindness. Make sure color isn’t the sole way to distinguish important visual features. A color contrast test is available at webaim.org:

Resources

Fonts

Fonts are digital type families like Helvetica, Arial, Times New Roman, and Comic Sans. The word “font” originally referred to metal type, but has become synonymous with digital typefaces and is a layman’s term for text style.

Different fonts convey different personalities and tone. Comic Sans is a fun and youthful typeface compared to Times New Roman.

Resources

HTML

HTML is a language used to create websites. It provides structure and context to all the words you see on the internet.

There are element tags that define content as things like paragraphs, images, links, or headings. This is how the browser reads the information to display to users.

Attributes called “classes” and “IDs” are added to HTML tags so that they can be targeted more easily and efficiently.

The whole page structure of an HTML page is similar to the format of a letter. Both have a top section (the “head”) with helpful information as well as a “body” section with the main content. In HTML this is called “head” and “body” respectively. Body is what users see on the internet.

Resources

CSS

CSS is a language used to style websites. It changes colors, sizes, fonts, and more to customize the presentation of your web content.

CSS uses the classes and IDs defined in the HTML to create styles. Classes, IDs, and element tags are used to create the “selector” of a style. Properties like “color” or “font-size” are paired with values like “blue” or “24px”.

Styles created with CSS are referenced by HTML in the “head” of an .html document.

Resources

Add Special Effects & More Complex Features

Languages like Javascript are often used to add effects and functions beyond what HTML and CSS can do. They can also make websites work better in older browsers and on mobile devices. jQuery is a commonly used “library” of Javascript. jQuery or other scripts are added with script tags in the head of an HTML document, or at the bottom of the body.

Resources

Hire a Professional

Instead of learning everything about creating websites from scratch, you can hire a web professional and focus your expertise on your field or business.

You can hire an individual, a team, or a company to create a website. An individual may be referred to as a “freelance” designer/developer or an “independent contractor”. Some contractors will do either design or code, while others can perform both. A team or company who creates websites is often referred to as a “web agency” or “design firm”.

You can hire a web professional online, network in person, or search newspapers. For example, if a local business has a website you admire, you can try to contact the website owner to find who created it. This information may be at the bottom of a web page or can be inquired about via email or a contact form.

Professional web designers or developers may charge hourly rates or project fees. The price for a website will depend on the size and scope of the website as well as the experience and skill of who is hired.