HOME

SYLLABUS

AGENDA

STUDENTS

SOURCES

ATTENDANCE

TYPOGRAPHY ART 223C

AGENDA

AGENDA:

(Dates and projects are subject to change)

 

 

WEEK 01 _Jan 21_______________________________________________

 

Tuesday

 

Introduction

 

Supplies, Books, Due dates, Online communication,

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

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

 

 

 

 

Thursday

 

Review on Basic Elements of 2D Design:

Point, Line, Shape, Texture, Value, Color, …

 

Review on Basic Typography / Classifications / Anatomy

 

File format: NCSPD

Upload a selfie, IG handle

 

Exercise 1 [Here]

 

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

To Try > TypeTester

 

 

WEEK 02 _Jan 28 _______________________________________________

 

 

Tuesday

 

Type Methods

 

Text / Paragraph / Column Development

 

Lynda: InDesign CC 2019 Essential Training by David Blatner

Recommended : Entire course

Required: Chapter 1, 4, 9, 10

 

Work-flow / Workspace

Character style

Paragraph style

Nested style

 

Download In-class working file from Titanium

Introducing Project 1 - A [Brief]

 

Did you try TypeTester ?

 

Thursday

 

InDesign Work-flow

 

Starting Project 1

Project 1 due: Next Thursday

 

 

WEEK 03 _Feb 04_______________________________________________

 

 

Tuesday

 

Review on the 80 paragraphs

 

Grid and Grid and Grid.

Introducing Project 1 - B [Brief]

 

 

 

Thursday

 

Due before class: Project 1-A (80 Paragraph) in PDF format, Upload to Titanium

 

Project 1 - Part B

Turning sketches to Digital edition

Replacing grey boxes with the copy.

 

Pairing Methods

 

Worth reading:

Want to Become the Next U.S. President? Change the Color of Your Logo by Billie Muraben [Here]

 

 

 

 

WEEK 04 _Feb 11_______________________________________________

 

 

Tuesday

 

Presentation: Garrett Hoang

 

Due before class: Project 1-B in PDF format,  Upload to Titanium

 

We are using the result of Project 1 (A and B) to design a magazine layout.

 

A simple modular grid for a magazine [Template]

 

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

 

 

Exercise 2 [Brief]

Exercise 2 [Copy]

 

 

Upload your draft version by the end of class.

Upload your final design before next class.

 

 

Thursday

 

Presentation: Jeremiah Hustad

 

Due before class: Exercise 2 in PDF format.

Make sure you will have the file with you as we will create a mock-up for magazine.

 

Mock-ups and Smart objects

  • How to use
  • How to create

 

Download magazine mock-up [Here]

 

5 typographic portfolio website.

Share your URLs: [Here]

 

 

Prepare your Muse Portfolio content for next class:

  • Home (Intro, Your personal tag-line, slogan, your name in typographic form,...)
  • Works (At least 4 images in good quality, additional to your magazine mock-up)
  • About (Bio, Statement or any text material at least 120 words)
  • Contact (Email, cellphone, other social media or pages)

 

 

 

WEEK 05 _Feb 18_______________________________________________

 

 

Tuesday

 

Presentation: Brandon Bollinger

 

UI vs. UX

 

Adobe XD

Adobe Muse

 

 

Adobe Muse

Structure, page size, master pages, menu, inside pages

Creating pages, links, responsive pages, breaking point, ...

 

Review your shared URLs

Review your domain name choices

 

Your domain name. What extension?

 

.com

.site

.top

.xyz

.info

.life

.us

.art

 

Availability? Registering your domain name

Setting up your host

Suggestion for try (free): 50webs.com

Access to your FTP account.

 

Share your personal domain: [Here]

Share your muse_portfolio_asset [Here]

 

Start Adobe Muse [Here]

 

 

 

 

Thursday

 

Presentation: Margaret Zisk

 

Continue on Adobe Muse and XD

 

 

 

Share your 2 sketches - Screen shots for Adobe Muse Portfolio

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 another 1080 to the height)

 

 

 

 

 

 

WEEK 06 _Feb 25_______________________________________________

 

 

Tuesday

 

Presentation: Sergio Palao

 

Vector shape on web.

Use Adobe Illustrator to create your SVG. [Export]

 

