periodicdesign / iasummit-2015-designing-in-code

Designing in Code: Getting Started with HTML Prototyping

Prototyping is essential to the design process. The possible methods for execution are many, from paper prototypes to clickable prototypes built in desktop or web-based tools. The downside to many of these tools is they can’t always answer all of our questions. Subtleties such as animations or how a component responds across breakpoints can be best explored through its intended medium: code.

We’ll cover how to get a workflow in place for HTML prototyping, troubleshoot your designs in the browser with inspectors, and think modularly about your designs much quicker. If you’re looking to explore HTML prototyping, this workshop is for you.

Prereqs & Preparation

• Basic knowledge of HTML and CSS. If you know what a

  tag is and that you need a curly braces ({}) for your CSS to work properly, you’re golden

• Please bring a laptop running the latest version of OS X or Windows (yes, we are dual-platform friendly)
• Your favorite text editor
• Check back here April 15 for the digital assets you'll need

Session Takeaways

• Understanding the basics of an HTML prototyping workflow
• How to use prototypes to troubleshoot your designs during development
• Tips and tricks for prototyping with others
• How to think modularly with your designs early
• How to set up your machine to prototype your design ideas in HTML/CSS

Using this Repo

To use this repository, you'll need to attend this talk at the 2015 IA Summit: http://www.iasummit.org/events/ias2015

Based on Agency from Start Bootstrap

Agency is a one page agency portfolio theme for Bootstrap created by Start Bootstrap. This theme features several content sections, a responsive portfolio grid with hover effects, full page portfolio item modals, a responsive timeline, and a working PHP contact form. Theme was modified by Jason Wishard.

Start Bootstrap was created by and is maintained by David Miller, Managing Partner at Iron Summit Media Strategies.

• https://twitter.com/davidmillerskt
• https://github.com/davidtmiller
• https://twitter.com/periodicdesign
• https://github.com/periodicdesign

Start Bootstrap is based on the Bootstrap framework created by Mark Otto and Jacob Thorton.

Changes to Start Bootstrap

• Color
• Image usage for certain sections

Copyright and License

Copyright 2013-2015 Iron Summit Media Strategies, LLC. Code released under the Apache 2.0 license.