Front-End + Interface Design Bootcamp

Front-end is quite a beast these days, and with new fancy technologies showing up every other month, what do we need to keep in mind to write sane and maintainable code? What strategies and techniques could be applied to make our interfaces better equipped for a blurry mobile context? The world is beautifully versatile and unpredictable, and so we need a strategy to figure out how design and development need to change to accommodate for it.

Exactly that is the purpose of this full-day workshop with Vitaly Friedman, creative lead and front-end/UX consultant behind Smashing Magazine. In this workshop, Vitaly will be exploring some of the challenges from his work and the work of his colleagues in front-end, UX and interface design, and explore new challenges and strategies for getting to better results, faster. The first half of the day will be dedicated to interface design challenges, and the second half to useful, practical front-end strategies and opportunities.

Take the techniques with a grain of salt — we do not take responsibility for sleepless nights and nightmares caused by the content of this session.

What will the workshop cover?

In this workshop, we’ll go hands-on into exploring:

• Responsive design workflow and process, including breakpoint diagrams, design systems, pattern libraries and component-based workflow,
• Behavior patterns of customers on mobile devices — how we tap, click, scroll and swipe — and its implications on interface design for mobile,
• Smart interface design patterns for mobile, incl. navigation, forms, date pickers, tables and maps,
• eCommerce UX, with email verification, password input, country selector, privacy issues, sliders and general conversion optimization.
• Accessibility guidelines for navigation and common UI components, such as an accordion,
• How to build connection-aware and memory-aware UI components,
• Advanced layout techniques with CSS Grid,
• Building with Logic Fold using Custom Properties,
• Performance optimization techniques for text, images, web fonts, 3rd-party scripts, CSS/JS as well as HTTP/2,
• Maintenance issues and dealing with legacy browsers,
• Common front-end challenges and solutions.

What hardware / software do you need?

You'll need to bring a lot of creativity with your preferred coffee mug and your laptop. We’ll be spending a lot of time drawing, sketching, designing, building and thinking. Be ready to challenge your general view of design process and how our interface should look like. You’ll need a lot of sleep reserves since it’s going to be a packed day. Bring a lot of attention to detail and non-standard thinking to this one! ;-)