SYLLABUS

AGENDA

STUDENTS

SOURCES

ATTENDANCE

TYPOGRAPHY ART 223C

AGENDA

AGENDA:

(Dates and projects are subject to change)

 

 

WEEK 01 _August 27_______________________________________________

 

Monday

 

Introduction

 

Supplies, Books, Due dates, Online communication,

In-class practices, Assignments/Projects, written exams, Presentation, Final, ...

Review Syllabus, Office hours, Presentation date, ...

 

Review on Basic Typography / Classifications / Anatomy

 

 

Wednesday

 

Type Methods

 

Text / paragraph / Column Development

 

Work-flow / Workspace

Character style

Paragraph style

Nested style

 

Download In-class working file from Titanium

Introducing Project 1 - A

 

To read > It’s About Legibility by Allan Haley > [Here]

To Try > TypeTester

 

 

WEEK 02 _Sep 03_______________________________________________

 

Monday

 

Labor Day - Campus Closed

 

 

Wednesday

 

Online questionnaire > [Here]

 

Hierarchy / Grid / Signals

Type Methods II

Visual Balance / Rule of Thirds

 

Due:  Project 1 - A (in print and digital)

 

In-class working file > [Here]

Upload your finished In-class practice to Titanium

 

Introducing Project 1- B

 

 

 

WEEK 03 _Sep 10_______________________________________________

 

Monday

 

Due: Project 1 - B  18 Thumbnail sketches in 3 pages / Pencil on paper

Turning the sketches to the digital version by creating similar template in Illustrator or InDesign.

 

Know your system!

Axial

Radial

Dilatational

Random

Grid

Transitional

Modular

Bilateral

 

Using techniques: Line break, Leading, Spacing (Kerning, Tracking)

To attention: Tone, Direction, Groups/Subgroups, Rhythm

 

 

Wednesday

 

Finishing digital version of 6 sketches. Print. (?)

 

Hierarchy, Emphasis, Readability

Exercise: Art Week [Here]

9 sketches

 

Mock-up [Here]

 

WEEK 04 _Sep 17_______________________________________________

 

Monday

 

Art Week print - magazine mock-up

6 sketches in print from last week. (if you did not return the print version).

 

Introducing Project 1 - Type Rules Booklet [Here]

 

First phase: Sketching in detail

 

Your sketch must clarify:

Single vs Spread

Margins / four sides

Gutters

Columns (guides?)

Text block/position

Display block/position

Image frame/position

Object frame/position

Header block

Footer block

Folio

 

6 draft sketch in class

 

Wednesday

 

6 sketches for your booklet

Different Idea, DiFFerent idea, different IDea, diffeRENT iDea,...

 

Review 6 Sketches

 

Define your booklet preset

Master page

Table of content

 

 

WEEK 05 _Sep 24_______________________________________________

 

 

 

WEEK 06 _Oct 01_______________________________________________

 

Monday

 

Due:Booklet Draft print

 

 

 

Wednesday

 

Binding booklets

 

 

 

WEEK 07 _Oct 08_______________________________________________

 

Monday

 

The most updated version of booklet in Titanium.

 

UI vs. UX

 

Adobe XD

Adobe Muse

 

Your domain name. What extension?

 

.site

.top

.xyz

.info

.life

 

Available?

 

5 typographic portfolio website.

Share the URLs: [Here]

 

Start Adobe XD [Here]

Start Adobe Muse [Here]

 

 

 

Wednesday

 

 Adobe XD

Connection to Photoshop
Design/Wireframe/Test

 

Download working file [Here]

 

 

 

WEEK 08 _Oct 15_______________________________________________

 

Monday

 

