Level Up Your Frontend Design Skills
Hello, world!
A few weeks ago, I submitted my first full stack project, and while I still have a few things I want to tweak before I add it to my portfolio, I can honestly say I’m very proud of the work I put in to get the app working! This was my first time working on both front and back ends of an app, so it was really exciting to see the skills I’ve been working on manifest into a (functioning!) application.
During the project presentation and review, a few of my peers had questions about how I managed to design the front-end in just a week, so I thought I would share some of the magic tricks I’ve learned while dabbling with CSS.
Below, I’ll share some of my favorite websites and go-to tricks for cleaning up the front end and adding a little visual flair in a time crunch.
Wire-framing
Wire-framing is an important skill to master when working on front-end development because you can quickly reference the wireframe to understand how a page should look, what elements you’ll need to build with html, and how you should edit them with CSS. The nice thing about wire-framing is it’s a generally quick process considering the amount of drag-and-drop apps available specifically for this purpose.
While it’s common practice to start off with a drawing, then work up to more and more complex mockups, when I’m in a time crunch, I like to start with a middle-ground complexity mockup (one that involves colors, general border-radiuses, and some copy). My go-to for wire-framing in a hurry is LucidSpark.
LucidSpark is a collaborative whiteboard app where you can access different shapes, text, and free logos and images to create a variety of projects, but I like to use it mostly for brainstorming and wire-framing. The best part is, similar to GoogleDocs, you can share your documents with your coworkers, and you can work on the document simultaneously. There are options to share documents as links or export them to PDFs, JPEGs, etc.
Here are some examples of wireframes I made in 30 minutes or less using LucidSpark:
Color Palette
After I have a wireframe in place, I’ll move onto getting an idea for how I want to style the website. I generally start by picking the website’s colors, then its fonts. I like to take the time to do this to ensure the design is cohesive and to establish a uniform brand across the app’s multiple pages.
To pick the colors for my app, I go to Coolors.co. Coolors is an online color palette generator, where you can pick from a variety of pre-made palettes or make your own. I created an account to save my favorite palettes from the projects I’ve worked on, but you don’t need to do that to get started.
A good rule of thumb when creating a custom palette is to choose 6 colors that include:
- 1 light color (usually used for backgrounds)
- 1 dark color (for text)
- 2 contrasting colors for content/accents
- a variation on each of the 2 contrasting colors to provide variety
For my light color, I generally choose white or a slightly off-white, and for the dark color, I’ll go for a slightly off-black. I’ve noticed that using true black creates a harshness to an app’s overall look (probably because true black isn’t a color found in nature, but I’d consult someone more well-versed in color theory for that).
Here are a few examples of color palettes I created following that system on Coolors:
Fonts
After I have my color palette settled, I will go to Google Fonts to pick out a few unique fonts for my app. Similar to colors, it’s important to use the same fonts throughout an app to ensure the design is cohesive and feels professional and branded.
I love Google Fonts because you can filter by the style of font you’re looking for (serif, sans-serif, cursive, handwriting), and they have a huge variety of fonts to choose from. Once you have your fonts picked out, Google Fonts provides a unique import code that you can add to your HTML page’s metadata, and the website even shows you how to write out the fonts in CSS.
As I mentioned before, Google Fonts provides A LOT of options for fonts. If you’re new to typography or feeling overwhelmed by your choices, a nice resource I found is Font Pair. Font Pair is pretty much what it says on the tin: a collection of fonts that pair well together. Pick a set you like, find them on Google Fonts with the search tool, and bam! You have your fonts!
Unique Visuals
At this point, you could start coding your website, and odds are, it’ll look pretty good, BUT you may have noticed each of my wireframes requires a logo and a few other pieces of art.
Sure, you can go on Google Images, but then you have to worry about copywrite law if you ever want to publish your site. A good alternative is Unsplash (all their images are stock photos, free for personal use and website design), but then you’re limited to the colors/styles available, and don’t get me started on trying to find images with transparent backgrounds…
This is why I generally stick to Canva. Canva lets you search for “elements” matching the brand for your app, and a lot of available elements in the “graphics” tab have customizable colors. If you pay for the PRO subscription, there are also options to save your image as an SVG or PNG with a transparent background.
Here’s a quick tutorial of how I made a graphic for my last project using Canva:
Simple CSS Magic
Now you’re all set to code your project! Here are a few CSS tips I have to help add a little oomph to your project:
Use Pseudo Classes
Psuedo classes like :hover and :focus are a great way to add a little visual flair to your site without having to worry about CSS transitions. They provide options like changing the background/border/opacity of a link/button/section of a page when its clicked on or hovered over. This simple trick adds a fun flair to your app and also improves the user experience so they can see that the app is responding to them using it.
Here’s an article that goes further in-depth on how to use CSS Pseudo Classes: https://www.w3schools.com/css/css_pseudo_classes.asp
Flexbox
Flexbox has saved me so many headaches as far as laying out my site. Before I learned Flexbox, I relied on the float property and absolute/relative positioning, and it would take HOURS to get a single element settled where I wanted it. Now that I’ve learned flexbox, I can easily instruct elements on a page to format into rows or columns, limit the amount of elements per row, and even space elements evenly on the web page.
I can’t emphasize enough how much learning flexbox has been a game changer as far as designing and organizing my websites.
Here’s a link on how to get started using flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS Tricks
If there’s ever something specific you want to try using CSS but you can’t figure out how to do it, I highly recommend CSS Tricks. Their website has saved me so many times and taught me everything from flexbox to transitions to how to make sure a background image sticks to the bottom center of the page.
And there you have it! If you have any questions, you can reach out to me here or on Twitter. Happy Coding! :)
Resources:
- LucidSpark: lucidspark.com
- Coolors: coolors.co
- Google Fonts: fonts.google.com
- Font Pair: fontpair.co
- Unsplash: unsplash.com
- Canva: canva.com
- CSS Tricks: css-tricks.com
