TYPOGRAPHY ART 223C

AGENDA

AGENDA:

(Dates and projects are subject to change)

 

 

WEEK 01 _Aug 26 - Sep 1_______________________________________________

 

  •  

 

Introduction

Questionnaire

 

Supplies, Books, Due dates, Online communication,

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

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

 

 

 

 

  •  

 

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 _Sep 2 - Sep 8_______________________________________________

 

 

  •  

MEMORIAL DAY

STUDIO TIME ON TUESDAY

I'll be available in class to assist students with any topic from the previous/current courses; Type Art223A, Art223B or Art103.

  •  

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

 

Introducing Project 1 - A [Brief]

 

Grid - Sample File [Here]

 

 

WEEK 03 _Sep 09 - Sep 15_______________________________________________

 

 

  •  

 

Grid

Grid in Design

Grid in InDesign

 

Master pages

Amazing Fullerton

  •  

Due today:

Project 1 - A

Print in binder, PDF in Titanium.

 

 

Styles

Paragraph style

Character style

Nested style?

Object style?

 

Working file - Black Leaf Tea Company [Here]

 

Introducing Project 1 - B [Brief]

 

 

 

WEEK 04 _Sep 16 - Sep 22_______________________________________________

 

 

  •  

Due Today:

Project 1 - B | 18 sketches.

Scan your sketch or Take photo for your reference. Turn in the original sketches.

 

Domain name

art.art

name.com

 

A simple modular grid for a magazine [Here]

 

 

Presentation: Elizabeth Yang

Presentation: Shanina Angela Madrigal

 

  •  

 

 

Smart objects:

How to use

How to create

 

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

 

Exercise 2 | Art Scene Magazine [Brief]

Exercise 2 | Working files [Here]

 

Magazine Mock-up [Here]

 

 

 

Presentation: Stephanie Vargas

 

 

WEEK 05 _Sep 23 - Sep 29_______________________________________________

 

 

  •  

UI vs. UX

 

Adobe Muse

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

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

 

 

5 typographic portfolio website.

Share your URLs: Mon/Wed  [Here]

Share your URLs: Tue/Thu  [Here]

 

 

Your domain name. What extension?

.com

.site

.top

.xyz

.info

.life

.us

.art

 

 

Working files [Here]

 

 

Your Typographic Portfolio website

Prepare your Muse Portfolio content for next class:

 

Home-landing page (Intro, Your personal tag-line, slogan, your name in typographic form,...)

Works (At least 5 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)

 

 

 

 

Presentation: Ahmed Riched

Presentation: Inela Luquin Sanchez

 

 

 

  •  

Setting up your Domain and Host

FTP Account

FileZilla

 

 

First upload

 

x10hosting.com

AwardSpace.com

FreeHosting.com

FreeHostia.com

 

 

Muse:

 

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 _Sep 30 - Oct 06_______________________________________________

 

 

  •  

THIS IS A

WEB FONT

 

 

Continue Muse to create online portfolio.

 

Presentation: Anthony Goudia

Presentation: Anthony Murillo

 

Presentation: Adam C

 

 

 

 

  •  

 

Responsive elements in your webpage.

Fluid layout

 

Resizing options

 

Pining to page

Pining to Browser

 

 

 

 

Presentation: Ryan Hamm

 

Presentation: jasmine guzman- nava

Presentation: Elsa Trivison

 

 

WEEK 07 _Oct 07 - Oct 13_______________________________________________

 

 

  •  

 

 

Due Today:

Your website is online.

Your homepage (landing page is done with proper typographic design)

Your homepage has links to other pages.

The may complete Works page gradually as an on-going projects. But the structure of the page must be set up and include at least 5 works including your magazine spread, your 2 sketches for website. Use only good quality image for the Works page. no low resolution image.

The About page must have one graphic (as photo, avatar,...) and a short paragraph (120 words as bio, statement, intro,...)

The contact page will contain your social media or any other channel you prefer.

 

Make sure all pages following the same theme, color pallet, type size and style.

 

SEO

page properties

Page names

File names

Description

Site plan

Metadata

Keywords

...

 

 

Connecting to your server via Finder. (Only Read access)

 

Setting up your FileZilla

Create a folder and rename to "pix" (all lowercase)

Create a simple black and white logotype in illustrator with no background 200px x 200px.

Upload 3 files. Same file, same size, different formats by fallowing order:

firstname_jpg_logo.jpg

firstname_png_logo.png

firstname_svg_logo.svg

 

 

 

 

Presentation: Natsuho Kitagawa ?

Presentation: Candace Castillo

 

  •  

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? ...)

