Website Design

A website design course at the University of Wyoming

Page 2 of 29

Studio Bees Job and Internship Opportunities 

JOB/INTERNSHIP OPPORTUNITY (Paid and Unpaid) Laramie,WY:

Studio Bees a video production agency is looking to hire UW students and non student:

– Videographers/Photographers
– Project managers
– Account executive/Sales rep
– Social media marketers
– Accountants
– Actors

Some of our work found at StudioBees.co
Most recent video was the commercial you see at FOX THEATER:

https://www.youtube.com/watch?v=f6C2-LJM8oo

If you are interested in working in a video production agency. Please email me at: andrewluisbaker@gmail.com

If possible please include in your email:
– Resume
– Availability (to meet for interview)
– Internship or part time employment
– Some of your work

Week 5: Dreamweaver Set-Up & HTML Standards

Announcements

  1. This week:
    1. Finish Ch. 5 on Images
    2. Set up our websites in Dreamweaver
    3. Cover Ch. 7 in Krug
    4. Start (and hopefully complete) HTML book Ch. 6 and 7.
  2. Assignment #4: Website with Images is now due on next Tues. 2/28
  3. Check grading comments on Assignments #1 and #2.
  4. Quiz #1 “Be the browser” grades will be available on Thurs. 2/23.
  5. Quiz #2 is on next Thurs. 3/2

Krug, Ch. 7: Designing the Home Page

Not everything from this chapter applies to your relatively small-scale websites. Here are some of the highlights.

The home page should communicate: (see p. 86)

  1. The site identity and mission
  2. Site hierarchy (accomplished by persistent navigation)

The home page *could* also communicate: (see p. 86)

  1. Content promos
  2. Feature promos
  3. Timely content

No matter what, the home page should convey the big picture.  It should answer the questions:

  1. What is this?
  2. What do they have here?
  3. What can I do here?
  4. Why should I be here–and not somewhere else?

Why are these questions important?

Because visitors make snap judgments in milliseconds that are hard to change later.

How do we convey the answers to these questions? (see p. 93)

  1. The tagline should describe you or your site in a handful of words.
  2. The Welcome blurb should not say “Welcome to my website,” rather, it should display a short description of the website.
  3. The “Learn more” is akin to the “About” page pitch (e.g., “learn more about my goals), if you have one on the home page.

Ch. 6: Web Standards

HTML through the ages — pp. 219-226

Adding the <!doctype html> tag — pp. 227-232

Meet the W3C validtor — pp. 233-238

Adding the <meta charset=”utf-8″> tag to the <head> nest — pp. 239-243

Reminders and exercises — pp. 244-249

Apply to Study Abroad Scholarship for Comm Majors

Undergraduate Research Day

Do you have a research project from COJO 3070 (Comm. Research) that you’d like to share?

WYOMING UNDERGRADUATE RESEARCH DAY
April 29, 2017

A Celebration of Undergraduate Research

Calling all undergraduate researchers! Come participate in Wyoming Undergraduate Research day on Saturday, April 29, 2017 at the University of Wyoming Campus.   Last year, over 530 students presented their research, and this year we anticipate an even richer display of undergraduate curiosity and creativity.  Presentation abstracts will be published in an Abstract Book available to all participants. The day will conclude by honoring presenters and their families with a banquet dinner.

Classroom Building will host concurrent oral presentations between 10:00 a.m. and 4:00 p.m.  Presentations will be organized in to similar themes. Each participant will have 15 minutes to present their research with a five minute question and answer session to follow. The Wyoming Union Family Room will host poster presentations between 3:30 to 5:30 p.m.

The University of Wyoming and Wyoming’s community colleges provide many opportunities for undergraduates to participate in independent research projects across multiple disciplines such as, agriculture, business, education, engineering, health sciences, biological and physical sciences, mathematical sciences, social sciences, and the arts and humanities. Undergraduate Research Day recognizes and celebrates the accomplishments of these student researchers.

