Web II: Responsive Web

responsiveWeb users are using mobile devices more than ever to access content on the web. Create a site that accommodates that shift. In fact, you assignment is to use @media (media queries / here’s a link to some common device queries and their CSS / test it out at W3Schools) to create a site that offers different content based on the device that’s viewing the site. What kind of content would shift based on the user device?

And because the site needs to be responsive, use a grid-based approach to the layout. This will make your site scalable and responsive, without compromising aesthetics.

There are a number of methods for such. Here is a straight-forward approach on css-tricks.com. Here’s another from sitepoint.com. (Don’t forget Flexbox) And there are lots more… And here’s a good tutorial on Lynda.com.

This is a short project (two weeks), so don’t get caught up in the details. Focus on creating a css-based grid, and then changing content per device, and what that content would be.

Objectives:

  • Understand and implement the @media rule
  • Create a css-based grid framework
  • Create a responsive site that reflects different content based on detected devices
  • Think creatively about how we use sites via mobile devices vs. desktop application

Due: Thur Oct 15


 

Type + Image: Dia de los Muertos Poster

Process:

Step 1: Research the Mexican holiday, Dia de los Muertos, or “Day of the Dead.” Learn as much as your can about the holiday, it’s meanings, customs, traditions, history, symbology, etc.

Step 2: Visit this collection of grave stones. Choose an interesting vintage tombstone epitaph to interpret typographically. Don’t forget the typographic experimentation from the two previous assignments.

Step 3: Find a vintage illustration(s) or etching that is a public domain, or non-copyrighted image. There are many, many resources on the internet…

Your task is to combine the chosen text and imagery to create a poster to celebrate the spirit of Dia de los Muertos. You may use no more than three (3) typefaces. You may use three (3) base colors, but can utilize blending modes and opacity to create others. Use letter-spacing, leading, point size, etc. freely to convey the message. Use all of the type from the headstone. The basic rules of typography such as horizontal scale, baseline, alignment, etc. are of little to no concern for this assignment. Be creative!

Objectives:

  • increase your ability as a planner and form giver
  • develop an awareness of the relationship between design and meaning
  • increase and improve the quality idea generation (quality & quantity)
  • increase conceptual skills
  • increase your understanding and appreciation for typographic subtleties

Working Technique:

Draw ideas from photo references to establish spatial design relationships. Look at your text “creatively.” Find unique ways to represent your subject matter through photography, diagrams, illustrations, etc. Look at scanning techniques and drawing techniques to enhance your image selection. Research definitions, charts, graphs, etc. for unusual approaches for information graphics for your subject.

Suggestions: Evolve your thumbnail sketches into workable drawings for execution (concentrate on simplicity and stylization). Carefully consider artwork and photo characteristics (line weights, positive and negative shapes, etc.) as you begin. Work with the principal of “overlap” and create a strong visual hierarchy for your poster. Consider blending images to create new compositions.

Process: You will be required to maintain thorough documentation of your process throughout this and all assignments in this class. Keep a collection of everything pertaining to this project (research, thumbnails, sketches, illustrations, copies, etc.) and always have it with you. This collection will be turned in at the completion of this assignment and will be part of your final grade.

Project Components:

  • one 11×17 color print (unmounted) at due date
  • one hi-res digital version saved as a jpg or pdf
  • one process folder (digital or physical)

Deadlines:

  • Oct 1 – Begin assignment: Research, brainstorm, sketch
  • Oct 6 – Have 10-12 loose sketches/thumbnails
  • Oct 8 – Three computer comps due
  • Oct 13 – Critique / Revisions / work day
  • Oct 15 – Revisions / work day
  • Oct 20 – Prints, digital version, and research documentation due

Web II: Resources

Here’s a great list of resources that Jonathan sent after his visit last week:

Inspiration

https://www.typewolf.com/blog
http://www.webdesignserved.com/
https://rrrepo.co/explore
http://www.awwwards.com/