URL - Uniform Resource Locator (URI?)

Index file (Index.html)

Source

Markup, Tag

CSS (Cascading Style Sheets)

 

 

By the end of class:

Create "2019" folder on your server.

Save your first html as index1.html

Upload your file.

 

 

 

COPY- - - - - - - - - - - -

 

​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

 

END COPY- - - - - - - - - - - -

 

Black Cafe Logo [Here]

 

 

Presentation: Natsuho Kitagawa

 

Presentation: Briana

 

 

WEEK 08 _Oct 14 - Oct 20_______________________________________________

  •  

W3Schools

w3.org/standard

ONLINE SOURCE TO LEARN: [Here]

Check the CSS Zen Garden

 

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)

 

Presentation: Mali Nelson

Presentation: Alexander Ozbirn

 

Presentation: Juan MC

 

 

Due before next class:

Your finished version of Black Cafe will be available at this address:

domainname.xyz/2019/typocafe.html

Make sure you will address the image will load on page.

 

Pay attention to margins, color, contrast, alignment, type choices, type size, hierarchy, ...

 

 

  •  

CSS Units

Abs

 

Coding on!

NO Naked text!

Thematic Break

List (Ordered, Unordered, Descriptive)

 

Practice text [Here]

 

 

 

 

 

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).

___________

 

Due before next class:

Your finished version of Black Cafe Recipe be available at this address:

domainname.xyz/2019/typorecipe.html

Make sure if you are using any image, you will address the image properly and image has been adjusted.

 

 

Presentation: Jessica Huston

 

Presentation: David Guzman

 

 

 

WEEK 09 _Oct 21 - Oct 27_______________________________________________

 

 

  •  

Coding on!

Table , List

Unordered, Ordered, Descriptive

Link

 

Table challenge:

 

 

 

Anthony Bourdain (html+css)

Find the copy on source page.

 

Upload before next class:

domainname.xyz/2019/anthony.html

 

 

Find the copy on source page.

 

Presentation: Maxine Arevalo

 

  •  

 

Continue on List

Tabular numbers

Styling a list

Glossary > American Typographers

 

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.

 

Glossary (html+css)

  • list
  • table
  • color
  • Type hierarchy
  • No image
  • Designer in "W' section appears as link and the link will open a wiki page in a new page.

 

Due before next class:

Your finished version of Glossary will be available at this address:

domainname.xyz/2019/typoglossary.html

 

Extra Credit:

Add 4 extra link(button) as "Back To Top" throughout the page only by using the code we learned so far.

For example: first button at 1/3 of the page, second at 2/3 of the page and the last button at the end of the page.

 

 

Presentation: Tarah Botich

Presentation: Benjamin Caputi

 

Presentation: Jenna Robert

 

 

 

 

WEEK 10 _Oct 28 - Nov 03_______________________________________________

 

 

  •  

Introducing Project 3 - RCC - RED CUBE CAFE [Here]

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

 

For inspiration:

brandcrowd.com

placeit.net/online-logo-maker

freelogoservices.com

 

 

 

Presentation: Bianca Bocanegra

Presentation: Angelo Maniquis

 

  •  

 

Background

Creating texture, pattern as module

Image is background, tile

 

Out source typefaces; Google Fonts

Use Google Fonts in your project.

 

Use copy (Summer Menu html ) in source page to practice with Google fonts.

Upload your result to:

yourdomain.xyz/2019/summergoogle.html

 

 

 

Make sure you are creating the structure of you RCC website by following order and address before next class:

 

  • Landing page (Home): yourdomain.xyz/rcc/index.html
  • Location page :yourdomain.xyz/rcc/locations.html
  • Menu page: yourdomain.xyz/rcc/menu.html
  • About page: yourdomain.xyz/rcc/about.html
  • Contact page: yourdomain.xyz/rcc/contact.html

 

 

Presentation:  Christine Vo

Presentation: Viktoriia Trapizonian

 

 

 

WEEK 11 _Nov 04 - Nov 10_______________________________________________

 

  •  

 

Working on RCC website...

 

Coffee Stationary Mock-up [Here]

 

 

Presentation: Breanne Zook

Presentation: Erick Murashko

 

 

 

 

 

  •  

Working on RCC website...

 

 

Presentation: Isai Carrillo

Presentation: Emily Belanger

 

Presentation: Mayu Kuwahara

Presentation: David Ossa

 

 

 

 

WEEK 12 _Nov 11- Nov 17_______________________________________________

 

 

  •  

 

*** VETERANS DAY ***

 

 

Presentation: Marilyn Jaimes

 

Presentation: Ciny Ramirez

