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.

Web II: Front-end Development

(Please download this Introductory PDF…)

Assignment 01: Front-end Development

Use Photoshop and/or Illustrator to mock-up a robust website for a local restaurant of your choice (no national chains or franchises). This of this as the blueprint that would be handed off to a development team who would implement all the actual coding and site building. But you would want to *show* as much as possible. A site structure, visual effects, specify colors and type, etc.

Then… research! What does a great website (particularly for a restaurant) look like? How does it work? What is featured, what is excluded?

Now stop browsing and get to work! Don’t get lost in the googlenets!

Create the following pages with a 1024x768px viewing area and 72ppi:
Home/Landing
Menu
Locations/ Directions /Hours
About: 
Contact, History
Articles (blog)
(Or some similar configuration of these pages… at least 5 pages)
PLUS!  an abbreviated mobile version

 

If your chosen restaurant already has a site, you will represent any and all content currently on the site, but you can add new content if it is beneficial.

Your site should bear no resemblance to the actual site.

You can download browser safe-area templates and browser elements from DesignersToolbox.com. Indicate rollover effects and other interactivity.

Objectives:
Focus on design
Research best-practices in contemporary web design
Understand the designer/developer relationship
Give great design to those in your area

Project Components:

  • A site with at least 5 pages
  • An accompanying mobile version

We will critique your sites on-screen as PDFs
You will submit a final PDF that shows all pages and (with indications of their various forms of interactivity) as the finished project


Critique: Thr Sept 3
Due: Thr Sept 10