Skip to content

Instantly share code, notes, and snippets.

@corroded

corroded/ffc-day-one.md

Last active May 28, 2018 08:52
Download ZIP

Revisions

  1. @termux-io termux-io revised this gist Nov 15, 2015. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions ffc-day-one.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,6 +2,7 @@

    ### Sweating the Details - Holger Bartel

    - [slides](http://www.slideshare.net/foobartel/form-function-class-6-manila-philippines-14112015)
    - Collaboration (between designers and developers is **VERY IMPORTANT**)
    - Set expectations right
    - choose right process for the right job
  2. @termux-io termux-io revised this gist Nov 15, 2015. 1 changed file with 132 additions and 0 deletions.
    132 changes: 132 additions & 0 deletions ffc-day-two.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,132 @@
    # Masterclass with Brad Frost

    ### Initial Q and A

    His personal opinion on CSS naming conventions is:

    - BEM for teams (easier to understand, verbose)
    - SMACSS for personal projects

    ### Approaches to supporting the mobile web

    - Separate sites aren't scalable (m. websites for mobile)
    - not SEO friendly, etc.
    - Responsive Retrofitting
    - don't change drastically
    - Piecemeal approach
    - Mobile-first responsive design (Gold Standard)

    ### Foundations of Responsive Design

    - Fluid Grids
    - 60em = 960px
    - Flexible media
    - fluid images { max-width: 100% } (don't go over your parent container)
    - Media queries

    ### Principles of Adaptive Web Design

    - Ubiquity
    - people are doing more on mobile....like buying diamonds
    - mobile users will do anything, it just has to be there and usable
    - Content Parity
    - Same content for all contexts
    - Flexibility
    - [Ish](http://bradfrostweb.com/demo/ish) - tool to check viewports
    - Average Web page size 2.2MB
    - Performance IS design
    - [Web page test](http://www.webpagetest.org/)
    - [browserdiet](http://browserdiet.com)
    - Progressive Enhancement
    - Responsive design != One size fits all
    - Start with core experience then enhance capabilites
    - Future Friendly
    - [cssstats]{http://cssstats.com}

    - [style tiles](http://styletyl.es)
    - 20 second gut test
    - 20s to make a reaction to web sites that are curated that are competitors or looks/feels the same as the site
    - if this was your site, what would you rate it? (1-5, 5 highest)

    ### Making design systems

    - Make patterns things maintainable
    - Design your pattern library / styleguide
    - Styleguides help recruit new designers / new people (good talent)
    - make it agnostic
    - try to blur out all the test etc then describe it
    - e.g. blur out checkout modal...and it becomes just 'a modal'
    - make it contextual

    ### Responsive Patterns

    - media queries
    - treat layout as an enhancement
    - avoid desktop-first styles
    - media query for @media all and (max-width: 50em)
    - **DO**
    - @media all and (min-width: 50em)
    - flexbox
    - conditional loading
    - screen size is just one variable
    - large screens dont necessarily mean fast connection
    - touch considerations
    - dont rely on hover states
    - touch = intent
    - [touch map] (http://scotthurff.com/posts/how-to-design-for-thumbs-in-the-era-of-huge-screens)
    - navigation
    - when in doubt, be explicit w things
    - hamburger vs the word 'menu'
    - top nav or "do nothing"
    - nav fly out
    - you can put a lot of items (good and bad)
    - "hide n' cry"
    - [bad anti-pattern](https://authenticjobs.com/) - hide things in mobile view (whut!)
    - [skip the subnav](http://www.worldwildlife.org/)
    - [multi-column drawer](https://tribecafilm.com/festival/)
    - be explicit with the navigation icon
    - images
    - background images
    - mobile-first background images
    - use small background and then using media queries for large screens, add the large image
    - icons
    - icon fonts
    - a lot of browsers don't support icon fonts
    - use icon fonts for decorative icons
    - for mission critical icons, use svgs w/ png fallback
    - icomoon
    - grunticon / grumpicon
    - responsive image solutions
    - [jason grigsby and responsive images](http://blog.cloudfour.com/responsive-images-101-definitions/)
    - compressive images
    - larger dimensions, higher compression rate
    - srcset and sizes
    - `<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" sizes="100vw" />`
    - `<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" sizes="(min-width: 60em) 40em 100vw" />`
    - picture element
    - new html5 element
    - `<picture>
    <source media="(min-width: 45em)" srcset="large.jpg">
    <source media="(min-width: 18em)" srcset="med.jpg">
    ...
    </picture>`
    - [fix image sizes](http://sizersoze.org/)
    - media
    - [video](http://fitvidsjs.com)
    - [maps](http://bradfrostweb.com/blog/post/adaptive-maps)
    - lightboxes
    - not good ux in mobile apps
    - use conditional lightbox
    - link to the raw page/image/content
    - detect screen size- ensure ocntent is legible on small screen
    - if the screen is large enough to accomodate lightbox, then show lightbox. else go to the link
    - [tables](https://github.com/filamentgroup/tablesaw)
    - [carousels](http://shouldiuseacarousel.com/)
    - the reveal
    - whenever screen space becomes more available, show more products (amazon)
    - tabs & accordions
    - horizontal tabs on screen then convert to stacked accordion in mobile
    - accordion to full (collapsible sections)
    - tabs to columns
    - tabs on mobile but when in screen, shows all content in columns

  3. @termux-io termux-io revised this gist Nov 14, 2015. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions ffc-day-one.md
    View file
    Original file line number Diff line number Diff line change
    @@ -31,10 +31,10 @@ PERFORMANCE:
    - 'You can only be as fast as design allows' - Ian Feather
    - 3-5s is actually already good
    - faster than 3s, involves quite some work
    - Images ^(the big evil)
    - Images <sup>(the big evil)</sup>
    - Imageoptim App (2MB -> 70kb)
    - Render blocking CSS/JS
    - Loading assets (every request in <head> delays page load)
    - Loading assets (every request in `<head>` delays page load)
    - optimise critical rendering path
    - minify
    - tools:
  4. @termux-io termux-io revised this gist Nov 14, 2015. 1 changed file with 47 additions and 1 deletion.
    48 changes: 47 additions & 1 deletion ffc-day-one.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,52 @@
    ## Day 1

    ### Throwaway Designs (Angela Chua)
    ### Sweating the Details - Holger Bartel

    - Collaboration (between designers and developers is **VERY IMPORTANT**)
    - Set expectations right
    - choose right process for the right job
    - people
    - try to push them a bit further, but stay in the comfort zones
    - shift design deliverables to code

    style tiles
    - can be good or bad depending on team

    examples of bad design:

    - Terms and Conditions: is 'No' even an option? Why present it in the first place?
    - HSBC example: 'you clicked too fast!' (LOL)

    ** Small tweaks can make a *HUGE* difference **
    ** Choose your (copy) WORDS wisely **
    ** Margins, paddings, line height (aligning is important) **
    - Thai airlines example: too many small problems add up and create a really bad design

    - Quality of code matters as much
    - Framework/Themes: Out of the box clutter
    - Testing is important (using mobile devices)

    PERFORMANCE:

    - 'You can only be as fast as design allows' - Ian Feather
    - 3-5s is actually already good
    - faster than 3s, involves quite some work
    - Images ^(the big evil)
    - Imageoptim App (2MB -> 70kb)
    - Render blocking CSS/JS
    - Loading assets (every request in <head> delays page load)
    - optimise critical rendering path
    - minify
    - tools:
    - webpagetest.com
    - pingdom
    - google pagespeed
    - YSlow
    - perf tooling today
    - perf rocks
    - perf school

    ### Throwaway Designs - Angela Chua

    - packing app: tripit?
    - something designed or likely to be discarded after use
  5. @termux-io termux-io revised this gist Nov 14, 2015. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion ffc-day-one.md
    View file
    Original file line number Diff line number Diff line change
    @@ -196,8 +196,9 @@
    - Gathering
    - [stylify me](http://stylifyme.com)
    - interface inventory
    - typecast - tool to compare fonts
    - [typecast](https://typecast.com/) - tool to compare fonts
    - style tiles
    - element collages
    - collaboration and communication trump process
    - "When you're finished changing, you're finished" - Benjamin Franklin

  6. corroded created this gist Nov 14, 2015.
    203 changes: 203 additions & 0 deletions ffc-day-one.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,203 @@
    ## Day 1

    ### Throwaway Designs (Angela Chua)

    - packing app: tripit?
    - something designed or likely to be discarded after use

    1. dont fall in love w your ideas
    - dont be afraid to start over
    - fall in love w your problem (attack it in every way possible)

    2. job is not to defend your solutions

    3. best practices do not always work out of the box

    4. Shipping is not the finish line

    5. the product itself can pivot

    6. Reshoots arent always a bad sign

    7. enter the infinite stage of iteration

    - functional -> reliable -> usable -> pleasurable

    8. redesigning vs. realigning
    - redesign: major design changes
    - realign: tiny, fast tweaks that theoreticaally vast improve the process

    ### Animating your UX - Animation on the Brain (Rachel Nabors)

    - [Slides](http://www.slideshare.net/CrowChick/animation-and-the-future-of-ux-33573726)
    - Jump cut
    - people have a hard time extrapolating after a jump cut
    - no animation

    - In-betweening (tweening)
    - what just happened?
    - by eliminating the sudden visual changes, animation lessents the chance that the user is surprised/confused
    - cognitive load often has a cost that rivals page load cost

    - Capturing Attention
    - research: animate motion does indeed capture visual attention
    - animacy: how "alive" something appears to be
    - animation to help reinforce the information in a page

    - animation is a visual representation of a rate of change over time
    - stateful transitions
    - change from one state to another
    - one page to another
    - when a user changes tasks
    - supplemental animations
    - animate secondary information
    - can be easily abused
    - when new information appears
    - causal effects
    - hover effects
    - something that tells the user that something is going to change or is changing
    - when a user interacts with a page or something else
    - decorative animations
    - dont add new information
    - add embelishment

    - not strict categories (stateful transition can be decorative as well)

    - key poses ("keys")
    - two important poses that can be in-betweened

    - Does the animation reinforace at least two of these?
    - causality
    - feedback
    - location (reinforce where they are)
    - progression (scrollbar shows progression down the page)
    - transition
    - physics (reinforce natural laws in an unnatural environment)

    - best practices
    - short and sweet
    - three timeframes for user attention
    - 250-300 ms sweet spot for many animations (can still be tweaked)
    - but not too fast
    - faster != better (50ms - there's no point to animating)
    - be invisible
    - if people notice it enough, animation might be too visible and can be tedious over time
    - install a kill switch
    - there are people who don't like animation (vestibular disorder(?))
    - use a notice (to disable the animation)
    - Ask first (option for full animation, reduce or disable)
    - Change settings
    - animate deliberately or not at all
    - half-done animation often causes more harm than good
    - respect the user's cone of vision
    - find your project's key frames

    - canvas is good for games, but not for UI design
    - it's like an img tag where you try to change the pixels

    - [Free newsletter](http://webanimationweekly.com)

    ### Dark Side of Data - Angele Obias

    - data = better decisions
    - having a lot of data != having good design
    - 3 layers of good design
    - great technique (technically good)
    - relevance (good for users)
    - viable
    - technology is power, power is neutral
    - common misuses of data in research:
    - no backbone
    - dont know why you're gathering data
    - continue to make decisions without using data
    - why are we gathering feedback?

    - listening to what users say <-- bad?!
    - FIGURE OUT WHAT THEY MEAN, not what they say
    - solve the reason behind the suggestion, not the suggestion itself
    - PROBE
    - why did he say that?
    - creativity is problem solving
    - bias (dont ask if it looks good, ask what you can improve)
    - strategically "be yourself"
    - design isnt just about you. the products you make for other people arent about you
    - all about intent (what you're using the data for)

    - have a backbone
    - be sure why you're looking for data
    - listening to what users say <-- bad?!
    - FIGURE OUT WHAT THEY MEAN, not what they say
    - sometimes dont be yourself when gathering feedback (no bias)
    - have people challenge you

    ### Please Recycle - James Cabrera

    - dont think what it actually is, but what its function is
    - example, he made a player card for an NFL player, but it can be reused as a PBA player card or even a car information card

    ### Atomic Design - Brad Frost

    - [STYLEGUIDES!](http://styleguides.io)
    - What is an interface made of?
    - we're not designing pages anymore, we're designing systems of components

    - framework potential pitfalls
    - one size fits all
    - lookalike issues
    - bloat
    - might not do everything you need
    - subscribe to someone elses structure, naming conventions

    - benefits of front end styleguides

    ** PROS **
    - promotes consistency
    - easier to test
    - better workflow
    - creates a shared vocabulary
    - useful reference
    - future-friendly foundation

    ** CONS **
    - time consuming to create
    - treated as a separate project
    - often too abstract
    - seend only as a developer/designer tool
    - often created after a project launches
    - lacking a clear methodology

    - Components of atomic design

    ** Atoms ** (abstract)
    - not useful by themselves, but a reference
    - label
    - input
    - button

    ** Molecules **
    - search form molecule
    - label input button
    - product card

    ** Organism **
    - same 'molecule' repeated over and over again
    - product grid made up of product cards

    ** Templates **
    ** Pages ** (concrete)

    ** Pattern lab is NOT these **

    - UI Framework
    - Language, library, style, workflow dependent
    - incredibly rigid

    - Set expectations
    - Gathering
    - [stylify me](http://stylifyme.com)
    - interface inventory
    - typecast - tool to compare fonts
    - style tiles
    - element collages
    - collaboration and communication trump process
    - "When you're finished changing, you're finished" - Benjamin Franklin