Presentation: David Ossa

 

 

 

  •  

Introducing Project 4 - RCC - RED CUBE CAFE App [Here]

 

 

 

Start Paper Wire-framing
Download the template and print as much as you need. [Here]

Be precise when you are sketching.

If you need use ruler. Use color pencil if it helps.
All templates have dotted grid, no excuse to draw unidentified line.

Pay attention to all details, tap bars, nav-bars, margins, text-frame sizes, object scales, icon positions, ...

Although at this stage the goal is calculating all possible paths and scenarios, we can create a clean and sharp paper wire-frame.

           

Presentation:  Marilyn Jaimes

Presentation: Angelo Maniquis

 

 

EXTENDED DEADLINE RCC WEBSITE: TUESDAY 19th. 11:59PM

 

 

 

WEEK 13 _Nov 18 - Nov 24_______________________________________________

 

 

  •  

Due Today:

Paper wire-frame

 

Adobe XD

 

 

 

Presentation: Katherine Dresser

Presentation: Erick Murashko

 

 

EXTENDED DEADLINE RCC WEBSITE: TUESDAY 19th. 11:59PM

  •  

 

Hi-Res Food image/Locations  [Here]

 

 

Presentation: McKenna Elsner
Presentation: Glenn Kim

 

Presentation: Kiana D'Almeida

 

 

 

 

WEEK 14 _Nov 25 - Dec 01_______________________________________________

 

 

🦃🦃🦃

 

 

WEEK 15 _Dec 02 - Dec 08_______________________________________________

 

 

  •  

 

Presentation: Savannah Campos

Presentation: Melanie Gutierrez

 

 

 

 

  •  

 

Presentation: Shameem Ahmed

Presentation: Alejandra Mendoza

 

 

WEEK 16 _Dec 09 - Dec 15_______________________________________________

 

 

  •  

 

MON/WED CLASS - 7:00PM

MEETING ON MONDAY 12.09.19

 

7:00 Ahmed,Shameem

7:07 Bark,Rheyanna

7:14 Bocanegra,Bianca

7:21 Botich,Tarah

7:28 Campos,Savannah

7:35 Caputi,Ben

7:42 Carrillo,Isai

7:49 Elsner,Mckenna

7:56 Goudia,Anthony

8:03 Hamm,Ryan

8:10 Huston,Jessica

8:17 Jaimes,Marilyn

8:24 Kim,Glenn

8:31 Kitagawa,Natsuho

8:38 Mariscal,Felix

8:45 Murillo,Anthony

8:52 Nelson,Mali

8:59 Ozbirn,Alexander

9:06 Riched,Ahmed

9:13 Vo,Christine

9:20 Yang,Elizabeth

9:27 Zook,Brea

9:34 Katherine Dresser

9:41 Hethcoat, Brittany

 

 

TUE/THU CLASS - 8:30AM

MEETING ON TUESDAY 12.10.19

8:30    Arevalo,Maxine Irene

8:37    Aviles Jr,Carlos

8:44    Belanger,Emily Joyce

8:51    Castillo,Candace Raeann

8:58    Channita,Adam

9:05    Gutierrez,Melanie Andrea

9:12    Guzman Jr,David

9:19    Guzman- Nava,Jasmine

9:26    Kuwahara,Mayu Cereena

9:33    uquin Sanchez,Inela

9:40    Madrigal,Shanina Angela Lopez

9:47    Maldonado Correa,Juan Antonio

9:54    Maniquis,Angelo

10:01  Mendoza Moran,Alejandra

10:08  Murashko,Erick

10:15  Ossa,David Emmanuel

10:22  Ramirez,Cindy Ashley

10:29  Robert,Jenna

10:36  Saldana,Briana

10:42  Trapizonian,Viktoriia

10:49  Trivison,Elsa Karin

10:56  Vargas,Stephanie

11:03  d'Almeida,Kiana Noelle

11:10  Salgado,Angelica

11:17  Presentation: Carlos Aviles

 

 

 

  •  

Wednesday 12.11.19

Thursday 12.12.19

I'll be available during the class time to review your app (iPhone version or iPad version) for final touch. -No mandatory class

 

 

WEEK 17 _Dec 16 - Dec 22_______________________________________________

 

 

RCC APP (iPhone and iPad version) is due before 11:59PM, Tuesday 12.17.2019

 

 

NCSPD

Name_Class_Semester_ProjectName_Date.xxx

smith_art223c_fa19_selfiev1_mmddyy.jpg

 

HOME

SYLLABUS

AGENDA

STUDENTS

SOURCES

ATTENDANCE