AGENDA:

(Dates and projects are subject to change)

 

 

WEEK 01 |||  Jan 26 - 28  ||||||||||||||||||

•  

 

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 |||  Feb 02 - 04  ||||||||||||||||||

 

Understanding type size.

Point, picas.

 

COVID-19 Spread [Here]

 

 

 

Review on final version Ex.1 from last week.

 

 

 

 

 

 

Before Thursday class, upload your COVID-19 spread as PDF to Canvas.

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.

 

•  

 

Did you save your COVID-19 as spread?
Did you upload it to the canvas?

 

How did you decide to align images/text frames?

How did you find InDesign? Easy to work? Complicated?

Any question?

 

 

 

Review on Basic Typography / Classifications / Anatomy

 

 Grid - Sample File [Here]

 

 

Project 1 - Part A [Brief]

 

 

 

 

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

Then you can add the raw copy to the pages 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 |||  Feb 09 - 11  ||||||||||||||||||

 

•  

 

Project 1- Part A

 

Initial file is ready in InDesign with correct structure.

 

We go over Aligned and Justified paragraph, Kerning and Tracking.

 

 

 

 

 

WEEK 04 |||  Feb 16 - 18  ||||||||||||||||||

 

Type Methods

Text / Paragraph / Column Development

 

 

 

Introducing Project 1 - B [Brief]

 

 

Styles

Paragraph style

Character style

Nested style?

Object style?

 

 

 

 

WEEK 05 |||  Feb 23 - 25  ||||||||||||||||||

 

 

Due today Feb  23rd.:

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

Exercise 2 | Working files [Here]

 

Note: We start the Art Scene magazine today (Feb 23rd.) and you will share your screen on Thursday (Feb 25th.)

You will upload your final version before Class on March 02nd.

•  

 

 

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 |||  Mar 02 - 04  ||||||||||||||||||

 

•  

Your domain?

Your host?

Setting up name servers...

FTP account?

 

 

Domain name:

 

50webs.com

art.art

name.com

 

 

 

During the weekend:

Research 5 typographic portfolio website.

Share your URLs: [Here]

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

 

 

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?

 

 

WEEK 07 |||  Mar 09 - 11  ||||||||||||||||||

Setting up your domain and Host.

 

 

THIS IS A

WEB FONT

THIS IS A

WEB FONT

 

 

 

 

 

 

WEEK 08 |||  Mar 16 - 18  ||||||||||||||||||

 

 

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

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

 

Responsive elements in Muse:

 

​

 

 

 

 

Responsive elements in your webpage.

 

Fluid layout

 

 

 

Resizing options

 

 

 

Pining to page

 

Pining to Browser

•  

 

Let's talk www

 

 

 

Filezilla for MAC [Here]

 

Filezilla for Windows  [Here]

 

 

 

Install Filezilla and connect it to the host.

 

 

 

Black Cafe Logo [Here]

 

 

 

W3Schools

 

ONLINE SOURCE TO LEARN: [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 Black Cafe will be available at this address:

 

domainname.xyz/2021/bcafe.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 |||  Mar 23 - 25  ||||||||||||||||||

 

•  

 

Block elements, In-line elements

Comments tag

Image tag and Alternative

Line break

 

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

 

from W3Schools

img [Here]

br [Here]

color / hex code [Here]

 

 

 

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

domainname.xyz/2021/bcafe.html

 

Make sure you will address the image properly, otherwise the image will not load in your page.

You are a Graphic Designer AND Typographer here; Pay attention to margins, color, contrast, alignment, type choices, type size, hierarchy, ...

 

 

 

•  

Title page in your portfolio

Meta data

 

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 on Apr 6th.

Find an appropriate image for this recipe.

 

Your finished version of Secret Recipe be available at this address:

 

domainname.xyz/2021/secret.html

 

 Make sure when you are using your image, you will address the image properly and image has been adjusted by size and position.

 

 

 

Spring Break is the best time to catch up with your online portfolio. Don't Miss it!

 

WEEK 10 |||  Mar 30 - Apr 01  ||||||||||||||||||

 

🏖🏖🏖

 

WEEK 11 |||  Apr 06 - Apr 08  ||||||||||||||||||

 

 

 

•  

Download Brackets

Mac Version [Here]

 

Download Visual Studio Code

Mac and Windows [Here]

 

 

 

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/2021/glossary.html

 

 

Table

<table>

<th>

<tr>

<td>

colspan

rowspan

 

 

Style in your table

Padding

Margin

 

​

 

Creating link

<a>

link to outside

link to inside

 

Class vs. id

 

 

WEEK 12 |||  Apr 13 - Apr 15  ||||||||||||||||||

 

 

Continue on Glossary

 

link <a>

color

text-decoration

 

 

CSS and HTML

Inline

Internal

External

 

 

Connecting CSS as External file

Link rel

 

 

 

 

Anthony Bourdain (html+css)

Find the copy on source page.

 

 

 

Upload your Glassary and Anthony Bourdain Page before our class on Apr 20th.

 

 

domainname.xyz/2021/glossary.html

domainname.xyz/2021/anthony.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.

 

 

No mandatory class on Thursday but I'll available to assist for either projects Saturday 9am - 1pm.

Make sure you install Adobe XD before our Tuesday class.

 

 

 

WEEK 13 |||  Apr 20 - Apr 22  ||||||||||||||||||

 

 

​

​

 

 

Introducing Last Project:

RSC | RED SQUARE CAFE App [Here]

 

​   

 

Creating assets for the app.

Logo, logotype (2 versions?)

Slogan, branding, color palette, 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.
The template is according to iPhone X [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 |||  Apr 27 - Apr 29  ||||||||||||||||||

•  

 

Due today:

RSC App Paper wire-frame

 

 

 

Mock-up for creating assets to use in app project

 Restaurant, food industry mock-up [Here]

 

Adobe XD Working Files

 

Working file  1 [Here]

Working file - Start Here [Here]

 

 

 

 

WEEK 15 |||  May 04 - May 06  ||||||||||||||||||

•  

 

Due today:

RSC App low fidelity prototype

 

Continue on XD

Repeat Grid

Carousel

Card Design

Prototype

 

Working file Download [Here]

 

 

* David Carson on Master Class

 

On Thursday we will meet one-on-one according to schedule:

Let's try to be on time!

 

7:00  Bishop,Steven

7:07  Coogan,Kali

7:14  Cruz,Elena Alejandra

7:21  Daproza,Derek

7:28  Escobedo,Arturo

7:35  Felix Osuna,Evangelina

7:42  Flores,Wendy Karina

7:49  Gazzoni,Julieta

7:56  Gomez,Andrew

8:03  Gonzalez,Eileen Josefine

8:10  Kim,Bryce Kaholokai

8:17  Li,Youjing

8:24  Lindenberger,Kayla

8:32  Liu,Yi-Ping

8:38  Lorigo,Julie Isabel

8:45  Luu,Raymond

8:52  Mariscal,Felix Eduardo

8:59  Martinez,Anthony

9:06  Menendez,Alana Nicole

9:13  Moyotl,Luis Valentin

9:20  Paz,Alan Ruben

9:27  Perales,Steven Michael

9:34  Qi,Kyle Jun-Shen

9:41  Wang,Qianyin

 

 

 

 

WEEK 16 |||  May 11 - May 13  ||||||||||||||||||

 

 

Due today:

RSC App High fidelity prototype Review on Screen

 

 

 

 

FINAL SUBMISSION:

May 18th., 11:59pm

NCSPD

Name_Class_Semester_ProjectName_Date.xxx

smith_art223c_sp21_selfiev1_mmddyy.jpg