Web

Web_Design_Banner
Image by Jamie Henderson. Creative Commons licensed.

The world wide web is a unique medium that gives you the opportunity to communicate simultaneously through text, images, audio, and video by choosing and organizing these elements to achieve the desired effect. As with any form of composition, before you begin creating a website, you need to have clear goals. Do you intend to showcase and sell a product? To share your hobbies, photos, or personal news? To showcase skills and experience for potential employers? To educate viewers on a particular topic? The elements of your website will change depending on your goal, your message, and your audience.

Want to know how to write for the web once your site is designed and ready for content? Check out our “Writing for the Web” resource page.

The following sections provide an overview of the things you’ll need to keep in mind while designing and working with web content: Processes, Tips, Tools, and Resources.

Getting Started by Answering the Difficult Questions

Your website is a rhetorical composition. In other words, it’s an argument. So, before you worry too much about matters of design, you should first spend time considering the following questions:

  • Purpose: What do you want the webpage to accomplish?
  • Audience: To whom do you most want to speak? Who most needs the site’s information, or who most likely will visit your site?
  • Topic: Narrowly defined, what is your central concern? Does it have a practical focus?
  • Stance: What is your relationship to the topic? What gives you authority to speak on the issue?
  • Exigency: Why is this issue not only important but in need of our immediate attention?

Decide what to include on your website

Everything you include in your website says something about you and your purpose. That said, depending on how you answered the above questions, what you choose to include on your website will vary. Start by finding similar websites to the one you envision yourself creating. Then make a wish list of things you would like to include on your site based on what other authors have chosen.

Generally, most websites include the following:

  • An “About” page: could be “about the author(s)”, “about the company” or “about our mission”.
  • A call to action: make sure that what you want your audience to get out of your website is front and center. Do you want your readers to contact you? Read more about a particular subject? Get involved in a particular cause?
  • A logo: Whether you’re creating a personal portfolio or an educational site, your logo is the first thing that the reader usually sees. Place it consistently at the top left-hand side of all your pages, and link it to your home page. If you’re creating a personal portfolio, use your name. If your purpose is educational, choose a logo that sums up who you are and what you represent.

Planning your website

After you’ve looked at some examples of professional blogs or websites in your field and have some ideas about what you’d like your website to include, it’s a good idea to map out the structure of your website. What categories will you use to organize your material? What will be in each category? You should be able to literally draw a map that shows the home page, the subpages, and the material that will be included in each subpage, as well as any images that you want to use on each of those pages.

Questions to consider while organizing the larger site:

  • What overall information or material do you have to present?
  • What specific text and visuals are best suited for each individual page?
  • What specific external links are best suited for each page?
  • Are the pages connected (linked) in a way that reflects your purpose, audience, topic, and stance?
  • Are the pages clearly related to each other? Do they carry out your purpose thoroughly and consistently?
  • Do all your individual pages link back to the homepage?

Get organized and stay organized

  • Keep all the files for this project (HTML, PSDs, gifs, jpegs) in a single project folder. Don’t have different files saved in different locations.
  • Keep your file names simple but descriptive. One-word file names are ideal. Do not use spaces or capital letters.
  • Always have a backup of your project folder.
  • Limit the number of machines you use to work on this project to no more than 2 or 3.

In Progress

Follow the Basic Principles of Design

In The Non-Designer’s Design Book (1994), Robin Williams offers the following basic principles of design:

  • Contrast: Try “to avoid elements on the pages that are merely similar. If the elements [like type, color, and size] are not the same, make them very different.”
  • Repetition: “Repeat visual elements of the design throughout the piece. You can repeat color, shape, texture, spatial relationships, line thickness, sizes, etc. This helps develop the organization and strengthens the unity.”
  • Alignment: “Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page. This creates a clean, sophisticated, fresh look.”
  • Proximity: “Items relating to each other should be grouped close together. When several items are in close proximity to each other, they become one visual unit rather than several disparate units. This helps organize information and reduces clutter.”

Finishing Up