Share your 2 sketches - Screen shots (XD or Muse

Save them side by side with this spec. in photoshop:

72dpi / w3990 x h2160 / RGB

(If you have longer design that need to scroll down add 1080 to the height)

 

 

 

 

Wednesday

 

Your selected sketch in action (Working links)

 

 

 

Sources_________

 

  • Backgrounds Patterns

https://www.toptal.com/designers/subtlepatterns/

 

 

  • Scroll:

www.scrolleffects.com

http://musescrollmotion.businesscatalyst.com

 

 

 

 

 

 

 

WEEK 09 _Oct 22_______________________________________________

 

Monday

 

Animate your Texts/Objects

Scroll effect on Text/Shapes

 

Wednesday

 

Compositions / Triggers / State buttons

 

 

Splash [Here]

 

 

Code for Caroleen:

<style>

.fullHeight {

min-height: 100vh !important;

height: 100vh !important;

}

</style>

 

cafe.html !

 

WEEK 10 _Oct 29_______________________________________________

 

Monday

 

W3C

Internet Vs. Web

Protocols (HTTP, FTP, POP3,...)

Hypertext Transfer Protocol, Link

Server, Domain, DNS, IP

Frontend vs Backend (Client-side vs Server-side)

Browser, Browser engine (Desktop, Mobile, TV?, Watch?, game consoles? accessible?, ...)

URL - Uniform Resource Locator (URI?)

Index file (Index.html)

Source

Markup, Tag

CSS (Cascading Style Sheets)

w3.org/standard

ONLINE SOURCE TO LEARN: w3schools.com

 

 

TEXT:

​BLACK CAFE

The Coffee

The Black Cafe offers casual coffee and special fare in a relaxed atmosphere. The menu changes regularly to highlight the freshest local sources.

Menu

You have fun. We'll handle the cooking. Black Cafe Catering can handle events from snacks for a meetup to elegant corporate fundraisers.

Location and Hours

Fullerton, CA;

Monday through Thursday 11am to 9pm; Friday and Saturday, 11am to midnight

 

Logo in png format: [Here]

 

 

Wednesday

 

Design your Cafe page by following the example.

Presentation: Hang Nguyen

 

HALLOWEEN

 

 

WEEK 11 _Nov 05_______________________________________________

 

 

Monday

 

Presentation: Rosalie Talbott

(and Hang Nguyen?)

 

img [Here]

br [Here]

attribute

css

style

border

color / hex code [Here]

 

Modify the page to achieve a readable and legible result.

(Do not add any new tag)

 

Wednesday

 

Coding on!

Headings (h1 - h6)

Naked text!

Thematic Break

List (Ordered, Unordered, Descriptive)

 

Practice text [Here]

SoloLearn (Create a profile)

Complete HTML Fundamentals:

- HTML Overview

- HTML Basic - to the beginning of the "Tables"

 

Intro on Bracket

Theme

Extension

(Emmet?)(Lint?)(Validation)(Beautify)

 

 

 

WEEK 12 _Nov 12_______________________________________________

 

Monday

 

Veterans Day - Campus Closed

 

 

Wednesday

 

Presentation: Harir Djavadi

 

 

Create a page for American Typographers:

List from Wikipedia, including glossary.

The pages for designers in letter"L" will open in a new window.

(you can find the list in source page)

Marking up text | Adding Links [PDF]

 

 

 

WEEK 13 _Nov 19_______________________________________________

 

 

Monday

 

Presentation:  Alexis Lara

 

 

 

Wednesday

 

Presentation: Priscilla De Nova

 

 

WEEK 14 _Nov 26_______________________________________________

 

Monday

 

Restaurant App

Creating assets to use in app and website

Download mockup [Here]

 

Anthony Bourdain [Here]

 

 

Class note on Table [Here]

 

 

Wednesday

 

Presentation:  Lilian San

 

Tables

CSS

Creating CSS

Adding CSS to the document

 

 

WEEK 15 _Dec 03_______________________________________________

 

 

Monday

Presentation: Dmitri Maun

 

Black Cafe App

Adobe XD

 

Extra food images [Here]

 

Wednesday

 

App project Brief [Here]

 

Download working file Dec. 5  [Here]

 

Download UI / PSD files [Here]

 

 

 

WEEK 16 _Dec 10_______________________________________________

 

 

Monday

 

Review your structure/wireframe

 

Final Website map

 

Sharing Prototype from XD [Here]

Share your app wireframe [Here]

 

UI iPhone Status [Here]

 

 

Wednesday

 

Any presentation?

 

Download iOS UI Kit in SVG [Here]

Wireframe + some icons [Here]

 

Download working file Dec 12 [Here]

 

 

 

WEEK 17 _Dec 17_______________________________________________

 

EXAM WEEK

 

Black cafe Website (html & css)  (Upload:  YourWebsite.xyz/cafe/final/index.html)

Black Cafe App iPhone, iPad(Publishing Prototype and Design Specs)

Record a video from your prototype iPhone and iPad(Adobe XD will save your video as .mp4 file)

When finish SOLOLearn HTML5 course, share your certificate with me.

 

 

 

All projects due before 7:30pm

Wed Dec 19 - 7:30pm

 

_______________________________________________

 

 

 

 

HOME