Website Design

A website design course at the University of Wyoming

Tag: portfolio (page 1 of 2)

Week 1: Design Principles to Showcase Your Work

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 (from NICAR: National Institute for Computer-Assisted Reporting).

What are your thoughts on this Q&A about journalism and coding?

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.

Good example.

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. Size 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.

  1. Text is appropriate size.
  2. Hierarchy of information is clear.
  3. Lines of text are not too long to read.
  4. Background does not compete with text.
  5. There is enough contrast between background and text color.
  6. Uses sans serif fonts for long portions of text.
  7. 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.

  1. Monochromatic: Only one color is used, with varying values. Example 1. Example 2.
  2. Analogous: Several colors that sit next to one another on the color wheel are used. Example 1. Example 2.
  3. Complementary: Joins colors that sit across from one another on the color wheel. Example 1.
  4. Triadic: Three colors that are equally spaced on the color wheel are used. Example 1.
  5. 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:

  1. Ultra clean and minimalist designs lean toward minimalism, but emphasize the crystal clearness of the design. They are timeless and are easier to build and maintain. They offer professionalism as well. Example 1. Example 2. Example 3.
  2. Type-focused designs use the text as a dominant element and use text in an elegant way. Example 1. Example 2. Example 3.
  3. Visual-oriented designs use images, graphics, or multimedia in an elegant way. These websites may be a little more difficult for beginners to design and maintain. Example 1. 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.

Week 1: First Law of Usability and How to Learn HTML

Krug Introduction

A usability consultant identifies problems with websites. You will benefit from knowing about usability as a website designer and future employee of a company/non-profit that has a website.

Krug outlines seven key words that define usability:

  1. Useful: Does it do something people need done?
  2. Learnable: Can people figure out how to use it?
  3. Memorable: Do they have to relearn it each time they use it?
  4. Effective: Does it get the job done?
  5. Efficient: Does it do it with a reasonable amount of time and effort?
  6. Desirable: Do people want it?
  7. Delightful: Is using it enjoyable, or even fun?

Krug Chapter 1: Basic Usability

Most important usability concept: “Don’t make me think!”

You want to build a website that is OBVIOUS and SELF-EVIDENT to the user and does not require thought.

For example:

  1. Navigation is easy to find, understand, and use.
  2. Web pages give a clue as to where the user is and what page they are on.
  3. Links standout from the normal text color, yet coordinate with page colors.
  4. Link text gives a clue as as to where the user will go once they click on it.
  5. Consistent navigation across the website enhances usability.

Questions that you DON’T want your user to ask:

  1. Where am I?
  2. Where should I start navigating?
  3. Where did they put ____?
  4. What is the point of this page?
  5. Why did they label it ____ when they really meant _____?
  6. Is that an ad or part of the website? –> Although, “native advertising” is hugely successful nowadays.

R&F Introduction: How to Use This Book

This is a conversational, fun, and memorable HTML book. The introduction has a few key points that I’d like to emphasize.

Embrace the silliness, graphics, and conversational style. They are novel and fun. You will remember them more.

Embrace the struggles. We learn when we struggle and fail. Get yourself to think more deeply and critically when you fail.

Embrace the redundancy. We will create the examples in the textbook. Then, you must apply these concepts and skills to your own website. It’s redundant, but it will stick to your brain more.

Embrace the ambiguity. There is often no “right” or “wrong” way to design something. There are many approaches to achieving the same overall result. However, there are design principles that matter and should influence your work.

Embrace the details. On the flip side, details matter. There is a “right” and “wrong” way to write code. One missing backslash or colon can ruin your website.

 

First Day: COJO 4530

Students of media, journalism, and strategic communication (e.g., PR, advertising) need to diversify their skills. This class gives you a platform through which to share your work and add HTML, CSS, and Dreamweaver skills to your resume. You’ll create and design your own portfolio website to house your professional work. Get psyched, get inspired! This is fun stuff! Here are some examples of what I mean by portfolio website.

Student Example 1 | Student Example 2 | Student Example 3 | Student Example 4 | Student Example 5 | Student Example 6

