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

Web II: Designers & Developers

I recently contacted Jay David, Interactive Creative Director at TOKY (St. Louis), regarding the working relationship between designers and developers. Jay’s work has always been inspiring to me, so it only made sense to contact him first. In many cases, these teams have different points-of-view and approaches to making work.

Here are his responses:

1. When you work with a web development team, what do the developers expect from the designers? 

Detail. The most frustrating thing I hear from developers when working with designers is the lack of attention to detail in how the user interface works (not the design details). Designers sometimes slave over a design and get it just in the right pixel-perfect place, but then quickly realize that it all falls apart when it gets built and used by real humans. 

  • Developers want a plan for worst case scenarios: What happens when someone enters too much text in an area you designed? What if the client uploads a vertical image in an area that fits only horizontal images? 
  • Developers want a plan for screen sizes: It’s a rare developer than can just assume what you want to happen when someone looks at your site on a tablet or phone. Design as many screens as you can within budget. In a typical project we will design all desktop and mobile versions of the site, and a few key pages on tablet. We’ll also mock up how navigation changes at several breakpoints. 
  • Developers want clean files: If you’re working in photoshop, developers love clean files, named layer sets, layer comps, rollover states, etc.. Especially helpful would be mocking up a few animation examples in something like Keynote or After Effects. There are a lot of other tools out there that can help to prototype. We’re also big fans of using Invision to work through the design process with our developers.
  • Developers want a design spec or a style guide: This is something we do at the tail end of the design phase on all of our projects. We develop a document that explains how all components of the site will be used, how they will interact, and what type of content restrictions there are. Developers (and clients) review this and sign off before the project starts so they have a clear understanding of what is about to be developed. This could be a time consuming process, but we’ve found it to save future development headaches that could blow a budget. 
  • Developers want communication: (This one can be tough because many developers can lack in communication skills.) We try to involve our developers at many points in the beginning parts of the project. The best experiences we’ve had have been when developers have an active role in brainstorming functionality and are available to set realistic expectations on how things will work. If you don’t yet know who will be developing your site, save references, links, or code demo sites that help articulate what you’re trying to do.

2. Obviously, a designer needs to be web-savvy to a degree, but how deep should that knowledge go?

I think most designers are surprised to learn that development knowledge does not need to go that deep. I think its more important to have a genuine curiosity than know-how. Designers need to know about web typography, a basic understanding of CSS, and have a pulse on modern standards and trends of development. There are a lot of tools out there now that make prototyping and simple front end development much easier. Immerse yourself in the industry, but to have a rewarding career as a designer I would recommend concentrating on coming up with a great concept, innovative storytelling, or a unique typographic solution than worrying about how to debug a broken javascript snippet.

3. What makes developers want to smash the wall? What should designers know/do to keep things running smoothly? (That’s a big one, and probably difficult to answer.)

Developers are usually last in line of the web design process. They’re the ones that no one really understands what they do all day (or why it takes so long). They’re also the ones who feel the pinch when everyone else before them blew their deadlines in the process leading up to where they take over. The number one way to keep things running smoothly, in addition to meeting your deadlines, is to communicate. Ask questions, see if they have a better way to come up with how something could work. Make sure what you’re designing will not overcomplicate the development process. I’ve seen this countless times: A designer comes up with a beautiful solution to a problem – but it’s never really been done before – therefore you burn through several developers (and the budget) before you end up having to simplify key parts of the interactions. A lot of project headaches could be solved if you just present your work to the developer: Talk it out, walk them through the process and how things work, and listen to their concerns and ideas for how to do something that could achieve the same goal.