6: Visualize Your App
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.
- 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.
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.
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. 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.
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.
.gif?alt=media&token=74600999-2b0c-4d28-9145-a48514d74c46)
Bajirao Mastani is a metaphor for the rallying effect of a brand
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.
- https://colors.eva.design/ Eva will help you fill in any gaps on the standard Bootstrap colors (primary, success, info, warning, danger)
This example doesn't use Sass. Not great.
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.cssThe 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/"
}
]
Theming Bootstrap
getbootstrap
At least glance through the documentation
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.
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.
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.
Adobe XD | Fast & Powerful UI/UX Design & Collaboration Tool
Adobe
Free, popular and loaded with tutorials
Learn XD Prototyping | Adobe XD
Adobe
They really do a great job of teaching this stuff. I don't have to do anything
Sketch
Sketch
While I prefer Adobe XD, I've seen tons of great work on Sketch
Figma: 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.
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)
Last modified 3yr ago