Why You’ll Thank Yourself for Knowing HTML & CSS
(1) You can now showcase your own material and skills: If you’re headed for a media or communication career that involves new media and social media, it’s a great idea to have your own website. You can post and host all of your journalism and communication material–print stories, audio stories, photography, video stories, slideshows, interactive graphics, artwork, etc. This effort will help you “brand” yourself. There is a lot of competition out there.
(2) You can now work with a content management system: Most large companies have a CMS (content management system) that is like a standard “shell” where you insert the content. You have little control over the layout and design, rather, you merely insert the content into the shell. With advanced knowledge of HTML and CSS, you will understand the CMS and you may even be able to make or suggest improvements.
(3) You can now design websites for others: Once word gets out that you can design websites, don’t be surprised if your friends, family, acquaintances, organizations, companies, etc., start asking you to design their website. You can make some money out of this skill!
Inspiration: Examples of Journalist Portfolio Websites
Now let’s look at some suggestions on how to evaluate portfolio websites from another instructor of new media.
Next, let’s examine examples of portfolio websites from a few young media professionals’ portfolio websites. Think about what these fresh professionals are communicating through their website. In particular, concentrate on the:
- Domain Name
- Typography (text)
- Work Examples
Design Principles for Creating a Clean, Professional Website
Defined: Highlights the importance of the site’s content. Also relates to hierarchy.
- When creating a draft of your site, list all of the information that needs to appear on the page.
- Then, number the information by order of importance.
- Design the visual hierarchy so the page reflects the determined importance.
- Avoid emphasizing everything and avoid emphasizing nothing.
Good example. Needs work.
Defined: How the elements in a design are distributed and how they relate to the overall distribution of visual weight within the page. As elements are grouped together in a page, visual weight is created. You want to balance the visual weight so as to create stability. Two kinds exist:
1. Symmetrical Balance: Equal visual weight is given to elements so that two halves mirror one another. Example.
2. Asymmetrical Balance: Visual weight is distributed equally, but elements do not mirror one another. Example.
Websites can mix the two types as well. Example.
Defined: The arrangement of elements in such a way that the natural lines (or borders) created by them match up as closely as possible.
Defined: The relationships that items develop when they are close together. When items are close, ensure you want the relationship to exist. When items are far apart, relationships are less likely to exist.
Example of proximity creating relationships.
Example of a lack of proximity causing problems. Here, too.
Defined: Throughout the website, there are certain elements that are common and unify the disparate parts together.
- Each page should look like it belongs to the same website.
- Color, shape, line, fonts, spacing, layout, typography, and imagery are some examples of potential repetitive elements.
- A benefit of repetition is predictability. Users will better understand the design, navigation, and hierarchy.
Examples: Color repetition. Font repetition. Layout repetition. Imagery repetition.
Defined: The visual differentiation of two or more elements. Contrast creates emphasis and focus toward the distinct elements, and can create a visual hierarchy as well.
- Elements that have strong contrast appear distinct and unique. Elements that have weak contrast appear unified.
- If you want elements to appear separate, use strong contrast. Go all the way. Don’t make them almost the same.
- Ensure that some elements of your website have contrast, which subsequently creates focus. You don’t want everything to have the same visual priority.
- Create contrast with color, size, position, and font.
Examples: Color contrast. Font contrast. Poor use of contrast. Another poor use of contrast.
Defined: The path the users’ eyes follow as they examine a website. Flow results from the execution of the design principles explained above.
- Consider that our eyes typically examine webpages from left to right and top to bottom.
- Ensure our eyes do not bounce around the page, darting from right to bottom and back up.
Example of smooth flow. Example of poor flow.
Typography on the Web
This refers to the use of fonts, font size, and font style on the web.
- Text is appropriate size.
- Hierarchy of information is clear.
- Lines of text are not too long to read.
- Background does not compete with text.
- There is enough contrast between background and text color.
- Uses sans serif fonts for long portions of text.
- No large blocks of text in bold, italic, all caps, or small caps.
Usability and Navigation
These concepts relate to how the user interacts with the website.
- Navigation is easy to find, understand, and use.
- Web pages give a clue as to where the user is and what page they are on.
- Links standout from the normal text color, yet coordinate with page colors.
- Link text gives a clue as as to where the user will go once they click on it.
- Consistent navigation across the website enhances usability.
There are several types of color schemes to choose from when designing your website. Let’s familiarize ourselves with these terms and the color wheel.
- Monochromatic: Only one color is used, with varying values. Example 1. Example 2.
- Analogous: Several colors that sit next to one another on the color wheel are used. Example 1. Example 2.
- Complementary: Joins colors that sit across from one another on the color wheel. Example 1. Example 2.
- Triadic: Three colors that are equally spaced on the color wheel are used. Example 1. Example 2.
- Color Discord: Color discord can be visually disturbing, attract interest, relay ideas or themes, and create surprise. Example 1. Example 2.
You want to pick one color strategy and stick to it in order to create a visually appealing website.
Layout and Themes
There are many options when it comes to the overall layout and theme of your website. Here are some ideas:
- Ultra clean designs lean toward minimalism, but emphasize the crystal clearness of the design. Example 1.
- Minimalist designs are timeless and are easier to build and maintain. They offer professionalism as well. Example 1. Example 2.
- Type-focused designs use the text as a dominant element and use text in an elegant way. Example 1. Example 2.
- Visual-oriented designs use images, graphics, or multimedia in an elegant way. Example 1. Example 2. Other examples of visual-oriented websites.
Note: Definitions and listed material are adapted from The Web Designer’s Idea Book, Vol. 2 as well as The Non-Designer’s Web Book, 3rd ed..