Agenda | ART223C | TYPOGRAPHY

AGENDA:

(Dates and projects are subject to change)

WEEK 01 ||| Aug 23 - 27 ||||||||||||||||||

Introduction

Questionnaire [Here]

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

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

Due before next class:

Read the article

Play with TypeTester (Do you know any other online services with similar concept? Share with us during the class)

Did you upload your selfie?

Upload your revised version of The Tallest Building to the Canvas.

WEEK 02 ||| Aug 30 - Sep 03 ||||||||||||||||||

Did you upload your revised version on Tallest Building?

Did you practice/watch any InDesign tutorial?

This week we continue to review on Type 223A and 223B.

Understanding type size.

Point, picas.

COVID-19 Spread [Here]

Before next class, make sure you have your spread ready on your

machine as you will share your screen with others using LanSchool.

We review your layout structure on COVID-19 spread.

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

etc: https://archives.design

Lets finish the Covid Spread!

Grid - Sample File [Here]

Project 1 - Part A [Brief]

By next class, on Wednesday, we are expecting to have the accurate structure of the Project1-Part A in InDesign.

We have the raw copies in the document and be ready to work on it during the class.

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 06 - Sep 10 ||||||||||||||||||

LABOR DAY HOLIDAY

Creating document S=structure for 80 paragraph.

Kerning

Tracking

Leading

Column

Gutter

widow

Paragraph length

Paragraph alignment (Left, Justified,...)

Ragged paragraph

WEEK 04 ||| Sep 13 - Sep 17 ||||||||||||||||||

Type Methods

Text / Paragraph / Column Development

Introducing Project 1 - B [Brief]

Styles

Paragraph style

Character style

Nested style?

Object style?

Next class due (Wed/Thu):

Your sketches on part 2
Do your best and create clean, sharp, accurate, an hands-free sketch. USE RULER.

WEEK 05 ||| Sep 20 - Sep 24 ||||||||||||||||||

Due today:

Project 1 - Part A

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 Brief [Here]

Exercise 2 | Working files [Here]

Note: We start the Art Scene magazine today (Sep 20th., 21st.,) and you will share your screen on (Sep 22nd., 23rd.)

You will upload your final version before Class on Sep 27th., 28th.

Smart objects:

How to use

How to create

Magazine Mock-up [Here]

Mock-up Examples to use [Here]

Share your design from your machine.

You will 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

WEEK 06 ||| Sep 27 - Oct 01 ||||||||||||||||||

Due Today:

- Art Scene spread, PDF format

- Art Scene mock-up, JPG format

- 5 typographic websites, Use provided excel sheet on canvas

- A list of domain names that are available to register

We register your domain name and start to set up your host.

Domain name vs. Host

Setting up name servers...

FTP account

To check available Domain name:

50webs.com

art.art

name.com

PLEASE DO NOT PASTE THE LINK DIRECTLY.

Instead, Type the name of the website and then use the "Insert Link" option in Google sheet and create a hyperlink to your desired website.

Registering your domain name

UI vs. UX

Adobe XD | Adobe Muse

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

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

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

THIS IS A

WEB FONT

THIS IS A

WEB FONT

WEEK 07 ||| Oct 04 - Oct 08 ||||||||||||||||||

>> Prepare your Muse Portfolio content:

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 includes statement or any text material at least 120 words + your selfie)

Contact (Email, cellphone, other social media or pages)

WEEK 08 ||| Oct 11 - Oct 15 ||||||||||||||||||

Let's talk 0I, WWW

Filezilla for MAC [Here]

Filezilla for Windows [Here]

Install Filezilla and connect it to the host.

Cube Cafe logo [Here]

Modify the page to achieve a readable and legible result.

(Do not add any new tag)

Due before next class:

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

domainname.xyz/2021/ccafe.html

Make sure you will address the image and the page properly, otherwise page will not be accessible.

BRACKETS

* Optional: Brackets Extensions [Here]

Block elements vs. In-line elements

Comments tag

Image tag and alternative

Line break

List:

Ordered list

Unordered list

Description list

CSS

Adding CSS / Style in Head

Body

background-color

margin | margin-top,...

border | border-left,...

font-size

font-family

font-weight (normal|bold|bolder|lighter|number)

text-align

color

W3Schools [html]

from W3Schools

img [Here]

br [Here]

color / hex code [Here]

You are a Graphic Designer AND Typographer here; Pay attention to

margins, color, contrast, alignment, type choices, type size, hierarchy, ...

