ART299: Went Over Creator IONIC and the following

All Exiting Topics we covered today!

Google Noto Fonts

Early Access

Source Sans Pro

Chris’ 2018 Sassy Base

Showed my Action List

ics415

PWA(Progressive Web Apps)– 4 important poinst

Paas and Saas

Heroku

Amazon’s AWS

Google Cloud Computing

 

Advertisements

ART258: Google fonts, Typekit, @fontface as Typographic

How Setup Fonts for Your Website.

Educational and Professional use of typefaces are different. For commercial use, make sure you use “100% free for commercial use.”

Today, Chris lectured, how to use Google fonts, @font-face, and Adobe Typekit.

@font-face can access to fonts if Google fonts does not have the fonts you want to use. For example, you can use free “ALEO” from fontsquirrel.com.

1. how to use google fonts

  1. Use Sassy-base development folder/directory,
  2. Download from Github.com Zip to your computer
  3. Drop the folder to Prepros
  4. Drop it also to the code editor you use such as Visual Studio Code, Atom, or Brackets.
  5. Change the body color in editor to see the web if body color to set “$type-color-body: red;” in the “_typography.scss” partial scss file, then add define “color: $type-color-body;” in style.scss file then check on web to see if it is updated. (updated massage will show on the screen)
  6. Check web to see if the index.html file is updated
  7. Google fonts use one for the body and one for the heading.
  8. Copy link html add to your index.html file at <head></head>
  9. Add index.html <link href=”https://fonts.googleapis.com/css?family=Roboto” rel=”stylesheet”>
  10. Add a line to SCSS file “font-family: ‘Roboto’, sans-serif;”
  11. What is the negative part of Google fonts? You don’t have a internet connection, you don’t get the fonts. Also if the Google fonts goes down you your web can’t use the fonts.
  12. @fontface 2008 changed every thing. One CSS declaration of @font-face.
  13. 10 years ago used – image replacement technic (text is there and the image shows).

WOFF- supported IE-9 on and others, TTF- for other than MS, EOT- for MS only, SVG check if all the browser supports by checking “can I use” website.

OTF – Adobe website says, “OpenType, as jointly defined by Microsoft and Adobe Systems, is technically an extension of Microsoft’s TrueType Open format, which can contain either PostScript font outlines (.otf) or TrueType font outlines (.ttf).” PostScript is for high resolution printing.

Fonts are available at:

The development folder, “sassy-base” has the following entries:

  • –css
  • –fonts –aleo–aleo.woff
  • –index.html
  • –prepros-6.config
  • –README.md
  • –scss

2. To Use Fonts using @font-face:

Add the following code in style.scss<pre>

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

</pre>

Add the following code in style.scss

<pre>

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

</pre>

To see how it is working by

Recommended way to use font is to use Google fonts, because Adobe Typekit does not work smoothly. It often requires some troubleshooting.

How to use typekits is part of Adobe-> performance is bad. Seems to take more time to load to cache memory. Used Brother-1816 for NMW

3. How to use adobe typekit

  1. Goto Typekit.com and click “Add to Kit.”-> kit setting and give the url then “Publish”.

You have to be careful using pseudo bold and pseudo italics in Typekit. Typekit is also server dependent.

Bold some weighted by using thin Brother-1816 and make it weight to be 900 instead matching 100.

ART258: Design Advice and Code Exercise

Lecture Notes

  • You can upgrade/brush-up your logo design by focusing detail and subtlety referencing website like “MailChimp” by a typographer, Jessica Hische.
  • Check to Google “Date UI” and “Time UI” how you can present dates and time on graphical design.
  • JAZZ visual design can add the mood or 何々風 backdrop.
  • The design could commit to Art Deco style all the way. Get design inspirations by searching images by “Art Deco.”
  • What is Humanist style.
  • Another good inspirations/reference from ART OF TITLES
  • Paul Rand design of “Catch Me If you Can
  • “Seven” whoes design?
  • Saul Bass – “The man with the golden arm””North by Northwest”
  • Search for “Art Deco” in Google fonts in it has any.

299: Mike King Presentation

Mike King’s Portfolio Page     http://mikeking.io

Mike King’s Codepen     https://codepen.io/micjamking/#

Mike King’s Github     https://github.com/micjamking

