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.

FYI: Student Opportunities

DEPT OF INTERIOR DESIGN SEEKS STUDENT ARTISTS, ARTWORKS

Don W Collier, Program Director of Interior Design, is working on an interior design job here in Lubbock that is interested in using TTU students art work either on a permanent basis or on a rotating basis. They are looking for artworks on paper or paintings in an expressive manner either in color or black & white. The work could be large scale or a series that works together in an installation. The interiors are going to be very simple, clean line, modern and business like. There are 6 – 8 different areas that have been designed to feature art as a focal point.
The artwork will be installed in the offices of a wealth management company out of Florida in their Lubbock office. The budget is good.

If interested, contact Don W. Collier, Program Director of Interior Design
Don.collier@ttu.edu or cell phone: 806-773-0688

MAX & COMPANY SEEKS ARTIST FOR PART-TIME WORK

Max & Company (3896 50th Street) seeks an artist/painter to work 15-20 hours weekly. Pay will depend on skill level, around $9-$10 per hour. Work hours are flexible. They are seeking someone with great energy that can hand-paint texts and other designs. Someone that can take a paint brush and swirl different letter fonts. On canvas and possible furniture. Some basic furniture skills would be learned in the process. Some graphic skills would be great. They are seeking someone who could potentially paint a sign or window for advertising.

If interested call Sam Ramos at 806-787-6301; or you can stop by the store between 10 am – 4 pm.

TTU MUSEUM SEEKS TO FUND STUDENT RESEARCH RELATED PROJECTS

The Art Division of the Museum of Texas Tech has some monetary resources to encourage students—graduate or undergraduate—to use the Museum’s art collection in research or research-related projects. There are no disciplinary boundaries. Encouraging use of original art works in our collection in some meaningful manner is the target. The project may be historical, technical, cultural, sociological, anthropological, aesthetic, critical, interpretive, pedagogical or something altogether “other”? Funds can support class-based projects or independent projects.

If interested contact:
Peter S Briggs, PhD,
Helen DeVitt Jones Curator of Art
Graduate Faculty, Museum Science
Museum of Texas Tech University
PO Box 43191
Lubbock, TX 79409-3191
V 806-834-4255
Email: peter.briggs@ttu.edu

Type+Image: Assignment 01

TYPOGRAPHIC SYSTEMS AND VISUAL LOGIC

John Alcorn's ironic instructions on how to create a Dadaist poem. Published in the Push Pin Graphic, No. 11, December 1957.
John Alcorn’s ironic instructions on how to create a Dadaist poem. Published in the Push Pin Graphic, No. 11, December 1957.

The objectives:

  • to learn that an infinite number of possible solutions exist for each problem.
  • to use typographic variables to create typographic color and hierarchy.
  • to demonstrate an understanding of alignment.
  • to use alignment to create structure and cohesiveness in a layout.
  • to develop a sensitivity towards the subtleties and nuances of typographic variables

The process:
1. select a block of text from below.
2. explorations address a number of changing parameters (as follows):

Set 1:

  • select one typeface (must have a regular and bold weight)
  • use the regular weight only
  • use only lowercase letterforms in 8 or 9pt size, but not both
  • experiment with leading and alignment only.
  • vertical or horizontal use of type only.

Set 2:

  • select one comp from set one, you may vary letterspacing, weight and use small caps where appropriate.

Set 3:

  • select one comp from set two, you may vary point size (6pt-14pt), you may bleed letterforms, italics, u/lc, angled

Set 4:

  • select one comp from set three, you may vary your point size (unlimited), overlap letterforms, use counter changes, etc.

Notes:

  • all work must be produced on 8.5 x 11 inch paper, live area is contained within a seven by seven inch RULED box
  • type direction (horizontal, vertical) unless otherwise noted. (if you angle your type be very sensitive to aesthetic qualities.)
  • do not under any circumstance make literal shapes (i.e. a cow if the type is talking about cows, etc.)
  • do not use graphic elements (bullets, bars, rules, etc.)
  • make sure the font you select has a bold weight!
  • use serif or san serif
  • do not use scripts or display fonts
  • do not use color (i.e. red). create typographic color instead
  • carefully follow the parameters for each step, read!
  • think – series, sequence, development

Deadlines:
Set 01: Six Comps Due Tue Sept 1
Set 02: Six Comps Due Tue Sept 8
Set 03: Six Comps Due Tue Sept 15
Set 04: Six Comps Due Thr Sept 17


 

The texts:

01:
You walk around with a load of nitroglycerin in your head, you mix that with some other random chemicals, everyday life and love at first sight and you get some highly combustible stuff swimming around in there. And then things change, shifting faster then you could ever possibly catch up with. And you find yourself using highly advanced communication devices. The more advanced the device the less you seem to communicate. It’s a shame really as communication become faster and more accessible we seem to be losing the ability to understand each other. Your brain makes you the victim of too much information and too many choices, and you lose your self, you fall in love and it breaks your heart. So you lay down on the floor and watch the ceiling spin round and round. Reminding yourself to keep breathing.

02:
To puncture and fracture the mediocre and redefine the design of the undefined. Intertwine my mind with yours, united by my chosen words and transpose our progress to forward from reverse. I’ll propose an oath and promote the growth of all the thoughts of different folks inhabiting one earth. To suppose that one can learn on their own is not absurd, but to teach another offers opportunities for new knowledge to be learned. So I open my head and share my intellect in hopes for you to accept not reject the pictures I direct and colors I select that project a portrait that reflects my past, future and present. You can teach, I can learn, I will share with you what I’ve earned. Together we are more, because when alone, there’s not much to learn on our own.

03:
I’ve seen color collisions and rippled effects of broken rainbows collapsing into the blueness of eternity. Paths intertwined and spit from indifferent ruin of miss shaped realism and fragmented words that remain unspoken. A walking misunderstanding-cry your foreign tears and let me translate them into hearts-and pretty purple things that float. Act as if it’s all okay, because it is, isn’t it? And if it isn’t, there would be no sense in saying otherwise, less mountains are moved by our apathy. And they’re not-by the chiming of wristwatches. They’re not-by a huddled prayer and bit lip. They’re not-by the thousands of earth-shattering devastations-the root of all inexorable pain and the basis of the god damn problem.

04:
Can you hear me screaming as internal organs flail in a diseased corrosion of written instructions replaced with poetic words and actions. Chopping away at layers of superfluity, strength in numbers, screams the army of vagabonds but the morning newspaper doesn’t have compassion. Type written words-concise in the corner of page eleven’s obscurity. Can I come inside, wait till the storm blows over? Rest aching limbs for awhile-and see you through shattered glass windows-no more. Let air flow freely through pursed lips, may beauty whisper in your ear of broken promises and abandoned engagements. Let me take you home-to the cottage of contemplation. So words spin around and around my kitchen table in creation of morning’s myth. Yes, let us dine and embrace the entirety of all that rests quietly on china plates. Take my hand-come if you wish. Wipe away withdrawal-so that the ocean’s early morning sacrifices lie neatly on your dresser drawer.

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

Welcome to Fall 2015

Hey everyone!

This is the site (class.dennisschmickle.com) I will use to post assignments, links, videos, and other relevant information. Please bookmark it on whatever computers you use the most frequently.

Please download PDFs of your syllabus:
Topics in Comm. Design: Web II
Type + Image

My contact info is as follows:
Dennis Schmickle
dennis.schmickle@ttu.edu
Office: SB-25
(806) 834-6325
Office Hours: Wednesday 9:00-10:00am, or by appointment