TYPOGRAPHY ART 223C
AGENDA
AGENDA:
(Dates and projects are subject to change)
WEEK 01 ||| Aug 24 - Aug 26 ||||||||||||||||||
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
Lynda: InDesign CC 2019 Essential Training by David Blatner
Recommended : Entire course
Required: Chapter 1, 4, 9, 10
WEEK 02 ||| Aug 31 - Sep 02 ||||||||||||||||||
Review on final version Ex.1 from last week.
Understanding type size.
Point, picas.
Amazing Fullerton [Here]
By the end of Wednesday Class Sep 02nd., upload your Amazing Fullerton spread as PDF to Canvas.
Before next class, make sure you are comfortable with InDesign Essential.
Project 1 uses InDesign. We need to make sure we are familiar with appropriate tool set.
Did you save your Amazing Fullerton as spread?
Did you upload it to the canvas?
Any question?
Review on Basic Typography / Classifications / Anatomy
Project 1 - Part A [Brief]
Grid - Sample File [Here]
Before leaving the class tonight, make sure you are able to make the structure of the Project 1 - Part A in InDesign.
Then you can work on text and have the file ready, so we can work on file next week.
Save your file as InDesign file and have it ready on your machine.
We will work on your file during the class.
WEEK 03 ||| Sep 07 - Sep 09 ||||||||||||||||||
Project 1- Part A
Creating structure and working in paragraph.
Aligned and Justified paragraph.
WEEK 04 ||| Sep 14 - Sep 16 ||||||||||||||||||
Due today Sep 14:
Project 1 - Part A
Digital version to Canvas.
Type Methods
Text / Paragraph / Column Development
Introducing Project 1 - B [Brief]
Styles
Paragraph style
Character style
Nested style?
Object style?
Working file - Black Leaf Tea Company [Here]
WEEK 05 ||| Sep 21 - Sep 23 ||||||||||||||||||
Due today Sep 21st.:
Project 1 - Part B
Digital file, PDF format, 36 pages, letter size
A simple modular grid for a magazine [Here]
We are using the result of Project 1 (A and B) to design a magazine layout. (Grid + Paragraph)
Exercise 2 | Art Scene Magazine [Here]
Exercise 2 | Working files [Here]
Smart objects:
How to use
How to create
Magazine Mock-up [Here]
Mock-up Examples to use [Here]
Share your design from your machine.
Upload before next class:
a. Your final version of Art Scene magazine - Only 2 pages in spread in PDF format
b. Your mock-up version of Art Scene magazine - in JPG format
Domain name:
50webs.com
art.art
name.com
During the weekend:
Research 5 typographic portfolio website.
Share your URLs: [Here]
Your domain name
WEEK 06 ||| Sep 28 - Sep 30 ||||||||||||||||||
Your domain?
Your host?
Setting up name servers...
FTP account?
UI vs. UX
Adobe XD | Adobe Muse
Structure, page size, master pages, menu, inside pages
Creating pages, links, responsive pages, breaking point, ...
During the weekend:
>> Create 2 Sketches in Photoshop
Save them side by side following below spec:
72dpi / RGB
Each sketch: W1280px x H800px
20px gutter/margin
Total document size: W2620 x H800
(If you have longer design that need to scroll down add another 800 to the height)
In your sketch you will pay attention to:
- What typeface?
- What size?
- What composition?
- What color palette?
- What arrangement?
- What background color?
>> Prepare your Muse Portfolio content for next class:
Home-landing page (Intro, Your personal tag-line, slogan, your name in typographic form,...)
Works/Portfolio (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)
WEEK 07 ||| Oct 05 - Oct 07 ||||||||||||||||||
THIS IS A
WEB FONT
THIS IS A
WEB FONT
Responsive elements in your webpage.
Fluid layout
Resizing options
Pining to page
Pining to Browser
WEEK 08 ||| Oct 12 - Oct 14 ||||||||||||||||||
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
...
Let's talk www
Filezilla for MAC [Here]
Filezilla for Windows [Here]
Green Cafe Logo [Here]
W3Schools
ONLINE SOURCE TO LEARN: [Here]
img
br
color / hex code
Modify the page to achieve a readable and legible result.
(Do not add any new tag)
Due before next class:
Your finished version of Black Cafe will be available at this address:
domainname.xyz/2020/gcafe.html
Make sure you will address the image will load on page.
Pay attention to margins, color, contrast, alignment, type choices, type size, hierarchy, ...
WEEK 09 ||| Oct 19 - Oct 21 ||||||||||||||||||
I don't remeber exacylt what we did during this class!
But I beleive we started working in Text editor to create html
We installed our Filezilla and connected to the host.
and lecture on Web/Internet
...
Heading tag
Block elements, In-line elements
Comments tag
Watched one session Adobe Max
Image tag and Alternative
Line break
CSS
Adding CSS / Style in Head
Body
background-color
margin
font-family
font-weight
text-align
color
WEEK 10 ||| Oct 26 - Oct 28 ||||||||||||||||||
From before:
W3Schools - ONLINE SOURCE TO LEARN: [Here]
img [Here]
br [Here]
color / hex code [Here]
Your finished version of Black Cafe will be available at this address:
domainname.xyz/2020/cafe.html
Make sure you will address the image properly, otherwise the image will not load in your page.
Pay attention to margins, color, contrast, alignment, type choices, type size, hierarchy, ...
Brackets [Here]
List:
Ordered list
Unordered list
Description list
TEXT COPY
___________
Black Cafe
Secret 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:
Find an appropriate image for this recipe.
Your finished version of Secret Recipe be available at this address:
domainname.xyz/2020/recipe.html
Make sure when you are using your image, you will address the image properly and image has been adjusted by size and position.
Find the list for your glossary project in source page.
Due before next class:
Your finished the glossary page in the following address:
domainname.xyz/2020/index1.html
WEEK 11 ||| Nov 02 - Nov 04 ||||||||||||||||||
List:
Ordered
Unordered
Description
Create link <a>
Find the list for your glossary project in source page.
Due before next class:
Your finished version of glossary page in the following address:
domainname.xyz/2020/index1.html
WEEK 12 ||| Nov 09 - Nov 11 ||||||||||||||||||
Continue on Table ...
CSS
Link rel
Anthony Bourdain (html+css)
Find the copy on source page.
Upload before next class:
domainname.xyz/2020/ab.html
SoloLearn (Create a profile)
Complete HTML Fundamentals:
- HTML Overview
- HTML Basics
You will 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.
glossary2 (html including table)
list
table
color
Type hierarchy
The final version of glossary page will be available at :
domainname.xyz/2020/index2.html
Your page must contain HTML including a designed table for A to Z characters.
Due Next week:
ab.html
index2
WEEK 13 ||| Nov 16 - Nov 18 ||||||||||||||||||
Introducing Last Project - GCC - GREEN CUBE CAFE App [Here]
Creating assets for the app.
Logo, logotype(2 versions?)
Slogan?, branding, imagery, ...
For inspiration:
brandcrowd.com
placeit.net/online-logo-maker
freelogoservices.com
Imagery according to restaurant cuisine
Download the template and print as much as you need. [Here]
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.
WEEK 14 ||| Nov 23 - Nov 25 ||||||||||||||||||
🦃🦃🦃
WEEK 15 ||| Nov 30 - Dec 02 ||||||||||||||||||
Continue on Adobe XD
WEEK 16 ||| Dec 07 - Dec 09 ||||||||||||||||||
LAST WEEK
Last review on your app.
Refining UI / UX
Wednesday: No mandatory class, I will be available to answer question and help those who need help for the app project.
Due date to share your app link and any other missing projects/certificate/online pages: December 14th, 7pm.
NCSPD
Name_Class_Semester_ProjectName_Date.xxx
smith_art223c_fa20_selfiev1_mmddyy.jpg
HOME
SYLLABUS
AGENDA
STUDENTS
SOURCES
ATTENDANCE