Do not use any inline style (inside of our html) and keep your <style> only in <head> area.

Find the copy for Recipe page on source page.

Fine appropriate image for Recipe page. (pay attention to color, scale, orientation, position,...)

Pages to be done by next class:

domainname.xyz/2021/ccafe.html

domainname.xyz/2021/recipe.html

WEEK 09 ||| Oct 18 - Oct 22 ||||||||||||||||||

Do you have access to your FTP account?

Are you able to upload your content to your host with no problem?

Did you upload ccafe. html and recipe.html to your 2021 folder?

Some new tags to use:

b
i
s
u
small

Table in HTML

table
th
tr
td

colspan

rowspan

Style in your table

Padding

Margin

Link in HTML

a

link to outside

link to inside

link to fragment

id , #

Link can be open new window using "blank" target.

Link can activate email protocol using "mailto".

CSS and HTML

Inline
Internal
External

Connecting CSS as External file

Link rel

Glossary page - html (structure)

Anthony Bourdain (html+css)

Find the copy on source page.

Pages to be done by next class:

domainname.xyz/2021/gls1.html

domainname.xyz/2021/ab1.html

Use external CSS for both pages.

WEEK 10 ||| Oct 25 - Oct 29 ||||||||||||||||||

Changing modality to Online Synchronous via Zoom

Check the canvas for zoom info.

Make sure you are using your CSUF credential to log in.

You can find the Zoom links on canvas, left panel.

Don't be late!

Due today:

domainname.xyz/2021/gls1.html

domainname.xyz/2021/ab1.html

Note: Set aside some time to install Adobe XD and Adobe Dreamweaver to make sure our toolset is updated.

For next class, make a clear plan what you may offer for your audience to introduce yourself.

As we talked, this phase is device-free, so we don't have to get engage in detail or compositions. It is more about big picture

and collecting right assets and categorize them. For sure we can use our website idea in muse for visual section of this phase, but we want to expand the content to more text as well.

WEEK 11 ||| Nov 01 - Nov 05 ||||||||||||||||||

NOTE: AS I HAVE TO ATTEND A MANDATORY MEETING ON NOV 1st. and NOV 10th.

BETWEEN 4PM to 5PM, WE WILL START OUR CLASS AT 5:00PM ON THESE DATES.

Adobe XD

Working file 1 [Here]

Working file - Start Here [Here]

Fore next class you will sketch your Personal App using template

The template is according to iPhone X [Here]

Proper size and detail (use small ruler or a credit card to prevent any free-form line or shape)

In phase 2 (Low Fidelity) we are planning for all possible scenarios.

No color or graphical elements in low fidelity. We only use simple shapes and text to convey the idea.

WEEK 12 ||| Nov 08 - Nov 12 ||||||||||||||||||

Big idea - Mind maps (not specific for any device)

+

Sketch - specifically for cellphone

+

Wireframe - Low Fidelity mock-up using wireframe UI Kit

Some online sources for Icons:

WEEK 13 ||| Nov 15 - Nov 19 ||||||||||||||||||

Proceeding high-fidelity phase while considering:

Standards and guidelines - UI KIT
Color pallet
Typography
Imagery

Design Template iOS 15 [Here]

Production Template iOS 15 [Here]

Extra Graphic for exercise app. [Here]

Adobe DreamWeaver

Adobe Creative Cloud library

WYSIWYG

*Bootstrap

DW Template to analyze [Here]

WEEK 14 ||| Nov 22 - Nov 26 ||||||||||||||||||

WINTER BREAK

🦃🦃🦃

WEEK 15 ||| Nov 29 - Dec 03||||||||||||||||||

You completed your personal app and updated the link.

Dreamweaver

Photoshop, PSD layers and Extraction

Extract panel: CSS, images, fonts, colors, gradients, and measurements

Elements required for all pages in your website:

Header
Menu
Main Content
Footer

Coming tags:

div
class => .
id => #
svg
rect
circle
header
footer

WEEK 16 ||| Dec 06 - Dec 10||||||||||||||||||

Last week of the semester.

How to make the main structure? Header-Main-Footer

How to create menu in header? The menu is just a list in your header

How to create the breaking point? Our breaking point will be set on 450px

display (block, none, inline, ...)
section (vs. div)
span (vs. div)
float
overflow (hidden, visible, scroll, ...)
@media

Additional typeface for your page.

NCSPD

Name_Class_Semester_ProjectName_Date.xxx

smith_art223c_fa21_selfiev1_mmddyy.jpg