Improving your visual design skills: Thoughts for beginners

Last summer, I set out to improve the visual polish of my client deliverables. Other UX team members’ work looked like it could have been from members of the visual design team, and it was time to up my game. I felt lost, however, in plotting concrete steps to accomplish this goal. While I knew what I need to do — build an understanding of typography and color, and strengthen existing skills around layout and visual hierarchy — I didn’t know what resources to trust, tools to use, or ways to practice.
Fast forward a year, and my visual skills — while still budding — have grown. If you’d like to create more visually effective deliverables and improve your basic visual design skills, below are resources and tools to get you started, and some lessons that will help you succeed along the way.

Books & Articles
Here are a few specific resources I can wholeheartedly recommend as a starting point:
Typography
Viget art director Mindy Wagner says that, “typography is the thing I recommend interns/juniors get right before anything else … if you get the type and whitespace down, you’re usually 90 there.” I recommend:
On Web Typography 26 Digital Typography Rules for Beginners20 Typography Mistakes Every Beginner Makes – And How You Can Avoid Them
Color
Viget VP of Design Tom Osborne has written a series on color that is accessible to beginners. I recommend:
Add Colors To Your Palette With Color MixingShades of Gray — Yes, ReallyFrom Darkness to Light: Color Versatility Using Tints, Tones, and ShadesSignal vs. Noise: Color as a Wayfinding ToolColor Contrast for Better Readability
On Design Education
Understanding color and typography are just the tip of the iceberg when it comes to building visual design skills. If you’re looking for more comprehensive advice on design education, I recommend:
How To Make Your Not-So-Great Visual Design BetterA DIY Design Education
Design tools
I used a few powerful, flexible tools that help you play and explore. For beginners, I recommend:
Typography
Google Fonts makes it fun and easy to filter through and play with different typefaces.
Google Fonts — There are a ton of typography tools out there, but as a beginner, I found Google Fonts to be especially helpful. You can easily filter through different typefaces, see how they look at different sizes and lengths, and pair different ones together. Best of all, Google Fonts are free, so if you see something you like, you can use it.
Color
Coolors.co has a simple and friendly interface that is perfect for people who are new at working with color.
Coolors.co — Coolors.co is especially friendly for people who aren’t color experts. The large color panels make it easy to compare colors side by side. Changing the hue, saturation, and brightness of any color is straightforward. Palettes can only have up to five colors, which keeps beginners from getting too complicated.  Additionally, you can generate random palettes, which are good for inspiration and figuring out what you think looks good together.WebAIM Contrast Checker — It’s helpful to get into the habit of checking color contrast early on in your visual design practice for the sake of accessibility. Plus, working  within the constraints of color contrast helps strengthen your color skills overall.
Interface Design
Sketch — Sketch is a great tool for beginners because of its flexibility — it’s powerful enough to create high fidelity comps but easy enough to use that it's a good wireframing tool. Sketch also makes it easy to see designs side by side, which is helpful as you’re iterating.
Figma is an intuitive, flexible tool. It’s web based, which makes it easy to share work, and it also has a Mac App, pictured above.
Figma — It’s been my tool of choice as of late. Figma feels similar to Sketch. It’s just as easy to use and just as powerful — but it’s web-based, which makes it easy to share your work and access it from anywhere.
Tips & lessons learned
See as much good design as possible
Gathering inspiration from others’ work will give you a sense of what you like and don’t. I recommend Viget’s work page, the FWA Site of the day, and Awwwards.com if you’re looking for some solid visual design examples.
Practice by duplicating
Recreating others’ work (for learning purposes only, of course) can be a good way to help you think through how good design is constructed and how those lessons might apply to your future work.
Realize no opportunity is too small for practice
There are plenty of opportunities to practice visual design outside of working on an interface. That informal Google Doc of notes? Play with fonts, and use something besides Arial or Helvetica. Got a presentation coming up? That’s a great opportunity to practice with typography, color, layout, and hierarchy to make the presentation flow.
Prioritize real projects
Whether personal or for a client, I find that real projects are more helpful than made-up design exercises. Pretend exercises just don’t offer the same constraints or personal investment as real ones.
When it comes to personal projects, start small
I find it helps to keep projects small, like a one-page site or some portfolio updates. Practicing new skills is hard enough without trying to also make big decisions around, say, interaction or product design. Keep it small and digestible so you don’t get overwhelmed.
Get feedback
It can be scary to think about sharing your work when you’re learning something new, but getting feedback from someone with more expertise will help your skills grow. There’s no right way or time to get feedback, but don’t be so married to your design work that you won’t be able to hear constructive feedback by the time you show it to someone.
----
To those of you who are just starting to build your visual design skills — good luck! If you happen to already be on this path, or if you’re a seasoned visual designer with thoughts on resources, tools, and lessons for beginners, please share!