Students can access instructions and forms for participation on the Wyoming EPSCoR website: http://www.uwyo.edu/epscor/events/undergraduate-research-day/index.html.

Students must register and submit their abstracts by March 24, 2017 in order to participate in Research Day.  Late materials will not be accepted.

Students are also required to provide an electronic copy of their presentation or poster to the EPSCoR Office within two weeks of Research Day.  The UW Libraries provides a repository for electronic copies of the student presentations, and makes them available electronically through the UW Libraries Digital Initiative at http://repository.uwyo.edu/ugrd/.

Families and friends, UW / Community College / High School students and faculty, and the public are invited to attend the presentations.

Presenters are expected to attend other presentations throughout the afternoon. Please be prepared to stay for the day.

Research Day is sponsored by the UW Offices of Research and Economic Development, Student Affairs, and Academic Affairs; and also by the College of Arts and Sciences, the College of Agriculture, the College of Engineering and Applied Science, the College of Health Sciences, Wyoming INBRE, UW Honors Program, the McNair Scholars Program, Wyoming EPSCoR, and the Wyoming NASA Space Grant Consortium.

For further information, please contact Emily Vercoe at evercoe@uwyo.edu or 307-766-4275.

Week 4: Domain Names, Hosting, Linking, and Images

Reminder: Assignment #2 (Draft Design & Layout) Due Tonight to WyoCourses.

Reminder: 25-Point Quiz on Thursday during class time.

  • Understand the differences among inline vs. block vs. void elements. Identify examples of each type.
  • Understand what the basic elements (or tags) mean. Understand when to use them in your HTML document. For example,
    • html
    • head
    • style
    • title
    • p
    • ol, ul, li
  • Be comfortable with finding errors in coding, like the “Be the Browser” exercises in the book.

Chapter 4: Getting Connecting – A Trip to Webville

Domain Name Registration and Web Hosting

You’ll be designing a website using HTML (hypertext markup language) and CSS (cascading style sheets). Then, via Dreamweaver, you’ll upload your files to a website host using FTP (file transfer protocol), who will store and provide the files for your website when a person requests it (i.e., when they visit your domain name).

While you can use UW’s free student hosting service, I recommend buying your own domain name and hosting service for several reasons.

  1. Branding. In search engine optimization, you want to have your own website appear first on a search. That may not happen with UW’s hosting service.
  2. Also, there are limitations to file size on the UW account. You may exceed the storage limit (200 MB) with your work.
  3. You cannot solicit money or work on the UW service.
  4. And, your student account will be deleted when you graduate.

Nevertheless, if you cannot afford to pay for the hosting and domain name purchase, then please use the free UW student hosting service. I’ll do my best to help you, but many questions will need to be answered by UW IT Department.

If you buy your domain name, it must be unique and you’re not allowed to use one that’s already been bought. You can visit Go Daddy to check and register your domain name.

Don’t be disappointed if your full name is not available. Domain names that are simple are the easiest to remember and share with people. Sometimes that means cutting your first name for a first initial. For example, if PeterStevens.com is not available, then PStevens.com may be available.

You’ll see there are other options besides “.com”, such as “.org” and “.biz”. But, the standard “.com” is the easiest to remember and share.

Let’s discuss your domain name now in case you have any questions. The company you buy your domain name from does not need to be the same company that you use for the hosting service, but oftentimes they are the same.

Your hosting service will allow you to manage and upload your content to your domain name. I use GoDaddy.com for both my domain name registration and my hosting service.

Let’s buy now, in class, so we don’t get confused.

Download the Assignment #3 (Domain Name and Hosting) Requirements: 3 – Domain Name Registration and Hosting

Back to HTML

**We will cover p. 128-141 once we have purchased our domain name and hosting service.**

External links on pp. 142-145

Relative vs. absolute links on p. 146 and 154