General

https://louderthanten.com/articles/story/design-machines
https://css-tricks.com/
http://www.smashingmagazine.com/
http://tympanus.net/codrops/
http://alistapart.com/

Accessibility / Utilities

http://leaverou.github.io/contrast-ratio/#hsla%28239%2C-11%25%2C46%25%2C.7%29-on-white
http://jxnblk.com/colorable/
http://iconogen.com/upload.php
http://jxnblk.com/

Organization / Resets 

https://smacss.com/
https://necolas.github.io/normalize.css/
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

References

http://codeguide.co/
http://wwwhere.io/

Text Editors

http://www.sitepoint.com/sitepoint-smackdown-atom-vs-brackets-vs-light-table-vs-sublime-text/
http://www.sublimetext.com/
https://packagecontrol.io/installation

HTML 5

http://www.jonathanlooney.com/html5structure.html
https://www.dropbox.com/s/7rc0x0i7biirqck/html5-for-web-designers.pdf?dl=0

CSS3:

https://www.dropbox.com/s/7f8q5duoq406bou/css3-for-web-designers.pdf?dl=0
http://tympanus.net/codrops/css_reference/

SASS

http://sass-lang.com/
https://www.dropbox.com/s/forp3zmdxg4b6k1/Sass-for-Web-Designers.pdf?dl=0

Responsiveness

https://www.dropbox.com/s/8dkz2kptfk1y7q0/Responsive-Web-Design-2e.pdf?dl=0
https://www.dropbox.com/s/8a240eqwig6tkrt/Responsible-Responsive-Design.pdf?dl=0
https://www.dropbox.com/s/6pq91xc9pjbqw5v/mobile-first.pdf?dl=0

Frameworks:

http://bourbon.io/
http://foundation.zurb.com/docs/
http://purecss.io/

Grid System

http://neat.bourbon.io/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Plugins and Build Tools

http://www.browsersync.io
https://css-tricks.com/gulp-for-beginners/
http://gulpjs.com/

Type+Image: Typographic Rhythm

Just as music has rhythm, so to does typography. Good type has soul, feeling, emotion, beat, tempo. Type can be happy or sad, meaningful or silly, disturbing or inspirational. A good song effects you in some way, so should good typography. It can be fast paced or slow paced, upbeat or melancholy. Learning to understand the rhythm of type is essential to a graphic designer.

You will each be given a song. There are many styles available. Listen to the lyrics.

Your task is to interpret the feel of the song using ONLY typography. It can have visual meaning, but this must be accomplished with type. Using only lyrics from the song, typeset and choose typefaces that seem fitting. Use as much of the lyrics as is necessary to achieve the feeling you wish to convey. You may use no more than two (2) typefaces. You may use multiple weights and variations of the same typeface, i.e. italics, small caps, etc. Use letterspacing, leading, point size freely to help convey the message. The basic rules of typography such as horizontal scale, baseline, alignment, etc. are of no concern for this assignment. BE CREATIVE. Think of yourself as a visual conductor.

There are no color limitations on this assignment.

  • OBJECTIVES
    • to increase your ability as a planner and form giver
    • to develop an awareness of the relationship between design and meaning
    • to increase and improve the quality idea generation (quality & quantity)
    • to increase conceptual skills
    • to increase your understanding and appreciation for the subtleties of typography

PROCESS
You will be required to maintain thorough documentation of your process throughout this and all assignments in this class. Keep a collection of everything pertaining to this project (project sheet, research, sketches, thumbnails, copies, etc.) and bring it to each class meeting. This collection will be turned in at the completion of this assignment and will be part of your final grade.

PROJECT COMPONENTS
• one 11″x17″ print
• one process notebook
PRESENTATION
• The finished print will be mounted on a 15″ x 20″ Black board


Critique: Thur Sept 24
Due: Thur Oct 1


