- For previous episode check HERE.
- For full code see my GitHub repo instrumentality-landing
- For a live demo of the progress of the project see this Heroku app: https://instrumentality-landing.herokuapp.com/#/
Today, in Fullstack Wizard, we are going to discuss a bit about designing your landing site. Since a full-stack developer plays multiple roles, the next role we must cover is that of the designer. I know, I know, we, developers, know close to nothing about design and we are going to end up creating a mediocre product, but our landing site should at least not look like we started working on it in 1997.
The design that I came up with is this:
The web designers reading this article are probably scratching their eyes and screaming in agony right now, but at least this site looks modern, relatively fresh, doesn't use bad stock photography with an unoriginal slider in the middle, and is fully optimized for mobile browsing.
We are going to have a full episode where I'm going to talk about front-end optimizations, but for now, let's say that this site doesn't just look good on phones but also behaves nicely and the experience is smooth.
Designing beautiful UI 🎨
The most important thing to keep in mind is that your interface should be consistent. Don't juggle a bunch of fonts and colors and don't create UI elements that look different but serve the same purpose. In my design, if you look at the first set of cards, they follow the same design guidelines and while the content is different, the user understands that those are three instances of the same element and knows that there is something binding them together.
Another tip to remember is, use the white space. Don't stuff your site with dozens of UI components, let them room to breath. This will allow the user to easily understand how to navigate your website and won't give them a headache trying to find things. When everything is spaced out evenly the user gains a sense of comfort and order.
The third important tip is, don't reinvent the wheel. There are certain UI elements that the user expects to see, like a navigation bar at the top or a hamburger menu on mobile devices. The average user has no time to learn entirely new workflows that are specific to your application. When creating those components we sometimes forget to see our work from the end user's point of view and we tend to over-complicate things. Be bold with your designs, but give the user some sense of familiarity.
Gathering resources for designing interfaces 📦
Now, with those tips in mind, let's head to the cupboard with magical ingredients that will make up our UI.
Remember: Never use resources that you don't have the right to! Always check the license of the illustrations, images, and fonts you use!
The first ingredient in our recipe is a color palette. My recommendation is ColorSpace. This tool is extremely easy to use, just choose a color that you like and they will generate a color palette for you based on that color.
When creating Instrumentality, I used the following palette:
The next ingredient on our list is a set of fonts. I'm working with two fonts, though you probably didn't see any difference at a first glance. My advice is, don't use too many or very different fonts. I recommend Google Fonts as a place to get your fonts. I used Noto Sans and Cantarell. The former is used as a general UI font, while the latter is only in the title and subtitle in the first photo.
This step is optional, but you'll probably want to get a logo. Most "logo creators" online are either paid or don't provide you with a .svg file after you create that logo, so I advise you to create your own using SVG shapes that are free for commercial use (if you intend to get money out of your product) and editing them. My logo is a stylized C clef which is released in the public domain.
Did you get everything? If yes, it's time to stir the cauldron and mix the ingredients into one of the most powerful concoctions known to modern man, a beautiful UI.
Creating a global theme for your application 👨💻
In the previous episode, we created a boilerplate Vue.js project. It's time to open it with your favorite code editor, something like Atom or Visual Studio Code. In the public folder you should place your favicon.ico file. To get one, I recommend using XnConvert to convert your .svg logo into an ico file.
In the src/assets folder we'll place our images, illustrations, and Less files. If you chose to work with SCSS or vanilla CSS you can still follow this tutorial just make sure to make the appropriate modifications for you.
I'll go ahead and create a theme.less file in the assets folder and I'll create some variables representing my color palette and import the fonts I'm using.
/**
* 1. Colors
This section defines the colors used throughout the landing site as well as the frontend side of the app.
*/
@brand-color : #A41F76; // This color is used as main color on white backgrounds
@brand-color-sister : #f3665b; // This color is used on white backgrounds to create gradient effects with the brand color
@link-color : #008BCF;
@brand-color-dark : #F9F871; // This is the main color on dark backgrounds
@brand-color-sister-dark: #FF9650; // For gradient effects on darker backgrounds
@text-color : #262229;
@text-color-dark : #FFF3FF; // Modified White
@brand-color-shade1: #ED69B7;
/**
* 2. Fonts
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cantarell&display=swap');
/**
* 3. Default UI values
*/
body {
background-image: linear-gradient(to right bottom, #ff9650, #fe8d51, #fc8453, #fa7b55, #f77257, #f2665a, #ec5b5e, #e55062, #d84168, #c9336d, #b82772, #a41f76);
}
@media only screen and (min-width: 760px) {
background-attachment: fixed;
}
This is how my theme.less file looks like. Now, instead of writing those colors and importing the fonts into each and every component that I make, I can just import this file and use the variables I already defined.
Next up, we are going to delete the About.vue component from src/views/About.vue and we'll modify the src/router/index.js file to look like this:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
}
]
const router = new VueRouter({
routes
})
export default router
Also, you can delete the HelloWorld component from src/components and clear out everything in the Home component. This way you'll be ready to work with a clean slate.
I won't guide you in every step along the way since part of the learning process is breaking things and searching fixes, but I'll give you a useful tip on how to import UIkit globally in your new Vue application. If you remember from our previous episode, UIkit is the CSS framework I chose to work with and I showed you how to install it through yarn. To import it, all we have to do is add some lines to our App.vue file.
In the script section write:
<script>
import UIkit from "uikit";
import Icons from "uikit/dist/js/uikit-icons";
UIkit.use(Icons);
export default {
name: 'App'
}
</script>
And finish with these changes in your style section:
<style lang="less">
@import "../node_modules/uikit/src/less/uikit.less";
@import "./assets/theme.less";
</style>
As you can see, we also imported our global theme file.
If you made different decisions regarding the CSS framework and pre-processor, don't worry everything will fit together if you follow the directions given by more seasoned users on the internet.
Our time for today has come to an end. Make sure to tune in next time when we'll take a look at how to create some of the Vue components you've seen in the pictures, how to stylize them with UIkit and we'll discover what it means to create a mobile-first experience. See you next time in class!