Responsive Interface Design BootcampWorkshop Slides/Videos Hello friends

Responsive Interface Design BootcampWorkshop Slides/Videos
Hello friends! 🙂 Below you’ll find the links to slides and videos (incl. the ones we won’t have time to cover). Email: [email protected] / Skype: vitaly.friedman

URL: www.smashed.by/kiev17
Wi-Fi: DaGuest / Enjoy IT

Please come up with a cool name for your team (2–3 people) and add it into the table.(Every cool team needs a cool name. Duh.)

——

Team’s name 1 2 3 4 5 6 7 8 ?
The Early Birds – – – – – – – –
#dratuti
Bananas
Unicorns
ReefsThree

ETeam’s name 1 2 3 4 5 6 7 8 ?
Three
Susteam
x-team
User-friendly Crew
BadDesignLimited

Levels:1: Outbreak, 2: Accordion, 3: Monster, 4: Builder, 5: Transaction, 6: Booking7: Comparison, 8: Schedule, 9: Map

——

eBooks

Design Systems (PDF)https://www.dropbox.com/s/nz2ty9kmyi0je53/design-systems-v9a-final.pdf?dl=0
Inclusive Design Patterns (PDF)https://www.dropbox.com/s/cjv1njw60pwzbq9/inclusive-design-patterns.pdf?dl=0
Real-Life Responsive Design (PDF)https://www.dropbox.com/s/b0vwvy0geobez2i/Smashing-Book-5-eBook.pdf?dl=0

——

Slides + Videos

All slides of today’s workshop (10 tasks, 580 slides, 250 Mb):https://www.dropbox.com/s/kum8gx2p5qlpjzd/responsive-design-interface-bootcamp.pdf
Master slide deck (19 sections, 3000 slides, in one .zip file) (1.08 Gb):https://www.dropbox.com/s/gy4wu70824ire6l/RWD-Tricks-Workshop-Master.zip?dl=0

Each slide deck separately (19 sections)
HYPERLINK ;https://www.dropbox.com/s/v73sm40okt717b4/01-design-systems-workflow.pdf;
01-Design-Systems-Workflow.pdf
02-Navigation-Typography-Content.pdf HYPERLINK ;https://www.dropbox.com/s/x506lk2zhqkla94/02-navigation-typography-content.pdf;
03-Responsive-Design-Patterns-Upscaling.pdf HYPERLINK ;https://www.dropbox.com/s/dpldkktaf9ktsr5/03-rwd-patterns-upscaling.pdf;
HYPERLINK ;https://www.dropbox.com/s/97cd1t8t8grffdf/04-web-forms-orientation.pdf; 04-Web-Forms-Device-Orientation.pdf
05-Building-Design-Systems.pdf06-eCommerce-UX.pdf
06b-eCommerce-Trends-2017.pdf
HYPERLINK ;https://www.dropbox.com/s/gp5x8btbjyb1rwa/07-flexbox-grids.pdf; 07-Flexbox-Grids.pdf
HYPERLINK ;https://www.dropbox.com/s/m0zbackxqa9ayrp/08-SVG.pdf; 08-SVG.pdf
HYPERLINK ;https://www.dropbox.com/s/i8sphclw6jursdi/09-dirty-tricks.pdf; 09-Dirty-Front-End-Tricks.pdf
HYPERLINK ;https://www.dropbox.com/s/dhsae3i33l340tl/10-accessibility.pdf; 10-Accessibility.pdf
HYPERLINK ;https://www.dropbox.com/s/2moeqh7t6uhh7gt/11-web-fonts-loading.pdf; 11-Web-Fonts-Loading.pdf
HYPERLINK ;https://www.dropbox.com/s/ohrhhum13egoetj/12-rwd-images.pdf; 12-Responsive-Images.pdf
HYPERLINK ;https://www.dropbox.com/s/t7c8uq6oyd69ccf/13-rwd-typography.pdf; 13-Responsive-Typography.pdf
HYPERLINK ;https://www.dropbox.com/s/z23ml5icvz7hptr/14-performance.pdf; 14-Performance.pdf
HYPERLINK ;https://www.dropbox.com/s/x1byr42taz1a6rh/15-conditional-loading-IE8.pdf; 15-Conditional-Loading-IE8.pdf`
16-Responsive-Email.pdf HYPERLINK ;https://www.dropbox.com/s/4k9c1kgk40fmc0l/16-rwd-email.pdf;
HYPERLINK ;https://www.dropbox.com/s/457am3brptrubnu/17-http2.pdf; 17-HTTP2.pdf
18-Offline-Experience.pdf
HYPERLINK ;https://www.dropbox.com/s/794ucexfm203pt7/19-rwd-strategy.pdf; 19-Responsive-Strategy.pdf