Revise your website through the eyes of your audience. Consider the following:

  • How easy is the site to navigate? Are the links directing your reader to each page clearly defined and consistent throughout the site? Do all of the links work on every page? (Don’t assume that if they work on one page, they will work on all of them.)
  • Are the links that direct users to other websites clearly distinguished from the links that direct users to pages on your website?
  • How readable is the text throughout the site? Is the font choice and font size easy to read?
  • Is there a contrast between the color of the text and the color of the background (like black text against a white background)?
  • Are the paragraphs short? Will the readers be able to gather the important information, even if they are scanning (which, studies show, is how people read on the web)?
  • Does the author use headings and subheadings? How effective are they? Where might the author consider additional headings and/or subheadings to help guide the reader through the text/argument?
  • Does the author use bold text to highlight or emphasize especially important words within individual paragraphs? Where might the author use bold text to greater advantage?
  • Is your content as concise as possible?
  • Do your images strategically support the content on your site? Avoid extraneous images that don’t actually add anything to the content.
  • Does the author use bulleted or numbered lists to highlight or emphasize especially important facts or key points? Where might the author (better) utilize bulleted or numbered lists?
  • Evaluate the logo/ banner. Do the choices of color and images set an appropriate tone for the larger site? (Note: the logo and/or banner should be pleasing and effective for the intended audience, not the simply for the author).
  • Does the author utilize images elsewhere on the site? Are the images being used all displaying properly?
  • Where might the author consider using more or different images?

Publish to your web host

Website Hosting

Depending on the tool you choose to create your website, hosting may already be provided for you. If you’re using Weebly, GoogleSites, FourSquare, Wix, or a variety of other online tools, you can publish your site by simply clicking publish. If you choose to create your website in an offline tool such as Adobe Dreamweaver, you will need to choose a host server and purchase server space.

TCU offers students and faculty free server space and an easy way to publish their work online. Keep in mind that once you graduate, your website will be deleted. If you’ve created all your files offline, you can publish your website somewhere else after you leave TCU, but if you anticipate wanting to keep your website long-term, you might want to choose another host from the beginning.

You can also purchase server space and a domain name through the following websites:

Always do your research before picking a company to purchase your domain name and/or a company to host your website. Check out “The Best Web Hosting Services of 2017” article by Fahmida Y. Rashid and Jeffrey L. Wilson from PC Magazine and these LifeHacker articles by Alan Henry, Five Best Web Hosting Companies” and “Five Best Domain Name Registrars” for additional recommendations.

When designing your website, keep the following tips under consideration:

  • Use headings to break up long chunks of text
  • Put important information at the beginning of paragraphs
  • Use visuals strategically to break up long chunks of text

Please also visit our Writing for the Web resource for more tips specific to writing and formatting web-based text.

Anatomy of a Website

For a website to function and become accessible to viewers, you need three parts: domain, server/hosting, and a web design tool.

  1. Domains are familiar to us as the address for a website.
  2. When someone visits a domain, the content of your website is projected from files that are hosted on a server. These files include all the written content, images, PDFs, etc that populate the website as well as HTML and CSS files that provide the structure and design of the site.
  3. Web design tools, which are described below, allow users to design a website, either directly through HTML and CSS or through builders or content management systems (CMS) that do the coding for you.

These three components can be obtained through the same service or individually. When you create a free website through services like Wix or Weebly, they provide the domain, hosting, and design tools. If you use coding software like WordPress.org or Dreamweaver, you will need to purchase your domain and hosting separately.

See below for a description of the various tools currently available for web design and digital portfolio development. They run from extremely user-friendly (Weebly & Wix) to professional (Dreamweaver), so it shouldn’t be hard to find a tool that’s right for you.

Web-based platforms

*Generally include domains and hosting

  • FrogFolio: Supported by TCU with customizable privacy options (best if you don’t want to create a public site), but restricted to a single template and less user-friendly than other builders.
  • Weebly: Considered one of the most user-friendly website builders, but has fewer styling options compared to other builders and may look less professional.
  • Wix: Drag-and-drop feature lets you customize your site while drawing on their extensive templates, but you are locked into a template (must completely recreate the website if you want to change templates) and features lots of ads.
  • WordPress.com: This builder gives you access to hundreds of free and paid themes, but does not have the same drag-and-drop functionality of other builders.
  • Yola
  • GoogleSites

Software Platforms

Here are some general guidelines and cheat sheets to help you on your web design journey.