DyannDiercks

Course Blog and WyoCourses Website

You can find all of our course materials on this blog as well as our WyoCourses website. I’ll post all of our course materials and assignments here, under the COJO 4530 tab in the left-side navigation column.

Now let’s review the syllabus (found on the COJO 4530 tab and the WyoCourses website).

 

Intern at Wyoming Public Media

The News Department at WPR is looking for interns: http://wyomingpublicmedia.org/post/news-internship-spring-2015.

It’s great experience for anyone interested in audio, radio, reporting, and editing. Also, internships are one of the most valuable college experiences you can get. Many employers require internship experience.

You can earn COJO upper division credit for the internship as well, which will help you work toward graduation and upper division credit.

I highly recommend this internship.

Job and Internship Fair

Fall Job & Internship Fairs:

Business, Government, Non-Profit, Agriculture Monday, October 6

(STEM) Science Technology Engineering & Math Tuesday, October 7

100 employers will be on campus over two days seeking qualified students 10 a.m. – 3 p.m. in the Union Ballroom.  

Come prepared with

  1. resume (have it reviewed by the Center for Advising and Career Services)
  2. a positive, friendly attitude,
  3. knowledge about the companies that you wish to speak with,
  4. 1-2 minutes of “talking points” about why you’re interested in their company, and
  5. several reasons how your communication and media background can help their company.

 

Featured Employers:

  • Denver Police Department
  • Menards
  • Peace Corps
  • Union Pacific
  • U.S. Senator John Barrasso
  • USDA Ag Statistics Service
  • WestCare
  • Yellowstone Boys & Girls Ranch

 

Job Search Prep Session- Tuesday, September 30

Drop-in Time- 4-5:30 p.m. Union Ballroom

Resume Reviews, Practice Interviews, Job Fair Tips

Call (307) 766 2398 for more information. uwyo.edu/cacs

prep session

Dow Jones & The Wall Street Journal Paid Internships

Many internships are unpaid. However, I want to direct your attention to some prestigious and paid internships offered by Dow Jones and The Wall Street Journal. The internships are in reporting, video, graphics, social media, and photography.

Additionally, there are Dow Jones News Fund paid internships as well. They are in business reporting, news, digital, and sports editing.

The deadlines are Nov. 1.

For the Dow Jones News Fund internships, there is an editing exam that potential news, digital, and sports editing interns must take. The business reporting exam is different from the editing exam.

Let’s take a past exam in order to understand the issues that interns and real-world reporters and editors face every day. It’s tough. So you’re free to use the Internet while taking the exam. I still think it will be a worthwhile experience for you!

You can view other past exams from EditTeach.org.

 

COJO 4230, Classes 2 & 3: Showcase Your Work With a Portfolio Website

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)
  • Color
  • Navigation
  • Layout
  • Links
  • Work Examples

Design Principles for Creating a Clean, Professional Website

Emphasis

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.

Balance

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.

Alignment

Defined: The arrangement of elements in such a way that the natural lines (or borders) created by them match up as closely as possible.

Proximity

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.

Repetition

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.

Contrast

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.

Flow

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.

  1. Text is appropriate size.
  2. Hierarchy of information is clear.
  3. Lines of text are not too long to read.
  4. Background does not compete with text.
  5. There is enough contrast between background and text color.
  6. Uses sans serif fonts for long portions of text.
  7. 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.

  1. Navigation is easy to find, understand, and use.
  2. Web pages give a clue as to where the user is and what page they are on.
  3. Links standout from the normal text color, yet coordinate with page colors.
  4. Link text gives a clue as as to where the user will go once they click on it.
  5. Consistent navigation across the website enhances usability.

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.

  1. Monochromatic: Only one color is used, with varying values. Example 1. Example 2.
  2. Analogous: Several colors that sit next to one another on the color wheel are used. Example 1. Example 2.
  3. Complementary: Joins colors that sit across from one another on the color wheel. Example 1. Example 2.
  4. Triadic: Three colors that are equally spaced on the color wheel are used. Example 1. Example 2.
  5. 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:

  1. Ultra clean designs lean toward minimalism, but emphasize the crystal clearness of the design. Example 1.
  2. Minimalist designs are timeless and are easier to build and maintain. They offer professionalism as well. Example 1. Example 2.
  3. Type-focused designs use the text as a dominant element and use text in an elegant way. Example 1. Example 2.
  4. 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..

 

