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!
Let’s read an article about getting a job in journalism code.
Inspiration and Reflection: Examples of Portfolio Websites
Next, let’s examine examples of portfolio websites. Think about what these students and young professionals are communicating through their website. In particular, concentrate on the:
- Domain Name
- Typography (text)
- Color
- Navigation
- Layout
- Links
- Work Examples
Student Example 1 | Student Example 2 | Student Example 3 | Student Example 4 | Student Example 5 | Student Example 6 | Student Example 7
Design Principles for Creating a Clean, Professional Website
Emphasis
Definition: 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.
Balance
Definition: 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.
Alignment
Definition: The arrangement of elements in such a way that the natural lines (or borders) created by them match up as closely as possible.
- Don’t mix alignments. Choose one alignment and use it on the entire page. Not-so-hot example.
- Break this rule for creating contrast and focus. Like this.
- Do not center everything.
Proximity
Definition: 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 potentially confusing proximity.
Repetition
Definition: 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.
Good Examples: Color repetition. Font repetition. Layout repetition. Imagery repetition.
Poor Examples: Lack of color repetition. Lack of font repetition. Lack of layout repetition. Lack of imagery repetition.
Contrast
Definition: 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.
Background Images
Related to contrast is the background image. Should you have one on your website? The answer: it depends. If there is enough contrast and the image is repeated in a seamless manner, then it is OK: Example 1 | Example 2.
Do not use a background image if the image if the contrast is too weak or the image is not seamlessly repeated: Example 1 | Example 2.
What are your thoughts on these examples? Example 1 | Example 2 | Example 3
Flow
Definition: 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. Another 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.
What do you think about these examples in terms of typography? Example 1 | Example 2 | Example 3
Color Schemes
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.
- 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.
- Color Discord: Color discord can be visually disturbing, attract interest, relay ideas or themes, and create surprise. Example 1.
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.
- 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..
If you want to examine even more examples of websites, check out these student websites. Note that some websites are great and some are a throwback to poor web design principles from the 1990s.