Take advantage of Adobe CC Libraries. Activate and start using them across

 

Have an updated version of FileZilla installed [Here]

 

 

Uploading both sketches to your host.

Creating additional folders for different destinations.

yoursite.com > Sketch I

yoursite.com/v2 > sketch II

 

Required Footer on all pages (You will update it through master page every time you are adding a new content):

 

DESIGN BY NAME LASTNAME, UPDATED 10:15 PM, FEB 20, 2019

 

Typeface: Franklin Gothic URW Compressed

Size: 12pt

In Black or White (based on your page background color)

Align to the center of your page

 

 

 

Thursday

 

SEO

Titles, file names, keywords,...

 

Create and add your favicon (2 characters, your initials)

 

Presentation: Danielle Peterson

 

 

 

 

 

WEEK 07 _Mar 04_______________________________________________

 

 

Tuesday

 

 

 

Due: Muse Portfolio (RWD, 2 version)

 

Prototype

Concept > Low fidelity > High-fidelity

 

Download working file [Here]

Adobe XD sample [Screenshots!]

 

Thursday

 

Presentation: Jennifer Zhu

 

 

Bring your concepts and Low-fidelity phase to class.

 

Download San Francisco Typeface [Here]

Required: SF Pro

Recommended: SF Pro, Compact, Compact Rounded

 

Download Wireframes Kit [Here]

Download Apple iOS UI kit [Here]

 

EXTRA:

Download XD UI [Here]

UI iPhone Status [Here]

 

 

Share your wireframe URL in Titanium and  [Here] Before Friday 11:55PM.

(Before sharing, save your file by NCSPD format.)

 

Complete the Mobile portfolio prototype before next class.

Share the URL in Titanium and [Here]

 

 

WEEK 08 _Mar 11_______________________________________________

 

 

Tuesday

 

Presentation: Courtney Baze

 

Due today: Mobile Portfolio prototype before class.

 

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)

 

By the end of class:

Create "html" folder on your server. Follow instruction.

Save your first html as index1.html

Upload your file.

 

 

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 friendly meet-up to an elegant corporate fundraising.

Location and Hours

Fullerton, CA;

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

 

 

Logo in png format: [Here]

 

 

 

Thursday

 

 

Presentation: Emily Shry

 

 

W3C

w3.org/standard

ONLINE SOURCE TO LEARN: [Here]

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)

 

 

 

 

WEEK 09 _Mar 18_______________________________________________

 

 

Tuesday

 

Presentation: Jayden Marcotte

 

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 Basics

You should be certified by the end of semester.

When you complete the course, you will receive a digital certification. You will share the certification and graduation code with me.

 

TEXT COPY

___________

Black Cafe Recipe

 

Tapenade (Olive Spread)

 

This is a really simple dish to prepare and it’s always a big hit at parties. My father recommends:

 

"Make this the night before so that the flavors have time to blend. Just bring it up to room temperature before you serve it. In the winter, try serving it warm."

Ingredients

 

1 8oz. jar sundried tomatoes

2 large garlic cloves

2/3 c. kalamata olives

1 t. capers

Instructions

 

Combine tomatoes and garlic in a food processor. Blend until as smooth as possible.

Add capers and olives. Pulse the motor a few times until they are incorporated, but still retain some texture.

Serve on thin toast rounds with goat cheese and fresh basil garnish (optional).

 

___________

 

Thursday

 

Presentation: Andrew Hoang

 

Intro on Bracket [Download]

Theme [Here]

Extensions [Here]

(Emmet)(Validation)(Beautify)

 

Use Adobe Bracket for Recipe practice.

 

Adding Links -  Anchor Elements

id

Create your Glossary page

 

Design the Recipe

 

 

Extra : pt vs px [Reading]

 

 

 

WEEK 10 _Mar 25_______________________________________________

 

 

Tuesday

 

Presentation: Danielle Peterson

 

List from Wikipedia, including glossary.

(You will find the list in source page)

 

Creating css for your html

 

Anthony Bourdain's Page (html+css)

 

Table element

 

Table challenge!

 

Glossary Project:

Create a page for American Typographers:

 

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

(you can find the list in source page)

 