Linking within one webpage on pp. 149-153

Title and target linking on pp. 147-148 and pp. 155-157


Reminder: Assignment #3 (Domain Name & Hosting Registration) Due by 1:20 p.m. Tuesday 2/21.


Krug, Ch. 6: Designing Navigation

Navigation: getting from one place to another, and figuring out where you are

Why is web navigation so important?

Difficulties of web browsing:

  • Your sense of scale is limited. No idea how big the website is.
  • Your sense of direction is limited. Which way again?
  • Your sense of location is limited. Need to remember conceptual hierarchy.

Why should we make already-clicked links a different color?

Navigation Suggestions:

  1. Make the hierarchy visible = show us what the site contains
  2. Implicitly tell you how to navigate and what the options are
  3. Use web navigation conventions (see p. 65 for the graphic)
  4. Include one set of global (persistent) navigation on every page (except forms, see p. 67). Include a maximum of five tabs (otherwise, we get lost).
  5. Put the clickable site ID (e.g., your name) in the upper-left corner. Make the site ID look like a site ID (a distinction typeface and/or graphic) (see p. 67-68).
  6. Consider drop-down menus (i.e., secondary navigation) in the primary (global) navigation. When you click, you see the drop-down menu of options or you go to a front page of the subsection (see p. 69).
  7. Avoid a search box because you’re building a small website.
  8. Include a prominent, helpful page name in an appropriate location on every page (see p. 75 for examples).
  9. On every web page, highlight my current location in whatever navigation bars appear on the page (see p. 78 for examples).
  10. Avoid “breadcrumbs” unless you have a complicated website.

In the future, consider trying Krug’s “trunk test” on pp. 82-83.

We’ll take a look at how images function on the web.

HTML & CSS Book: Ch. 5 – Adding Images to Your Webpages

How images work with browsers on pp. 164-166
The different types of images on pp. 167-169
The image element, alternative attribute, and width/height attributes on pp. 170-174
Instructor-led exercise with images on pp. 175-191
Instructor-led exercise with thumbnails and linking images on pp. 192-200
Inserting a logo, working with the PNG format on pp. 201-211

Week 3: More Building Blocks for Construction and Planning

Announcements:

  1. What is one thing that you learned from the guest speaker?
  2. Assignment #2 is due on Tuesday by 11:59 p.m., uploaded Word file or PDF to WyoCourses — the Draft Design & Layout.
  3. There will be a quiz on Thursday during class. I will give more details about the quiz on Tuesday.

Krug, Ch. 4: Why Users Like Mindless Choices

Each click should be mindless and unambiguous. That is more important than the number of clicks.

Present users with brief, easy-to-process, and timely options in your navigation. If it takes three clicks to get somewhere, that’s fine. Three easy clicks are better than bombarding the user with all of the options on a text-heavy, confusing, and distracting page.

Krug, Ch. 5: Omit Needless Words

Most likely, 50% of the words on a web page can hit the road.

What are the advantages of less words?

  1. Less distraction
  2. Useful content POPS
  3. Pages are shorter.

Here is a website that could benefit from these guidelines.

What should you delete?

  1. The “welcome” talk and the promo talk
  2. Instructions; we don’t read them. Example.

Chapter 3: Building Blocks – Web Page Construction

From Chapters 1 and 2, we know how to build a basic webpage with text and links. We know about paths as well. Now, we’re going to learn more HTML elements (tags), the difference between block and inline elements, and what nesting means.

We’ll do this whole chapter together, with the exception of the exercises in the back of the chapter.

Creating a rough sketch of your web page on pp. 78-81.

Working from an outline to create a web page on pp. 82-84.

Quotes with the <q> and <blockquote> elements on pp. 85-93.

Block elements vs. inline elements vs. void elements on pp. 94-99.

Ordered and unordered lists on pp. 100-106.

Nesting on pp. 107-109.