UX/Design Workshop Video (3:30h, 737 Mb)

https://www.dropbox.com/s/b2pmi6o27xjrljq/Online-RWD-UX-Workshop.mov

Front-End + Perf Video (3:00h, 748 Mb)https://www.dropbox.com/s/b2pmi6o27xjrljq/Online-RWD-UX-Workshop.mov
https://www.dropbox.com/s/gpurpy0zbomys2j/Online-RWD-Front-End-Perf-Workshop.mov

RWD eCommerce Checkout Video (2:38h, 730 Mb)
https://www.dropbox.com/s/a5k2no1zu0a4ryq/Smart-eCommerce-Checkout-Design-Patterns.mp4?dl=0

Styleguide ; Boilerplate Patterns Google Spreadsheet
https://docs.google.com/spreadsheets/d/1tZYPnzLG0y51QinLxrV97Xflzr2MbTqwWNvaHYN104BE/edit#gid=0

Pattern Library Article
https://www.smashingmagazine.com/taking-pattern-libraries-next-level/

Checkout Checklist (PDF, Pages)
http://www.smashed.by/checkout
https://www.dropbox.com/s/x9jnd6e6lb91uqr/eCommerce-checklist-1.0.zip?dl=0 (0.8 MB)
Email:[email protected]
Skype:vitaly.friedman

But please don’t share the links publicly — I’d sincerely appreciate it.

Responsive Art-Direction

Open all links at once:
http://www.linkrr.com/

Jen Simmons Showcase (CSS Grid Layout)
http://labs.jensimmons.com/2016/

Showcase of Japanese websites
www.responsive-jp.com

Websites with horizontal and vertical writing directionhttp://tategaki.github.io/awards/

Unusual forms and shapes / Conference websites
http://projections.pl/venue?lang=en
http://www.epicurrence.com/
http://squaresconference.com/
http://circlesconference.com/

Home

Taking a Break in 2017


http://valiocon.com/
https://2016.fromthefront.it/
https://theintercept.com/drone-papers/the-assassination-complex/
http://www.sbnation.com/2015/8/10/9107619/myanmar-chinlone
http://product.voxmedia.com/2015/8/11/9133365/talk-travel-design-to-me
http://conference.awwwards.com/
http://underware.nl/

Layout, animation, interaction
http://qz.com/se/25-days-of-exchange/
https://www.bloomberg.com/features/year-ahead-2017/
http://loflorecords.com/
https://www.intercom.com
https://sydney.edu.au
http://waaark.com/
https://www.bloomberg.com/businessweek/design-conference/
https://www.technologyreview.com/
http://harvardlawreview.org/
http://www.msichicago.org/
https://www.sequoiacap.com/
http://www.kikk.be/2016/
http://labs.jensimmons.com/

Interface done well:
https://fonts.google.com/

Strong art direction:
http://www.gorki.de/
https://www.propublica.org/article/false-rape-accusations-an-unbelievable-story
http://www.animalmade.com/
https://www.propublica.org/article/devils-deals-and-the-dea
http://www.adultswim.com/music/singles-2016/
http://www.dohop.com
https://www.yatzer.com/
https://thegreatdiscontent.com/
www.citroenorigins.co.uk
www.tpsre.ru
www.fifamuseum.com
http://primate.co.uk/images/portfolio/CLN07.jpg
http://nurturedigital.com/
http://www.cantorfineart.com/product/tfl-keith/
http://falter-inferno.at/#en

Just well-designed:www.ruter.no/en
www.nsb.no/http://www.ruter.no/enen/frontpage
http://money.rbc.ru/calculator/currency/?amount=5000

Interesting examples of mobile experiences in Hebrew, Arabic and Japanese.

http://www.emirates.com/ae/arabic/
http://www.keiho-u.ac.jp/international/network/
http://www.aljazeera.net
http://alaxon.co.il/

Responsive pricing tables
https://feds.slack.com/pricing
https://tympanus.net/Development/PricingTablesInspiration/
https://codyhouse.co/gem/pricing-tables/

Tasks:

Task 1: Warming Up, Redesigning Gov.HK-9524925460325-9524930984825-9524934314000-9524946643925

Task 2: Perfect Accordion

Task 3: Mega Drop Down

Task 4: Car Configurator
Task 5: The Stadium