Choose from these songs:
Johnny Cash – Folsom Prison Blues
Queen – Bohemian Rhapsody
Run-DMC – Tougher Than Leather
Talking Heads – Psycho Killer
Run The Jewels – Run The Jewels
M.I.A. – Bad Girls
Marty Robbins – El Paso
ABBA – Voulez Vous
The Rolling Stones – Paint It Black
Public Enemy – Fight the Power

Web II: HTML & CSS

Photo: http://anseladams.com/
Photo via anseladams.com

Design a site that promotes the Ansel Adams exhibition at the Museum of Texas Tech University (get the museum logo here and here, TTU logo here) using creative features of HTML 5 & CSS 3.

THE CONTENT:
ANSEL ADAMS
AMERICAN MASTER
Selections from the David H. Arrington Collection
AUGUST 14–JANUARY 17

“My world has been a world too few people are lucky enough to live in – one of peace and beauty. I believe in beauty. I believe in stones and water, air and soil, people and their future.” – Ansel Adams

ANSEL ADAMS | HIS LIFE

Ansel Adams was born on February 20, 1902, in San Francisco, California. His family came to California from New England, after migrating from Ireland in the early 1700s. Adams was known as a hyperactive and sickly child with few friends. Adams taught himself the piano, which would become his early passion.

In 1916, following a trip to Yosemite National Park, he also began experimenting with photography. Between 1929 and 1942, Adams’ work and reputation developed. Adams expanded his repertoire, focusing on detailed close-ups as well as large forms, from mountains to factories. During this period, Adams joined photographers Dorothea Lange and Walker Evans in their commitment to affecting social and political change through art. Adams’ first cause was the protection of wilderness areas, including Yosemite.

ENVIROMENTALIST AND PRESERVATIONIST

Ansel Adams loved nature and was very involved in the Sierra Club. The Sierra Club is an environmental organization in the United States. It was founded on May 28, 1892, in San Francisco, California, by the Scottish-born American conservationist and preservationist John Muir, who became its first president.

The club was one of the first large-scale environmental preservation organizations in the world, and currently engages in lobbying politicians to promote green policies.

Find out more – http://www.sierraclub.org/

arrington

THE DAVID H. ARRINGTON COLLECTION

David H. Arrington is a native Texan, born and raised in the South Dallas community of Oak Cliff. Reared by educators, his father was a principal with the Dallas ISD and his mother was a teacher at Kimball High School. David attended Texas Tech University and earned a finance degree in 1983.

After graduating from Tech, David’s interest for the oil and gas industry led him to the Permian Basin. He moved to Midland in 1984 and began a career as an independent oil producer.

David has been married for 22 years to his wife, Shelley, also an educator. He is a devoted father of five and upholds an active role in his community. David enjoys fly fishing and names many of his wells after trout flies. He also enjoys photography and jokes that he is, “a photographer trapped in an oilman’s body.”

David has been a collector of Ansel Adams since 1993 and has aggregated the largest privately owned collection with over 600 photographs. His collection has grown more from passion than intent. He has shared his collection with the public through a series of exhibitions at museums in the United States and several other countries. He also showcases Adams’ work in his corporate offices located in Midland, Texas.

With education in his blood, David enjoys accompanying the photographs on tour and teaching and speaking on Ansel Adams’ talent and creativity.

Upcoming Exhibitions | Museum Hours | Museum Directions


New in HTML5
New in CSS3
More Stuff
We’ve discussed parallax scrolling… it has it’s pros and cons. The main thing, like any new feature, is to use it in moderation.
You’ve used smooth scrolling.
Perhaps a carousel of Ansel Adams’s photos?

Also read this insightful article by Frank Chimero regarding What Screens Want


 

Objectives:
To understand current tools and trends in web design
To create a site from scratch
To design a site with good code and great aesthetics

Grades are based on:
Aesthetics
Code


Progress Report: Tue Sept 22
Due: Thur Oct 1