Source: VigetInspire


Simple Server Side Rendering, Routing, and Page Transitions with Nuxt.js

A bit of a wordy title, huh? What is server side rendering? What does it have to do with routing and page transitions? What the heck is Nuxt.js? Funnily enough, even though it sounds complex, working with Nuxt.js and exploring the benefits of isn't too difficult. Let's get started!

Server side rendering
You might have heard people talking about server side rendering as of late. We looked at one method to do that with React recently. One particularly compelling aspect is the performance benefits. When we render our HTML, CSS, and JavaScript on the server, we often have less JavaScript to parse both initially and on subsequent updates. This article does really well going into more depth on the subject. My favorite takeaway is:
By rendering on the server, you can cache the final shape of your data.
Instead of grabbing JSON or other information from the server, parsing it, then using JavaScript to create layouts of that information, we're doing a lot of those calculations upfront, and only sending down the actual HTML, CSS, and JavaScript that we need. This can reap a lot of benefits with caching, SEO, and speed up our apps and sites.
What is Nuxt.js?
Server side rendering sounds pretty nice, but you're probably wondering if it's difficult to set up. I've been using Nuxt.js for my Vue applications lately and found it surprisingly simple to work with. To be clear: you don't need to use Nuxt.js in particular to do server side rendering. I'm just a fan of this tool for many reasons. I ran some tests last month and found that Nuxt.js had even higher lighthouse scores out of the gate than Vue's PWA template, which I thought was impressive.
Nuxt.js is a higher-level framework that you can use with a CLI command that you can use to create universal Vue applications. Here are some, not all, of the benefits:

Server-Side Rendering
Automatic Code Splitting
Powerful Routing System
Great lighthouse scores out of the gate 🐎
Static File Serving
ES6/ES7 Transpilation
Hot reloading in Development
Pre-processors: SASS, LESS, Stylus, etc
Write Vue Files to create your pages and layouts!
My personal favorite: easily add transitions to your pages

Let's set up a basic application with some routing to see the benefits for ourselves.
Getting Set up
The first thing we need to do if you haven't already is download Vue's CLI. You can do so globally with this command:
npm install -g vue-cli

# ... or ...

yarn add global vue-cli
You will only need to do this once, not every time you use it.
Next, we'll use the CLI to scaffold a new project, but we'll use Nuxt.js as the template:
vue init nuxt/starter my-project
cd my-project
yarn # or... npm install
npm run dev
You'll see the progress of the app being built and it will give you a dedicated integrationserver to check out: http://127.0.0.1:3000/. This is what you'll see right away (with a pretty cool little animation):

Let's take a look at what's creating this initial view of our application at this point. We can go to the `pages` directory, and inside see that we have an `index.vue` page. If we open that up, we'll see all of the markup that it took to create that page. We'll also see that it's a `.vue` file, using single file components just like any ordinary `vue` file, with a template tag for the HTML, a script tag for our scripts, where we're importing a component, and some styles in a style tag. (If you aren't familiar with these, there's more info on what those are here.) The coolest part of this whole thing is that this .vue file doesn't require any special setup. It's placed in the `pages` directory, and Nuxt.js will automatically make this server-side rendered page!
Let's create a new page and set up some routing between them. In pages/index.vue, dump the content that's already there, and replace it with:
<template>
<div class="container">
<h1>Welcome!</h1>
<p><nuxt-link to="/product">Product page</nuxt-link></p>
</div>
</template>

<style>
.container {
font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
padding: 60px;
}
</style>
Then let's create another page in the pages directory, we'll call it `product.vue` and put this content inside of it:
<template>
<div class="container">
<h1>This is the product page</h1>
<p><nuxt-link to="/">Home page</nuxt-link></p>
</div>
</template>
Right away, you'll see this:

