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?


KOA Gallery + design tips


Koa Gallery

Photo of inside to outside maybe nice.

image resolution DPI (Dot’s per inch), PPI (Pixels per inch), and PPX (monitor resolution).

For prints 300dpi–350px is standard.

19″ monitor set to 1024×768 will show 70ppi (pixels per inch)

19″ monitor set to 1280×1024 will have a resolution of 87ppx.

You can fit more on the screen (1280×1024) and get more detail, but everything looks smaller.

Story of screen resolution.

Scrolling is Better than Clicking – clicking is a decision.


299: Chris suggestion

Chris modified my typographical hierarchy for my portfolio.

I moved wireframe from ID to XD and modify it.

Fixed on the XD instead of ID, I will copy it to ID to fix the wireframe in ID also.

Now I will design sub pages using XD.

Also, I will finalize the typographical hierarchy in Type Test.

Also, I was considering changing the background colors for each of the subpages as in 18F.gov. Chris said that Apple has a tool to change the background color for each of the CD – most appropriate color by checking the graphics of CD. I may change the background designs of each sub pages; such as one is art nouveau-ish, ukiyoe-fu, kusama yayoi-fu etc.



299: Visual Precedence for My Website

Martha Stewart Home Page Top –
I selected this website as their intention tries to be for general users with devices large to small and new to old.

+ All images are clickable to the page.
-Notice the search sign needs to be clicked to actually get the search text entry space. Then the user clicks the box to be able to enter any character in the text box.

Martha Stewart Home Page Bottom –


Martha Stewart Food/Dessert & Treats Sub Page Top –

1. There is another navigation in the middle of the page.
2. It can slide the navigation to populate many nav tabs.


Martha Stewart Video Receipe Sub Page Top –

1. There are a logo & remark on the vid.
2. SNS links right below the vid.
3. There are many clickable video links.
4. There is no link to videos. How to get to any video, I searched “video.”



Noticed: Confusing but feasible solution of content on home and sub-pages.

  1. Each section has the color of its own.
  2. Each section has its own page.


Boot Strap Template below is somewhat closer to what I imagine for my home page.
Replace jumbo tron with hero image.

from UX Planet:

https://www.beckett.de/ has lots of moving parts and difficult understand the section separations.

One-page website -> Base for my home page
from https://www.designspiration.net/save/953883252379/

299: a John Doe Site – How minimally it is set.

Suggestion from Chris:

Start coding the website.

Start CSS with Table of Contents and No reset *{margin 0; padding 0;} etc.

Browser view and view its source HTML


Base Layout from ART128

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