Building a modern UI

Having a good user interface is no longer a luxury. Ugly websites and apps are increasingly being replaced by beautiful ones. But if you are not a designer, how do you go about building a good UI (without hiring a designer)?

In this talk, we’ll walk through some of the modern tools, frameworks, and resources to bootstrap amazing UIs (and yes, Twitter Bootstrap is one of them, but it’s only part of the equation).

Here are some of the tools we will be covering: Bootstrap, Bootstrap Themes, SVG, HTML5, CSS3, ReactJS, Less, Sass, and a few more.

You will leave this talk with a good understanding of how to start building a stunning front end for your next killer project!

Transcript

1. Building a modern UI Caleb Madrigal http://calebmadrigal.com @caleb_madrigal
2. Having a good UI is no longer a luxury
3. This will no longer cut it:
4. When this is an alternative:
5. And I don't know why people use priceline.com:
6. When you can use hipmunk.com:
7. Bad UI is a big reason Myspace died
8. An ugly UI is often seen as a badge of honor
9. So how do I quickly build a UI?
10. My answer 5 years ago Option 1: Use a CMS with Themes, and modify Themes 1. Find a theme which is similar to what you want 2. Modify it 3. Try to shoehorn your data model into the CMS
11. My answer 5 years ago Option 2: Photoshop-originating / sliced images 1. Designer creates website design in Photoshop 2. Either designer or programmer slice up images 3. Programmer tries to get pixel-for-pixel emulation of photoshop images implemented in HTML/CSS/JS
12. The modern way
13. Twitter Bootstrap (http://getbootstrap.com/)
15. Grid System
19. Bootstrap Themes Templates built on Bootstrap What’s awesome here is that, it’s just plain old HTML/JS/CSS, so you can actually have full control over your UI and app. Sources: https://wrapbootstrap.com/ http://bootstrapzero.com/ http://startbootstrap.com/ http://bootswatch.com/
21. Bootstrap Theme examples
22. Bootstrap theme: http://startbootstrap.com/template-overviews/grayscale/
23. Customized:
24. Bootstrap theme: https://wrapbootstrap.com/theme/twilli-sky-responsive-html-template- WB04700M8
25. Customized:
26. Steal! "Good artists copy, great artists steal" (Picasso) Stealing content = BAD Finding design inspiration = GOOD
27. Reason to steal #1: To learn the trends
28. Reason to steal #2: Affordance How many teapots have you seen that don't follow this rough pattern? A million dollar word meaning roughly "is obvious to use". Where on the screen should you look for the "logout" button?
29. Reason to steal #3: "Everyone is doing it" Example: websites that have both service consumers and service providers...
33. Cheap/free professional design work Fiverr (https://www.fiverr.com/) - cheap logos, graphics, etc Icon packs http://glyphicons.com/ http://glyphish.com/
34. SVG Making your own SVG icons is easy with apps like iDraw Sketch 3 Adobe Illustrator Inkscape (Open Source!)
35. Single-Page Apps If you are developing a web app (vs a website), you probably should build a Single-Page App (SPA) What are they? There is only 1 real page Each "page" is actually a div rendered by javascript (often retrieved with AJAX).
36. Caveats to SPAs Their content often can't be indexed by search engines (except maybe the initial page) There can be flickering effects (since rendering is client-side) DO NOT build your website as a SPA if it really doesn't need to be, just because it is the "new way". Many websites would be worse as an SPA (like Wikipedia).
37. If you build a Single-Page App, I recommend React. Benefits of React: Uni-directional data flow Functional programming-style rendering When a new piece of data comes in, the entire UI is re-rendered from the top-down But only in the Virtual DOM - so it is easy to reason about, but fast to run Potentially: easy native mobile apps with React Native (yet to be really tested in the wild) Component-based "Custom elements" comprised of both their DOM structure and scripts This sounds bad, but I think it has merit.
38. Web Components Standard https://en.wikipedia.org/wiki/Web_Components http://www.w3.org/TR/components-intro/ Web Components is a new standard for reusable custom HTML elements, encapsulating HTML, CSS, and JS. Polymer (https://www.polymer-project.org) is a helper library for Web Components.
39. Example of using a Web Component
40. Example of building a Web Component
41. Bower Package management for web dependencies. To install and save to the bower.son file: "bower install --save FileSaver" Example bower.json file:
42. Grunt/Gulp Automation of mundane tasks like: Minification Linting (especially helpful for Javascript) Test server (with auto reload on change) Running unit tests
43. Yeoman generators http://yeoman.io/generators/ Good way to bootstrap a project. Can give you: Grunt configured Bower configured Test harnesses Skeleton layout
45. The End! Caleb Madrigal http://calebmadrigal.com @caleb_madrigal