AGENDA
AGENDA:
(Dates and projects are subject to change)
WEEK 01 _Jan 21_______________________________________________
◊ Tuesday
Introduction
Supplies, Books, Due dates, Online communication,
In-class practices, Assignments/Projects, written exams, Presentation, Final, ...
Review Syllabus, Office hours, Presentation date, ...
◊ Thursday
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 _Jan 28 _______________________________________________
◊ Tuesday
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
Download In-class working file from Titanium
Introducing Project 1 - A [Brief]
Did you try TypeTester ?
◊ Thursday
InDesign Work-flow
Starting Project 1
Project 1 due: Next Thursday
WEEK 03 _Feb 04_______________________________________________
◊ Tuesday
Review on the 80 paragraphs
Grid and Grid and Grid.
Introducing Project 1 - B [Brief]
◊ Thursday
Due before class: Project 1-A (80 Paragraph) in PDF format, Upload to Titanium
Project 1 - Part B
Turning sketches to Digital edition
Replacing grey boxes with the copy.
Pairing Methods
Worth reading:
Want to Become the Next U.S. President? Change the Color of Your Logo by Billie Muraben [Here]
WEEK 04 _Feb 11_______________________________________________
◊ Tuesday
Presentation: Garrett Hoang
Due before class: Project 1-B in PDF format, Upload to Titanium
We are using the result of Project 1 (A and B) to design a magazine layout.
A simple modular grid for a magazine [Template]
Know your system!
Axial
Radial
Dilatational
Random
Grid
Transitional
Modular
Bilateral
Using techniques: Line break, Leading, Spacing (Kerning, Tracking)
To attention: Tone, Direction, Groups/Subgroups, Rhythm
Exercise 2 [Brief]
Exercise 2 [Copy]
Upload your draft version by the end of class.
Upload your final design before next class.
◊ Thursday
Presentation: Jeremiah Hustad
Due before class: Exercise 2 in PDF format.
Make sure you will have the file with you as we will create a mock-up for magazine.
Mock-ups and Smart objects
Download magazine mock-up [Here]
5 typographic portfolio website.
Share your URLs: [Here]
Prepare your Muse Portfolio content for next class:
WEEK 05 _Feb 18_______________________________________________
◊ Tuesday
Presentation: Brandon Bollinger
UI vs. UX
Adobe XD
Adobe Muse
Adobe Muse
Structure, page size, master pages, menu, inside pages
Creating pages, links, responsive pages, breaking point, ...
Review your shared URLs
Review your domain name choices
Your domain name. What extension?
.com
.site
.top
.xyz
.info
.life
.us
.art
Availability? Registering your domain name
Setting up your host
Suggestion for try (free): 50webs.com
Access to your FTP account.
Share your personal domain: [Here]
Share your muse_portfolio_asset [Here]
Start Adobe Muse [Here]
◊ Thursday
Presentation: Margaret Zisk
Continue on Adobe Muse and XD
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 _Feb 25_______________________________________________
◊ Tuesday
Presentation: Sergio Palao
Vector shape on web.
Use Adobe Illustrator to create your SVG. [Export]
Take advantage of Adobe CC Libraries. Activate and start using them across
Have an updated version of FileZilla installed [Here]
Uploading both sketches to your host.
Creating additional folders for different destinations.
yoursite.com > Sketch I
yoursite.com/v2 > sketch II
Required Footer on all pages (You will update it through master page every time you are adding a new content):
DESIGN BY NAME LASTNAME, UPDATED 10:15 PM, FEB 20, 2019
Typeface: Franklin Gothic URW Compressed
Size: 12pt
In Black or White (based on your page background color)
Align to the center of your page
◊ Thursday
SEO
Titles, file names, keywords,...
Create and add your favicon (2 characters, your initials)
Presentation: Danielle Peterson
WEEK 07 _Mar 04_______________________________________________
◊ Tuesday
Due: Muse Portfolio (RWD, 2 version)
Prototype
Concept > Low fidelity > High-fidelity
Download working file [Here]
Adobe XD sample [Screenshots!]
◊ Thursday
Presentation: Jennifer Zhu
Bring your concepts and Low-fidelity phase to class.
Download San Francisco Typeface [Here]
Required: SF Pro
Recommended: SF Pro, Compact, Compact Rounded
Download Wireframes Kit [Here]
Download Apple iOS UI kit [Here]
EXTRA:
Download XD UI [Here]
UI iPhone Status [Here]
Share your wireframe URL in Titanium and [Here] Before Friday 11:55PM.
(Before sharing, save your file by NCSPD format.)
Complete the Mobile portfolio prototype before next class.
Share the URL in Titanium and [Here]
WEEK 08 _Mar 11_______________________________________________
◊ Tuesday
Presentation: Courtney Baze
Due today: Mobile Portfolio prototype before class.
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? accessible?, ...)
URL - Uniform Resource Locator (URI?)
Index file (Index.html)
Source
Markup, Tag
CSS (Cascading Style Sheets)
By the end of class:
Create "html" folder on your server. Follow instruction.
Save your first html as index1.html
Upload your file.
TEXT:
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
Logo in png format: [Here]
◊ Thursday
Presentation: Emily Shry
W3C
w3.org/standard
ONLINE SOURCE TO LEARN: [Here]
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)
WEEK 09 _Mar 18_______________________________________________
◊ Tuesday
Presentation: Jayden Marcotte
Coding on!
Headings (h1 - h6)
Naked text!
Thematic Break
List (Ordered, Unordered, Descriptive)
Practice text [Here]
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.
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).
___________
◊ Thursday
Presentation: Andrew Hoang
Intro on Bracket [Download]
Theme [Here]
Extensions [Here]
(Emmet)(Validation)(Beautify)
Use Adobe Bracket for Recipe practice.
Adding Links - Anchor Elements
id
Create your Glossary page
Design the Recipe
Extra : pt vs px [Reading]
WEEK 10 _Mar 25_______________________________________________
◊ Tuesday
Presentation: Danielle Peterson
List from Wikipedia, including glossary.
(You will find the list in source page)
Creating css for your html
Anthony Bourdain's Page (html+css)
Table element
Table challenge!
Glossary Project:
Create a page for American Typographers:
The 4 pages for designers in letter"T" will open in a new window.
(you can find the list in source page)
Design the page accordingly. Incorporate any elements that we've had so far. Choice of typefaces, Heading (h1, h2, ...), Colors, Breaks, Horizontal rule, lists, ...
Due: before our class on Apr 16th. Upload your page to your "html" folder by addressing: yourdomain.xyz/html/yourname_glossary.html
◊ Thursday
_ _ _
WEEK 11 _Apr 01_______________________________________________
🌴🍷💤
WEEK 12 _Apr 08_______________________________________________
◊ Tuesday
Presentation: Danielle
CSS
Inline style | Embedded style| External style
link | import
Cooking with Anthony Bourdain
Create HTML + CSS and upload to your host.
In "cafe" folder create a new folder as "anothny" and save your html file as: yourname_anthony.html
You should save the css file as style.css
Don't forget to upload the image as well.
The page must be accessible via this url:
yourdomain.xyz/cafe/anthony/yourname_anthony.html
Due: before our class on apr 16th.
You are welcome to design any extra edition by your taste or additional style.
Save them as yourname_anthony_v2.html
Don't forget to save css file accordingly. )for example: style_v2.css)
◊ Thursday
Presentation: Kelsey, Jamie
Inheritance
Cascade (Priority, Specificity, Rule Order)
Box Model
CSS Units
Measuring type and space
Relative vs Absolute
Developer Tools / Real time practice
Apply some CSS units to the Glossary!
Class lecture [PDF]
WEEK 13 _Apr 15_______________________________________________
◊ Tuesday
Presentation: Julia
Due: Glossary page
Title of final project: "CUBE CAFE"
Logo, Logotype, slogan?, branding, imagery, ...
Download mock-up 1 [Here]
Just for inspiration:
TYPE AND FONT IN CSS
Download Menu html [Here]
◊ Thursday
Presentation: Michael
Colors and Backgrounds, class notes [Here]
Color names on W3SCHOOLS [Here]
Outsource typeface in menu for Madilyn [Here]
Introducing final project | Cube Cafe Website [Here]
- Landing page (Home)
- Menu
- Locations
- About
- Contact
Share your website wire-frame [Here]
By next class we have all pages (at least in html structure) uploaded to your host
yourdomain.xyz/cubacafe/index.html
yourdomain.xyz/cubecafe/locations.html
yourdomain.xyz/cubecafe/about.html
yourdomain.xyz/cubecafe/contact.html
yourdomain.xyz/cubecafe/menu.html
WEEK 14 _Apr 22_______________________________________________
◊ Tuesday
Introducing final project | Cube Cafe App [Here]
- Splash
- About
- Locations
- Menu
- Order Online
- Contact
Adobe XD working files [Here]
Hi-Res Food image/Locations [Here]
◊ Thursday
Presentation: Madilyn
WEEK 15 _Apr 29_______________________________________________
◊ Tuesday
How is your App wireframe?!
◊ Thursday
Presentation: Nancy
Tablet version? iPad?
WEEK 16 _May 06_______________________________________________
◊ Tuesday
Any missing presentation?
Any redo? resubmission?
🍕🍕🍕🍕🍕🍕
Share your most updated links [Here]
◊ Thursday
---
WEEK 17 _May 06_FINAL____________________________________________
Path for Restaurant website: /cubecafe/
yourdomain.xyz/cubacafe/index.html
yourdomain.xyz/cubecafe/locations.html
yourdomain.xyz/cubecafe/about.html
yourdomain.xyz/cubecafe/contact.html
yourdomain.xyz/cubecafe/menu.html
All images and css files will in the same folder: /cubecafe/
😔Tuesday May 14th.
Deadline for wireframe/App and Wesbite
By 7:30pm
NCSPD
Name_Class_Semester_ProjectName_Date.xxx
smith_art223c_sp19_selfiev1_mmddyy.jpg