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
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:
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