5: Visualize Your App

Expectations

If you don't start visualizing things before you're knee-deep in code, your product will lack a cohesive visual style and an intuitive workflow. Building an app starts with colors, logos and most importantly, wireframes.

Learning Targets

  • I can develop a brand identify for my product including logos, color pallets, fonts, and tone of voice.

  • I can outline the workflow of my app in a wireframe.

Setup a local folder using something like Google Drive to collaborate with your team. Download a theme. Start a PowerPoint or Google Slides document to take notes, build a scrapbook of visual designs that can help you shape the message you’re trying to send.

Select a Theme

Rather than design our own HTML layout and polish the finer details and effects, we’re going to use a theme. We’ll look at paid themes and free themes. You must make sure your theme is based on Bootstrap, preferably the most recent version. You want to make sure that the theme has a variety of elements and layouts that will allow you to mockup pages quickly.

The Importance of custom.css

Never make changes to theme.css, style.css or whatever your file is called that governs the primary rules of your theme. We will override the rules there, not edit them directly. We’ll load a custom.css file in our <head> after the theme’s CSS. That way, our rules will overwrite the theme’s. We’ll have the final say. This also helps because if we ever replace the theme.css, we won’t lose our styles.

Fonts and Colors

http://coolors.co

https://color.adobe.com/create/color-wheel/ ← expand the 5 colors you get from coolors

http://fonts.google.com

Make your selections, add them do your Slides first. Then we’ll start to add notes to our custom.css.

Start sketching ideas on your branding document. It can be very powerful to have a logo designed early in project development as it sets styles, colors and gives you something to reference when discussing your project.

http://graphicriver.net

Stock Images

http://allthefreestock.com/

Shutterstock.com -- start building collections of images you might want to use

Add images to your branding document. Scrapbook images that you don’t intend or are unable to buy and use but speak to the type of look and feel you want (or want to avoid). Have a different section for images that you may want to purchase and use later on. Free images you can start to download and organize into your team’s project folder. Paid images you can start to save in bookmarks, links on your slides, or in other ways.

Wireframes

https://www.adobe.com/products/xd.html

https://www.sketchapp.com/

Google Slides

The wire-framing that needs to be added to your branding document is essentially just shapes illustrating what your app can do. Ideally, you will look through the pages that come with your HTML theme and see what sort of layout, widgets and objects are readily accessible and you keep them in mind when designing your wire-frames. After this early phase, we will be building full HTML mockups to illustrate these wire-frames.

Best Way: HTML mockups

Before you advance, be sure you’re making steady progress through the Flask Udemy course (and getting help when stuck)

  • Use the template files to design static HTML mockups of your app’s login (and/or) registration and homepage

    • You only need to make the navigation bar and footer of your homepage. Remember, those elements will be placed into your template base.html and will serve as the frame for every page

  • Why didn’t I recommend you build the mockup for your key wireframe? Why only draw your app’s key screenshot using simple shapes? Why not make full HTML mockups of each screen in our app?

    • Everything will change when we bring this HTML design to our Flask app in our c9 IDE. But most of the content on your homepage will be the same (same with your form pages). But screens that show the objects of our app’s design are likely to change a lot. Don’t get me wrong: It can be great to mock them up, so please give it a whirl if you’ve got the manpower to spare.

  • A well organized and commented custom.css is more valuable than stunning homepage content and a really slick hero.