Design the page accordingly. Incorporate any elements that we've had so far. Choice of typefaces, Heading (h1, h2, ...), Colors, Breaks, Horizontal rule, lists, ...

Due: before our class on Apr 16th. Upload your page to your "html" folder by addressing: yourdomain.xyz/html/yourname_glossary.html

 

 

Thursday

 

_ _ _

 

 

WEEK 11 _Apr 01_______________________________________________

 

 

🌴🍷💤

 

 

 

WEEK 12 _Apr 08_______________________________________________

 

 

Tuesday

 

Presentation: Danielle

 

 

CSS

Inline style | Embedded style| External style

 

link | import

 

Cooking with Anthony Bourdain

Create HTML + CSS and upload to your host.

In "cafe" folder create a new folder as "anothny" and save your html file as: yourname_anthony.html

You should save the css file as style.css

Don't forget to upload the image as well.

 

The page must be accessible via this url:

yourdomain.xyz/cafe/anthony/yourname_anthony.html

 

Due: before our class on apr 16th.

 

You are welcome to design any extra edition by your taste or additional style.

Save them as yourname_anthony_v2.html

Don't forget to save css file accordingly. )for example: style_v2.css)

 

Thursday

 

Presentation: Kelsey, Jamie

 

Inheritance

Cascade (Priority, Specificity, Rule Order)

Box Model

CSS Units

Measuring type and space

Relative vs Absolute

 

Developer Tools / Real time practice

 

Apply some CSS units to the Glossary!

 

Class lecture [PDF]

 

 

 

WEEK 13 _Apr 15_______________________________________________

 

 

Tuesday

 

Presentation: Julia

 

Due: Glossary page

 

Title of final project: "CUBE CAFE"

Logo, Logotype, slogan?, branding, imagery, ...

 

 

Download mock-up 1 [Here]

 

 

Just for inspiration:

brandcrowd.com

placeit.net/online-logo-maker

freelogoservices.com

 

TYPE AND FONT IN CSS

 

Download Menu html [Here]

 

 

 

 

 

 

Thursday

 

Presentation: Michael

 

Colors and Backgrounds, class notes [Here]

Color names on W3SCHOOLS [Here]

 

Outsource typeface in menu for Madilyn [Here]

 

 Introducing final project | Cube Cafe Website [Here]

 

- Landing page (Home)

- Menu

- Locations

- About

- Contact

 

 

Share your website wire-frame [Here]

 

By next class we have all pages (at least in html structure) uploaded to your host

yourdomain.xyz/cubacafe/index.html

yourdomain.xyz/cubecafe/locations.html

yourdomain.xyz/cubecafe/about.html

yourdomain.xyz/cubecafe/contact.html

yourdomain.xyz/cubecafe/menu.html

 

 

 

 

WEEK 14 _Apr 22_______________________________________________

 

 

Tuesday

 

 Introducing final project | Cube Cafe App [Here]

 

- Splash

- About

- Locations

- Menu

- Order Online

- Contact

 

Adobe XD working files [Here]

Hi-Res Food image/Locations  [Here]

 

 

 

Thursday

 

Presentation: Madilyn

 

 

 

WEEK 15 _Apr 29_______________________________________________

 

 

Tuesday

 

How is your App wireframe?!

 

 

Thursday

 

 

Presentation: Nancy

Tablet version? iPad?

 

 

WEEK 16 _May 06_______________________________________________

 

 

Tuesday

 

Any missing presentation?
Any redo? resubmission?

 

🍕🍕🍕🍕🍕🍕

 

 

Share your most updated links [Here]

 

Thursday

 

 

---

 

 

 

WEEK 17 _May 06_FINAL____________________________________________

 

 

Path for Restaurant website: /cubecafe/

 

yourdomain.xyz/cubacafe/index.html

yourdomain.xyz/cubecafe/locations.html

yourdomain.xyz/cubecafe/about.html

yourdomain.xyz/cubecafe/contact.html

yourdomain.xyz/cubecafe/menu.html

 

All images and css files will in the same folder: /cubecafe/

 

 

 

😔Tuesday  May 14th.

Deadline for wireframe/App and Wesbite

By 7:30pm

 

 

 

 

 

NCSPD

Name_Class_Semester_ProjectName_Date.xxx

smith_art223c_sp19_selfiev1_mmddyy.jpg