Class exercise: Find what’s wrong with the code on p. 110.

A few more elements to learn on pp. 114.

Week 2: Building Blocks for the Web

Krug Chapter 2: How We Really Use the Web

What is the sad reality about how we use websites? (hint: billboard vs. great literature)

Why do we scan? –> On a mission. Don’t need to read everything. It’s a basic skill.

What is satisficing and why do we do it? –> We use the first reasonable option because we’re in a hurry, guessing is fun, and no harm is done if our guess is wrong.

We muddle through. It’s not super important, so we figure it out quickly and be done with it.

But…you want users to “get it” and not muddle through. Because

  • They will feel smarter
  • They will feel in control and explore more
  • They will find what they want

But how do we do this?

The solution is Ch. 3: Billboard Design.

Krug Chapter 3: Designing for Scanning, Not Reading

What is billboard design?

Six major tenets:

1. Take advantage of conventions

  • We have expectations about: Where things will be located on a page. How things work. How things look.
  • As beginning web designers, use these conventions.
  • Be consistent, but be clear first
  • In the end, you can be creative, yet make the creativity usable

2. Create effective visual hierarchies

  • Visual hierarchies (i.e., prominence, grouping, and nesting) reveal relationships
  • This relates to the design principles of proximity and emphasis as well

3. Break pages up into clearly defined areas

  • Use design principles to make the header, navigation, body, subsections of the body, and footer distinct areas

4. Make it obvious what’s clickable

  • What are some visual clues to “clickable”?
  • How does CSS fit into this idea of clickable?

5. Eliminate distractions

6. Format content to support scanning

  • Use a lot of headings
  • Make the headings VERY DISTINCT
  • Keep paragraphs very short, just like in newswriting.
  • Use bulleted lists to break up the text
  • And, highlight key words

And Now…Let the Coding Begin…

First, it’s helpful (and very awe-inspiring) to know the history of the Internet before we start building our own webpages.

Now you’re familiar with the Internet’s skeleton, let’s start learning about its guts – the web!

R&F Chapter 1: Universal Language of the Web

Servers, browsers, and hypertext markup language (HTML) – pp. 2-8.

Class exercise on p. 7.

Instructor-led exercises on pp. 9-31.

Individual exercises on pp. 32-42.

R&F Chapter 2: Hypertext

Instructor-led exercises on pp. 43-67.

Individual student exercises on pp. 68-76.

 

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.

 

Photographer Needed for Fundraising Event

ALBANY COUNTY PUBLIC LIBRARY FOUNDATION

Photographer Needed for Fundraising Event

The Albany County Public Library Foundation will hold its annual “A Novel Night” murder mystery fundraiser on Friday, March 31, 2017. The ACPL Foundation seeks a volunteer event photographer.

Location: Laramie Plains Civic Center South Gym, 710 E. Garfield St., Laramie, Wyoming

Event Date/Time: Friday, March 31, 2017 from 6 p.m. – 9 p.m.

Qualifications: Interested students do not need to be professional photographers or have ample photography experience to apply. Preferably the selected student will have completed a photography course. Preference will be given to students with their own camera equipment, but all applicants will be considered.

Responsibilities: Duties will include taking candid shots during the fundraising event of event décor and attendees and taking more professional photographs of groups in the photo booth. Following the event, the ACPL Foundation would like the photos edited and provided to the organization. You will be acknowledged when photos are used for promotional purposes.

Compensation: This is a volunteer opportunity benefitting a local charity. The event will allow you to gain experience and be a resume builder. Your attendance at the event will be free of charge (single ticket value of $75); heavy appetizers and non-alcoholic beverages will be provided ruing the event.

To Apply: Contact Executive Director Caitlin White at 307-630-1965 or cwhite@albanycountylibrary.org to set up a time for an informal interview.

« Older posts Newer posts »

© 2017 Website Design

Theme by Anders NorenUp ↑