This intensive course introduces students to intermediate skills and methods to quickly design and prototype digital experiences and user interfaces. Informed by current and historic principles of design, students will become familiar with the process of transforming an idea into a functional design by making use of basic web technologies. They will utilize and practice a shared vocabulary to critically address how the visual form of language impacts communication, navigation, and behavior in screen-based media. The experience of this intensive course will prepare students to successfully participate the following program core classes.
For the start of the class, we have selected four short readings. Please have these read for Monday, August 27.
If you’re interested, we’ve gone ahead and uploaded all this week’s readings (and some additional ones) here.
Also, please download the trial version of Sketch. We will be doing a demo on basic functionality, but feel free to play around beforehand.
Two main challenges introduced when designing for screen based media have come from the variation in screen sizes and introduction of movement based interactions.
This exercise will explore the former. How do type hierarchies have to respond to variations in proportion and scale? Find a print piece or website w/ a wide range of typographic styles and content types.
Translate the various of levels of hierarchies into a set of ‘type marks’ that you can use in your composition. e.g. display type, header, sub-header, body text (Large body copy can be replaced with lorem ipsum for the time being.) You should have at least 4 levels of hierarchy defined.
We will do this by creating a single Sketch file w/ multiple symbols which will then be arranged to produce the final composition.
For these compositions please use a minimum of two typefaces and be ready to articulate thoughts as to how they relate to the content you have selected. Don’t worry about legibility if it becomes an impediment.
Create 10 compositions at 375 x 667 (iPhone 6 dimensions).
Please upload your completed sketch documents and assets to the google drive folder under ‘Exercise 1’
Create a folder with your name and inside place the document and any necessary assets. Please name your files as ‘firstname_lastname_1’
Prepare and package your Sketch file (be sure to include the font files you used), and exchange it with a fellow student. Open a new Sketch document and import your received file as a Library. Using your new symbols and text styles, create the “same” composition at the following custom Sketch artboard dimensions (i.e. create a simple page that acts responsively to different sizes):
You will be expected to explain how your composition has reacted to the different dimensions.
Please upload your completed sketch documents and assets to the google drive folder under ‘Exercise 2’
Create a folder with your name and inside place the document and any necessary assets. Please name your files as ‘firstname_lastname_2’
Spend the extended lunch period walking outside. Pay attention to how stores “brand” themselves. Find a particular typographic system that you find interesting. Document the brand execution with your phone (photograph the logo, spatial typography, print typography, and material uses).
Once you’re back in studio, spend some time studying your photographs. What typographic systems can you identify (does there seem to be a grid? A color palette? Do they use several typefaces?)? Write these down, and spend some time recreating the branding system in Sketch, keeping in mind to produce symbols when necessary.
Now experiment. What happens when you swap a typeface? What happens when everything becomes monochrome? What kind of mood shift is produced (ex: does Nike suddenly feel like a Halal stand? Does Starbucks feel like a bank?)?
After some experimenting, decide upon a “rebrand” and develop an updated style-guide of symbols and type styles. Prepare your before/after compositions in Sketch using the initial and rebranded symbol set.
Please upload your completed sketch documents and assets to the google drive folder under ‘Exercise 3’
Create a folder with your name and inside place the document and any necessary assets. Please name your files as ‘firstname_lastname_3’
Consider our in-class discussions, critiques, and experiments exploring typographic hierarchy… How might we guide a reader’s eye through pattern and repetition? How might we ease a [user, consumer, audience, reader]’s navigation of interfaces, charts, and texts through spacing and type styles? How might we consciously add opinion and perspective to text through typographic hierarchy?
Part A
Select and download your content.zip from the class site. To continue exploring the effects of hierarchy on legibility, navigability, and perspective, create three different web designs, each should explore a different content structure (text index, grid w/ images, ‘featured’ content, drop downs). Each design will be presented in custom artboard at Desktop dimensions (1440 x 900) and can use multiple artboards per design.
You should generate and use Sketch Symbols for your designs. Additionally, utilize at least one instance of hotspots and fixed elements for each design. Be prepared to show your designs in Sketch’s preview setting.
Part B
Based on this morning’s HTML + CSS tutorial, convert your hierarchical system into a basic webpage.
Also, find a website with a reading experience you like to bring in as an example.
A reader is a curated collection of texts meant to explore or present a given topic.
The Active Reader is a collaboratively built website that displays the readings, experiments, research and references we have collected and examined over the past week.
Your assignment is to design and build a part of our class’ web-reader. Your assignment consists of the development of a type system that can be applied to:
Each student’s reader contribution will be built into a resource hosted at typeinteraction.teachinginter.net/reader and is meant to act as a base resource for the rest of the semester.
Spend today researching and compiling visual and written resources, along with beginning your Sketch designs.
This evening should be spent beginning to code out your site.
Spend this evening finishing up your section of the Reader.
For tomorrow, please have your file structure prepared as follows:
images/your-reading-title-01.jpg
Programming
Fonts & Open Source