He walked through his new portfolio pages of each project case studies at Ikayzo with various functions that he performed (from intern to manager in design department?)  for the last seven years after graduating KCC NMA. He also showed his new projects at Google also. My thoughts was that working with a smaller company you get to see entire process and may have opportunities to perform many different functions.

Clearstream project: Existed a lot of overhead and needed to redesign the platform—started from creating vocabulary for the project. Needs to be responsive ->SVG.

GoHawaii Mobile App project:

TourAloha projet: Pearl Harbor survivor voice can be heard at the site.

Teacup App project: The analytics that supplies what google analetics can’t provide.

Google’s Grasshopper: Mobile App using JavaScript.

 

How He Learned Javascript Coding: His sup. at Ikayzo, eventually went to Google, suggested him a book: Foundation HTML5 Animation with JavaScript (He mention something about Ch13.) He did lot of exercises and you can see on his Codepen https://codepen.io/collection/AMgkZv/#.

He also did many courses and tutorials other medium such as Codeacademy provides.

Work Time Allocation at Google: At Google, 80% work and 20% what you want to do. His 27 year-old supervisor, younger than him, coded internationalization software which replaced people who had been doing long hand. This person became the manager of this tool group, where Michael King is a member of.

Sketch: At Google, people uses Sketch, Photoshop, and Illustrator, but currently it is the direction of Sketch. He uses Sketch for everything.

Final Code Launch Process at Google: Eeach group has its autonomy. There is development, QA, and CEO checks it against some check list(?) before launching the page. That’s all.

Mike mentioned two websites: grow.io and blinkk.com(Mikes group?).

His concept of CMS(Content Management System) has been changed working at Google – use Google spreadsheet instead (db).

On His Animation: VR app(?) in mind, he created the HERO image/animation. Star is PNG, Halo effect png, CSS box shadow is used, pseudo element line?, CSS animation -transform, @keyframes(?). iframe animation, HTML <canvaselement.

He uses scroll based animation. Add and clear elements.

SVG: all elements are SVG because it is flexible, small, crisp, also you can animate it.

Animated GIFs and SVG:

Animated Gif may cause some performance issues for mobile (mobile network issue with iterative or recursive codes?)

SVG is great for vector in browser – individual element can be modified like illustrator.

 

Animation such as 60 frames in a second (16milisec) but browser manages the best performance. Screen canvas context.

 

Page download speed, video is next best. Animation interactive.

Other Misc. He is working hero image(?) section @home and others work header, collocal node, grid module, cha??, module is ??? Coders difficulty with Photoshop and Illustrator. Mike can work with those no problem. Multiple people working different responsibilities on the page. Designers need to use Sketch so they just place flatenned image paste to Sketch. Tools they use.

I was wondering how mobile network work with gaming data in WCDMA?

 

229: @FONT-FACE and typefaces for the web

Conceptual Plan by Chris

Typeface resources

FOUT (flash of unstyled text)

Google fonts

Typekit by Adobe (not free but meed membership to use their type)

fontsquirrel

CSS font stack.com

typewolf.com

designfacts.org

unsplash.com – royalty free photos

 

Psychology

Branding: MacDonals (Red and Yellow), Burgerking ()

Whole-foods (green is more value more than )

Contrast – weight and heaviness feeling

Less contrust – lightness feeling

Web Design

Showcasing product and place on the Hero section bring the full color photo (don’t mess with color or transparency).

Stick with Grid.

Typeface Hierarchy construction tools:
size
color
thickness of the font
opacity

Rectangle in rectangle – don’t hide the
Map is content don’t hide with some box.

299: Learning from Web Design of Others’

Accessibilty – will be added.

My initial considerations were:

  • simple navigation without confusioning where you are at
  • fast loading (lightness)
  • no design elements unless it needed
  • minimum clicking
  • avoidance of information overload
  • add warmth for SNS area

After reviewing others’ works I have found the following points

  • at any section of a page, navigation to other pages or sections
  • loading takes longer use subtle loading small light graysh 3 or 4 dots in the middle of screen
  • not to place unnecessary empty spaces
  • time to load (.sk country?, slow server?, content?)
  • I can use blog site (WordPress.com, Blogger.com, wp of my hosting site) to link through nav tab, update each entry. How to choose best blogging platform in 2018.
  • place dots right hand edge to go up/down the sections of the page
  • Nav tab visibility (no crash with background/scrolling page)
  • Some designers use home=work page

[Thanks to Melissa for the list of inspiration websites.]