Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
Week Fifteen
Today’s Notes
- Welcome to Monday, Week 15 – Today is an EHS B Day
- Visitors this week from MMU on Wednesday & Thursday
- Late work – email me if you submit something or if you have an items that needs grading that you have already submitted.
- Game Day on Thursday, December 22nd. Your ticket to participate is to be fully complete. Check PS often. Food?
9:40 Attendance
9:45 Monday Mail – make a quick check – you seniors are important!
9:55 Famous Photographers Presentations
9:55 20% Dropbox – no presentations – just drop in Classroom.
The dropbox for projects is in Google Classroom. Presenting work to each other is not only educational but also a great way to practice and improve your speaking skills.
Filename example: 20%_lastName.(whatever file extension fits)
20% Projects will be declared by the end of the day on Mondays. A project may last more than one week. You might be building towards something. Be specific.
For example: Animation in Blender using a rig, Disappearing effect in After Effects, 2D sidescroller in Unity
10:25 Responsive Typography
Responsive Design consists of three characteristics:
1. Media Queries
2. Images that Resize
3. Fluid Layouts (using Grid, Flexbox or % for widths)
As our screens change size, so can the fonts. We don’t have to guess what the right typography is. We can use some simple tools to help make sure that no matter what our screen size is or what font size we want to use, we can have it work together.
Typography can also be responsive. First, let’s get an understanding of the basics.
Absolute Length Units
Absolute length units are considered absolute because they are not relative to any other element. These units will not scale to browser size and will always remain the same size. These include the following:
pt – points
px – pixels
in – inches
cm – centimeters
mm – millimeters
pc – picas
Pixels are really the only absolute CSS length unit we should consider using for the web. The others are mostly used for physical (not digital) measurement (like print). A pixel unit refers to the size of one “dot” of your device display (which will vary slightly with each device). Because of this, pixels are commonly used for things that don’t necessarily need to scale with browser sizes.
Relative Length Units
Relative Length units are considered relative because they change/scale depending on the length of other elements. One common example is percentage, which is dependent on the length of the parent element.
em – relative to the element’s font-size
rem – relative to the root element’s font-size
vw – relative to 1% of your browser’s viewport width
vh – relative to 1% of your browser’s viewport height
vmin – relative to 1% of the smaller of the two browser viewport dimensions (height or width). vmin uses the ratio of the smallest side. That is, if the height of the browser window is less than its width, 1vmin will be equivalent to 1vh . If the width of the browser is less than it’s height, 1vmin is equivalent to 1vw .
vmax – is the opposite. vmax uses the larger of the viewport width or height to set the size.
% – relative to 1/100 of the parent element’s width.
All of these units are used for the web. Want to see an example of all of these in action and understand the difference between em and rem- Fork my CodePen so you have a reference for yourself.
10:35 Break
10:45 English with Mx. Yopp
11:30 Typography – Using Modular Scales
Modular Type Scales
You’ve heard of musical scales, well the same concept can be applied to typography. Modular Scale typography grows and shrinks based on a ratio. Using a ratio allows the type to look consistent and related.
Some sites do better with large type and contrasting sizes better than others sites…
For example, product sites, shopping sites and commerce sites tend to do better with smaller changes in type size.
Marketing sites (like Apple for example) tend to use large type sizes and show great range in the type size variation.
Let’s play around with type scale. A nice tool is type-scale.com and another one is modular scale. Both do the same thing – they are tools to help you get consistent type.
Using a Scale = Consistency in Design!
Let’s practice. Fork this CodePen.
11:45 Mood Boards / Inspiration Boards / Portfolio Pre-Planning
We are going to begin working on a multipage website that will serve as a portfolio about you. This portfolio will culminate into a final website due at the end of the semester.
I’ll share deliverables shortly and I will carve out work time to build a nice professional website.
We’ll include your bio, an image, some reflections as well as a host of really nice exemplars of your work covering many disciplines. This will be a nice professional portfolio of your work that you can show an employer or college or to turn in to your own website showcasing you and your content.
To prepare, you’ll want to do a little research. It’s common for most projects to include an inspiration board or mood board. When I worked for NIKE shoe company, all new models from shoes to clothing included a mood board for the design team to work from.
Artistic & Creative Directors often work from a mood board as part of the planning process.
Start by google searching 2020 / 21 /22 website trends, portfolios, web color palettes, student portfolios, web design awards… See anything you like?
The Deliverable
Create a Google Slide Show to showcase your inspiration. It can be a messy collection of ideas. Formatting is not that important. Just lots of ideas.
ProTip: if you see something you like, put a link in the notes section of your slideshow. That way you can find it again.
Create a slide for:
- Fonts
- Color Palettes / Color Themes
- Icons you might like to use and your logo
- Design elements (layouts you like)
- Website features (sliders, gradients, lightboxes, interactions)
- Links to websites you like
- Anything else you see that you’d like to share
Your Mood Board Slideshow is due on Wednesday by the end of the day. We’ll take a quick look at your work on Thursday to get inspiration from each other.
The dropbox is found on Google Classroom. Filename: Mood Board
Don’t forget to put your name on it.
12:15 Lunch
12:45 Literacy in Practice
1:10 Break
1:20 20% Production Time & Guided Support
- CSS Two Ways – due Wednesday, December 14th
- Mood Board – due Wednesday, December 14th
- 20% For Week 15 – is now assigned