Ta-da! 🏆
Right away, we have server side rendering, routing between pages (if you check out the URL you can see it's going between the index page and product page), and we even have a sweet little green loader that zips across the top. We didn't have to do much at all to get that going.
You might have noticed in here, there's a special little element: <nuxt-link to="/">. This tag can be used like an a tag, where it wraps around a bit of content, and it will set up an internal routing link between our pages. We'll use to="/page-title-here" instead of an href.
Now, let's add some transitions. We’ll do this in a few stages: simple to complex.
Creating Page Transitions
We already have a really cool progress bar that runs across the top of the screen as we’re routing and makes the whole thing feel very zippy. (That’s a technical term). While I like it very much, it won’t really fit the direction we’re headed in, so let’s get rid of it for now.
We're going to go into our `nuxt.config.js` file and change the lines:
/*
** Customize the progress-bar color
*/
loading: { color: '#3B8070' },
to
loading: false,
You'll also notice a few other things in this nuxt.config.js file. You'll see our meta and head tags as well as the content that will be rendered inside of them. That's because we won't have a traditional `index.html` file as we do in our normal CLI build, Nuxt.js is going to parse and build our `index.vue` file together with these tags and then render the content for us, on the server. If you need to add CSS files, fonts, or the like, we would use this Nuxt.js config file to do so.
Now that we have all that down, let's understand what's available to us to create page transitions. In order to understand what’s happening on the page that we’re plugging into, we need to review how the transition component in Vue works. I've written an article all about this here, so if you'd like deeper knowledge on the subject, you can check that out. But what you really need to know is this: under the hood, Nuxt.js will plug into the functionality of Vue's transition component, and gives us some defaults and hooks to work with:

You can see here that we have a hook for what we want to happen right before the animation starts enter, during the animation/transition enter-active, and when it finishes. We have these same hooks for when something is leaving, prepended with leave instead. We can make simple transitions that just interpolate between states, or we could plug a full CSS or JavaScript animation into them.
Usually in a Vue application, we would wrap a component or element in <transition> in order to use this slick little functionality, but Nuxt.js will provide this for us at the get-go. Our hook for the page will begin with, thankfully- page. All we have to do to create an animation between pages is add a bit of CSS that plugs into the hooks:
.page-enter-active, .page-leave-active {
transition: all .25s ease-out;
}
.page-enter, .page-leave-active {
opacity: 0;
transform-origin: 50% 50%;
}
I'm also going to add an extra bit of styling here so that you can see the page transitions a little easier:
html, body {
font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
background: #222;
color: white;
width: 100vw;
height: 100vh;
}

a, a:visited {
color: #3edada;
text-decoration: none;
}

.container {
padding: 60px;
width: 100vw;
height: 100vh;
background: #444;
}

Right now we're using a CSS Transition. This only gives us the ability to designate what to do in the middle of two states. We could do something a little more interesting by having an animation adjust in a way that suggests where something is coming from and going to. For that to happen, we could separate out transitions for page-enter and page-leave-active classes, but it's a little more DRY to use a CSS animation and specify where things are coming from and going to, and plug into each for .page-enter-active, and .page-leave-active:
.page-enter-active {
animation: acrossIn .45s ease-out both;
}

.page-leave-active {
animation: acrossOut .65s ease-in both;
}

@keyframes acrossIn {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}

@keyframes acrossOut {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(100%, 0, 0);
}
}
Let's also add a little bit of special styling to the product page so we can see the difference between these two pages:
<style scoped>
.container {
background: #222;
}
</style>
This scoped tag is pretty cool because it will apply the styles for this page/vue file only. If you have heard of CSS Modules, you'll be familiar with this concept.
We would see this (this page is for demo purposes only, that's probably too much movement for a typical page transition):
[youtube https://www.youtube.com/watch?v=uFU_GqeZ5sw&w=560&h=315]
Now, let's say we have a page with a totally different interaction. For this page, the movement up and down was too much, we just want a simple fade. For this case, we'd need to rename our transition hook to separate it out.
Let’s create another page, we’ll call it the contact page and create it in the pages directory.
<template>
<div class="container">
<h1>This is the contact page</h1>
<p><nuxt-link to="/">Home page</nuxt-link></p>
</div>
</template>

<script>
export default {
transition: 'fadeOpacity'
}
</script>

<style>
.fadeOpacity-enter-active, .fadeOpacity-leave-active {
transition: opacity .35s ease-out;
}

.fadeOpacity-enter, .fadeOpacity-leave-active {
opacity: 0;
}
</style>
Now we can have two-page transitions:
[youtube https://www.youtube.com/watch?v=jGUiAl4ov3M&w=560&h=315]
You can see how we could build on these further and create more and more streamlined CSS animations per page. But from here let's dive into my favorite, JavaScript animations, and create page transitions with a bit more horsepower.
Javascript Hooks
Vue's <transition> component offers some hooks to use JavaScript animation in place of CSS as well. They are as follows, and each hook is optional. The :css="false" binding lets Vue know we're going to use JS for this animation:
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@enter-cancelled="enterCancelled"

@before-Leave="beforeLeave"
@leave="leave"
@after-leave="afterLeave"
@leave-cancelled="leaveCancelled"
:css="false">

</transition>
The other thing we have available to us are transition modes. I'm a big fan of these, as you can state that one animation will wait for the other animation to finish transitioning out before transitioning in. The transition mode we will work with will be called out-in.
We can do something really wild with JavaScript and the transition mode, again, we're going a little nuts here for the purposes of demo, we would usually do something much more subtle:
[youtube https://www.youtube.com/watch?v=8t1PdiziI_U&w=560&h=315]
In order to do something like this, I've run yarn add gsap because I'm using GreenSock for this animation. In my index.vue page, I can remove the existing CSS animation and add this into the <script> tags:
import { TweenMax, Back } from 'gsap'

export default {
transition: {
mode: 'out-in',
css: false,
beforeEnter (el) {
TweenMax.set(el, {
transformPerspective: 600,
perspective: 300,
transformStyle: 'preserve-3d'
})
},
enter (el, done) {
TweenMax.to(el, 1, {
rotationY: 360,
transformOrigin: '50% 50%',
ease: Back.easeOut
})
done()
},
leave (el, done) {
TweenMax.to(el, 1, {
rotationY: 0,
transformOrigin: '50% 50%',
ease: Back.easeIn
})
done()
}
}
}
All of the code for these demos exist in my Intro to Vue repo for starter materials if you're getting ramped up learning Vue.
One thing I want to call out here is that currently there is a bug for transition modes in Nuxt.js. This bug is fixed, but the release hasn't come out yet. It should be all fixed and up to date in the upcoming 1.0 release, but in the meantime, here is a working simple sample demo, and the issue to track.
With this working code and those JavaScript hooks we can start to get much fancier and create unique effects, with different transitions on every page:
[youtube https://www.youtube.com/watch?v=m0SPGT3Vai8?rel=0&w=560&h=315]
Here's the site that the demo was deployed to if you'd like to see it live: https://nuxt-type.now.sh/ as well as the repo that houses the code for it: https://github.com/sdras/nuxt-type
Navigation
In that last demo you might have noticed we had a common navigation across all of the pages what we routed. In order to create this, we can go into the `layouts` directory, and we'll see a file called `default.vue`. This directory will house the base layouts for all of our pages, "default" being the, uhm, default :)
Right away you'll see this:
<template>
<div>
<nuxt/>
</div>
</template>
That special <nuxt/> tag will be where our `.vue` pages files will be inserted, so in order to create a navigation, we could insert a navigation component like this:
<template>
<div>
<img class="moon" src="~assets/FullMoon2010.png" />
<Navigation />
<nuxt/>
</div>
</template>

<script>
import Navigation from '~components/Navigation.vue'

export default {
components: {
Navigation
}
}
</script>
I love this because everything is kept nice and organized between our global and local needs.
I then have a component called Navigation in a directory I've called `components` (this is pretty standard fare for a Vue app). In this file, you'll see a bunch of links to the different pages:
<nav>
<div class="title">
<nuxt-link to="/rufina">Rufina</nuxt-link>
<nuxt-link to="/prata">Prata</nuxt-link>
<nuxt-link exact to="/">Playfair</nuxt-link>
</div>
</nav>
You'll notice I'm using that <nuxt-link> tag again even though it's in another directory, and the routing will still work. But that last page has one extra attribute, the exact attribute: <nuxt-link exact to="/">Playfair</nuxt-link> This is because there are many routes that match just the / directory, all of them do, in fact. So if we specify exact, Nuxt will know that we only mean the index page in particular.
Further Resources
If you'd like more information about Nuxt, their documentation is pretty sweet and has a lot of examples to get you going. If you'd like to learn more about Vue, I've just made a course on Frontend Masters and all of the materials are open source here, or you can check out our Guide to Vue, or you can go to the docs which are extremely well-written. Happy coding!

Simple Server Side Rendering, Routing, and Page Transitions with Nuxt.js is a post from CSS-Tricks
Source: CssTricks


Align SVG Icons to Text and Say Goodbye to Font Icons

Elliot Dahl:
At Pivotal we've created an SVG icon system with React for use on our suite of products. This article is about my approach to styling the SVG icon system with CSS to make it easy and effective to use.
Alignment and icons (of any sort) will probably always be a bit tricky. It depends on two things that will be different on every site: the font and the icons. Elliot was able to get perfect alignment with Arial by pulling the icons down with bottom: -0.125em; because Arial sites right along the baseline and the icons themselves were designed with a 12.5% ring of white space around the edges. It's a fairly common practice to design SVG icons with space along the edges (as annoying as it might be for alignment) because without the space, you might get awkward clipping on the edges with certain browsers/resolutions/zooming/etc (sorry I don't have more detail handy).
Direct Link to Article — Permalink
Align SVG Icons to Text and Say Goodbye to Font Icons is a post from CSS-Tricks
Source: CssTricks


We Don't Serve Your Type Here: A History of Fonts on the Web - Part 1

Back in 1994, websites looked a lot different. Those of you who spent time on the web during that year probably have a good idea of what I'm talking about. If you didn't spend time on the web that year, or if you weren’t even born yet, allow me to paint you a brief picture:Read more