Gilmour Academy
LancerTech

6: 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.

For rapid prototyping, don't be afraid of using Flaskinni's default theme. Proving your app concept with a pleasant, neutral design is smart.

Custom layer

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 using different files. That way we can more easily upgrade the theme in the future. The custom.css file (that hopefully you're using Sass to produce) in our <head> after the theme’s CSS. That way, our rules will overwrite the theme’s. We’ll have the final say.

Change base.html

Implementing a new theme is tricky business. You'll have to rebuild your static assets and modify all the templates. The base.html file will need the most amount of work as it will need to reflect We talk about that more next chapter.

The Brand

Building your app, your team, and your company requires a lot of drive. A brand identity is a flag on a battlefield for your soldiers to rally.

Colors

Go to the websites of some major brand names you know and look at the colors used. If you did deep enough, you'll find a variety of button colors, but most things follow a pretty consistent pattern. It's time to set up such a pattern inside our CSS.

This example doesn't use Sass. Not great.

Sass

Hopefully you have a _variables.scss file where you can drop all your color palette. Many themes include these assets. Flaskinni's default theme comes from startbootstrap so you can take advantage of the Sass structure to quickly implement your colors.

If you're using SourceLair, you may need to upgrade Sass so it can handle recent Bootstrap templates. So first run npm install -g sass so you can then run: sass app/static/scss/custom.scss:app/static/css/custom.min.css

The code below are example MacOS settings for the Live Sass Compiler extension for VS Code. 

    // add to your settings.json file in VSCode if you choose to liveSassCompile
    "liveSassCompile.settings.includeItems": [
        "/app/static/scss/custom.scss"
    ],
    "liveSassCompile.settings.generateMap": false,
    "liveSassCompile.settings.formats":[
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "/app/static/css/"
        }
    ]
LogoTheming Bootstrapgetbootstrap
At least glance through the documentation

Fonts

You'll need a header and a body font at least. Sometimes a logo font is used as the headers, sometimes not. You may want to pick out your logo first and then find complementary fonts afterwards.

http://fonts.google.com

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

https://www.youtube.com/watch?v=zOPA0NaeTBkwww.youtube.com

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

LogoAdobe XD | Fast & Powerful UI/UX Design & Collaboration ToolAdobe
Free, popular and loaded with tutorials
LogoLearn XD Prototyping | Adobe XDAdobe
They really do a great job of teaching this stuff. I don't have to do anything
LogoSketchSketch
While I prefer Adobe XD, I've seen tons of great work on Sketch
LogoFigma: the collaborative interface design tool.Figma
Free for students!

The wire-framing that needs to be added to your branding document is essentially just shapes illustrating what your app can do. You could use Google Slides in a real hurry. Ideally though, you should use the wire-framing process not only to determine all the steps your users will need to take, but also how you'll organize the interface. You're making UI decisions as well as UX.

I try to start by first looking through the pages that come with my HTML theme and see what sort of layout, widgets and objects are readily accessible. 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.

HTML mockups

Building HTML mockups is much, much slower than Adobe XD. You ought to sketch out your apps before you code HTML elements. But designing the HTML elements using the theme assets you'll have in production takes you from planning the outline of the user experience (UX) to the mechanics of the actual interface (UI).

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

Previous5: Tour FlaskinniNext7: Theme & Blueprint

Last updated