(Dates and projects are subject to change)
WEEK 01 _Jan 21_______________________________________________
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 _Jan 28 _______________________________________________
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
Download In-class working file from Titanium
Introducing Project 1 - A [Brief]
Did you try TypeTester ?
Starting Project 1
Project 1 due: Next Thursday
WEEK 03 _Feb 04_______________________________________________
Review on the 80 paragraphs
Grid and Grid and Grid.
Introducing Project 1 - B [Brief]
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.
Want to Become the Next U.S. President? Change the Color of Your Logo by Billie Muraben [Here]
WEEK 04 _Feb 11_______________________________________________
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!
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.
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_______________________________________________
Presentation: Brandon Bollinger
UI vs. UX
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?
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]
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_______________________________________________
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
In Black or White (based on your page background color)
Align to the center of your page
Titles, file names, keywords,...
Create and add your favicon (2 characters, your initials)
Presentation: Danielle Peterson
WEEK 07 _Mar 04_______________________________________________
Due: Muse Portfolio (RWD, 2 version)
Concept > Low fidelity > High-fidelity
Download working file [Here]
Adobe XD sample [Screenshots!]
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]
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_______________________________________________
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)
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.
The Black Cafe offers casual coffee and special fare in a relaxed atmosphere. The menu changes regularly to highlight the freshest local sources.
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
Monday through Thursday 11am to 9pm; Friday and Saturday, 11am to midnight
Logo in png format: [Here]
Presentation: Emily Shry
ONLINE SOURCE TO LEARN: [Here]
color / hex code [Here]
Modify the page to achieve a readable and legible result.
(Do not add any new tag)
WEEK 09 _Mar 18_______________________________________________
Presentation: Jayden Marcotte
Headings (h1 - h6)
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.
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."
1 8oz. jar sundried tomatoes
2 large garlic cloves
2/3 c. kalamata olives
1 t. capers
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).
Presentation: Andrew Hoang
Intro on Bracket [Download]
Use Adobe Bracket for Recipe practice.
Adding Links - Anchor Elements
Create your Glossary page
Design the Recipe
Extra : pt vs px [Reading]
WEEK 10 _Mar 25_______________________________________________
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)
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
_ _ _
WEEK 11 _Apr 01_______________________________________________
WEEK 12 _Apr 08_______________________________________________
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:
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)
Presentation: Kelsey, Jamie
Cascade (Priority, Specificity, Rule Order)
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_______________________________________________
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]
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)
Share your website wire-frame [Here]
By next class we have all pages (at least in html structure) uploaded to your host
WEEK 14 _Apr 22_______________________________________________
Introducing final project | Cube Cafe App [Here]
- Order Online
Adobe XD working files [Here]
Hi-Res Food image/Locations [Here]
WEEK 15 _Apr 29_______________________________________________
How is your App wireframe?!
Tablet version? iPad?
WEEK 16 _May 06_______________________________________________
Any missing presentation?
Any redo? resubmission?
Share your most updated links [Here]
WEEK 17 _May 06_FINAL____________________________________________
Path for Restaurant website: /cubecafe/
All images and css files will in the same folder: /cubecafe/
😔Tuesday May 14th.
Deadline for wireframe/App and Wesbite