Monday, November 3 (9:00am - 5:00pm)
CSS with Superpowers: Modular Front-End Development with Sass & Compass
Discover the benefits of using Sass, a CSS pre-processor, along with Compass to help streamline front-end development, collaborate with other developers, and overall to help you enjoy writing CSS. The workshop will be divided up into 4 sections: basic, intermediate, advanced and tools of the trade and other fun tricks. You’ll need to bring your laptop with Sass and Compass installed.
What You'll Learn
- Pre-processor basics & setup
- Sass vs. SCSS syntax
- Basic DRY concepts with variables and nesting
- Functions and operations
- Expanded DRY concepts with mixins, extend, and placeholders
- Media queries
- Lists and new Sass 3.3 features
- Structuring Sass files and directories
- Using Compass
- Other frameworks
- Front-end performance
- Questions and tinkering
Building Your Brand: Designing From the Ground Up
As designers we generally cannot wait to throw ourselves head ?rst into projects, to start sketching, thinking about colors, and imagining user ?ows. It’s important to put on the breaks and step back from the project to address the problems you’ll be solving. At the end of the day, great design is solving problems elegantly and simply. How will you work with your teams and/or clients to make your products and/or services stand out and be successful? From creating a future vision for your brands to crafting a compelling and emotive product story, this intensive workshop explores a series of exercises that are essential to a calculated creative process. Join Jon for a day full of collaborative, creative, and hands-on exercises that you can take back to your clients and your teams. You'll just need your laptop. We’ll provide notebooks, pens, markers, and more.
What You'll Learn
- How to create powerful future visions for your brands that set projects in the right direction.
- Branding workshop exercises that will ignite creativity amongst your teams and lead you towards that “big idea”.
- Brainstorming for designers and sketching layouts with a real purpose.
- Techniques to turn your project into an emotive story people want to hear.
- How to present your ideas to the toughest of clients.
Psychology For Designers – SOLD OUT
In this workshop we'll look at how people build models of the world around them and how we can use that knowledge to create great user experiences. We'll go right back to the basic psychology theories underpinning planning, decision making and perception. From there we'll build on how users decide what to do in certain situations and why many websites fail because they don't match the model and thus the expectation the user has for how a website or app will work. You'll be a designer, developer or product manager interested in making your stuff better. You'll need to care about doing the right thing and want to understand how people think, behave and feel. No previous psychology or UX experience needed. You'll learn to support users to do what they want and expect (and you want them) to do, improve metrics and success of your website, product or app, make your customers fall in love with your product and learn how psychology can help build a great user experience. Enthusiasm is a must as is a pen, paper and a mobile/tablet to look stuff up.
What You'll Learn
- Why match design to behaviour and what goes wrong when you don't
- The psychology theory behind how people model a task and the world around them
- The tools to understand and map the way people model a task
- How to match your design to the map/model and make it a success
- Mapping and designing the details - as it’s these that count
- Loads of little psychology tidbits that will improve a design and make you a better designer
Responsive Design with Bootstrap
Bootstrap is among the most popular front-end frameworks in use on the web today. Core to Bootstrap is a fully responsive grid system. For many, this alone is the main attraction to frameworks in general. Using the grid system inside Bootstrap we can create complex layouts that beautifully adapt to any screen size with amazing ease. On the surface it appears to make responsive web design look easy. Unfortunately though, there is more to the story. In order to make things work the way we expect, even on the most simple of layouts, one must nest columns. As a result, it gets mind blowing fast. In this session we will briefly introduce you to the Bootstrap framework with a particular focus on its robust grid system. The primary focus of the workshop will be on coding frequently used responsive layouts such that they can accommodate changing content as you would expect. Finally, we will look at how to combine, and nest, these layout patterns to create full pages with infinite variety. After this workshop you will have a solid understanding of the Bootstrap grid system. You’ll know how to use it to create robust, flexible and reliable layouts. Additionally you’ll have a library of layout structures that can be combined in countless ways and will be empowered to put Bootstrap to work. You’ll need a laptop with your favourite code editor and a solid working knowledge of HTML and CSS. No prior experience with Bootstrap is required.
What You'll Learn
- A brief introduction to Bootstrap
- A detailed look at the Bootstrap grid system
- Strategies for building layouts with Bootstrap
- Common responsive layout patterns and their implementation
- Nesting patterns for spectacular results
- Specifics of Bootstrap including: containers, rows, columns, push, pull, offset and more