First Day for COJO 4230: Advanced New Media

Students of journalism and strategic communication (e.g., PR, advertising) need to diversify their skills. This class expands upon those skills by giving you a platform through which to share your work. You’ll go beyond maintaining a blog and you’ll create and design your own portfolio website to house your professional work. You’ll also add a few interactive projects using HTML5 and JavaScript to your website. In sum, get psyched, get inspired! This is fun stuff! The class is focused on two units:

  1. Portfolio Website: Student Example 1 | Student Example 2 | Student Example 3 | Student Example 4 | Student Example 5
  2. Interactive and Dynamic Content with HTML5 and JavaScript (Formerly Flash Instruction): Examples of Flash | The New York Times Examples of Interactive Programming | Student Example of Flash

Course Blog

This blog serves as the course website and I only use e-Companion for grade management. I’ll post all of our course materials and assignments here, under the COJO 4230 tab in the left-side navigation column. So, check back frequently.

Twitter

Finally, if you haven’t signed up for Twitter, you may want to sign up now. You can follow me. I’ll be tweeting helpful resources throughout the semester under the hashtag #cojo4230. Also, familiarize yourself with Twitter if you’re not already. You can begin to build a network through Twitter.

First, sign-up for an account. Pick a professional account name, not something like k-train82. Then, read “Brand-Tweeting-New: Tips for Twitter Newbies” by Kelli Matthews. Find people to follow through looking at these lists.

Design and Style for Portfolio Websites

Design Principles

Emphasis

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.

Balance

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.

Alignment

Defined: The arrangement of elements in such a way that the natural lines (or borders) created by them match up as closely as possible.

Proximity

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.

Repetition

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.

Contrast

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.

Flow

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. The guidelines are similar to what we discussed in reference to Flash typography rules.

  1. Text is appropriate size.
  2. Hierarchy of information is clear.
  3. Lines of text are not too long to read.
  4. Background does not compete with text.
  5. There is enough contrast between background and text color.
  6. Uses sans serif fonts for long portions of text.
  7. 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.

  1. Navigation is easy to find, understand, and use.
  2. Web pages give a clue as to where the user is and what page they are on.
  3. Links standout from the normal text color, yet coordinate with page colors.
  4. Link text gives a clue as as to where the user will go once they click on it.
  5. Consistent navigation across the website enhances usability.

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.

  1. Monochromatic: Only one color is used, with varying values. Example 1. Example 2.
  2. Analogous: Several colors that sit next to one another on the color wheel are used. Example 1. Example 2.
  3. Complementary: Joins colors that sit across from one another on the color wheel. Example 1. Example 2.
  4. Triadic: Three colors that are equally spaced on the color wheel are used. Example 1. Example 2.
  5. 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.

Color can also influence the mood of your website. Users may associate an emotion with the colors you choose.

Layout and Themes

There are many options when it comes to the overall layout and theme of your website. Here are some ideas:

  1. Ultra clean designs lean toward minimalism, but emphasize the crystal clearness of the design. Example 1. Example 2.
  2. Minimalist designs are timeless and are easier to build and maintain. They offer professionalism as well. Example 1. Example 2.
  3. Type-focused designs use the text as a dominant element and use text in an elegant way. Example 1. Example 2.
  4. Visual-oriented designs use images, graphics, or multimedia in an elegant way. Example 1. Example 2. Other examples of visual-oriented websites.

Well-Designed Student Websites

Katie Booms
Molly Smith
Sandra Sanchez
Julia Tylor

Student Websites That Could Use Design & Style Improvement

Kyle Bogner
Gerald Bourguet
Annia Quiroz
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..

Older posts

© 2017 Website Design

Theme by Anders NorenUp ↑