When your website is small, you can use design tools like sketches, sitemap and color schemes to create a consistent and cohesive look and feel. What happens as your team and website grows? How do you keep your website design and functionality from being a mess? You may start out by creating a design style guide or building a pattern library. Eventually, you’ll need something more. A tool like a design system.
What is a design system?
A Design System is a documented library of colors, fonts, buttons, components, visual elements and other design features that helps to create a consistent user experience. It is more than a style guide or a pattern library. A style guide focuses on the design or look and feel. Pattern libraries focus on building and providing a consistent code base. Your design system pulls both the style guide and pattern library into a single, documented system for your entire team to use.
Start with the tools that you know. You can build your own using a CMS that you are familiar with. To get started, you can look at Brad Frost’s Design System Boilerplate. You can use the boilerplate as a starting guide for building your own system. Next, review and document your visual elements, design features and other components that make your user experience unique.
When you build your own, start small and build as you go. Remember, the best solution is the one that you and your team uses. Refer to these tools and resources to learn more about how to build a design system:
When I build a prototype, I start with pen and paper. A paper prototype (blog Post) helps me to develop my ideas better. What if your drawings don’t get the ideas across to your team or client? What do you do then?
Building Your Prototype in a Browser
When you create your prototype in the browser, use the basic tools for building the web–HTML and CSS. HTML and CSS let your build and make changes to your prototype quickly. You and your designers can focus on designing and testing finicky UI components like tables and drop downs.
What if HTML and CSS isn’t enough to get you started quickly? You want to build a prototype not focus on the layout. A framework like Bootstrap or CSS Grid can help you get started quickly.
Why CSS Grid?
You can build your prototype using other frameworks like Bootstrap. CSS Grid gives you more flexibility, simpler markup and no 12 column limitation. When you use a framework like Bootstrap, it can look as though it was built using that framework. If you need more flexibility in your branding and design, then Bootstrap won’t work for you. CSS Grid gives you more creative control.
Build a CSS Grid website by creating the markup yourself. Grid By Example is a good resource for learning how to build what you need with CSS Grid.
CSS Grid is another tool that you can use to build prototypes quickly. Layout templates, grid builders and online examples all can help you to create your prototype quickly so you can focus on the user experience and not the tools to build it. When building a prototype, the best tools are the ones that you use.
You have different responsibilities: a job or business, family and yourself. These responsibilities can leave you with little time to spend on things that you are passionate about. Whether you choose to work on a side project or a hobby, how do you find the time?
Why schedule it? You may have different things that you want to accomplish including your side project. By scheduling it, you make it a priority. If it is on your schedule, you are more likely to do it and less likely to shove it aside for something else.
How much time to you give your project? Your other priorities like family time, hobbies and taking care of yourself will help you to determine how much time to devote to your project. Even if you have 15 minutes per day, you can get closer to finishing your project in small increments.
Use Planning Tools
Plans, goals, To-do lists, bullet journals or a chalkboard can help you keep your side projects on track. No matter what productivity tools that you decide on, they’ll help you on track.
Know When To Stop
Should you stop? A side project should be fun. You should learn something new and enjoy doing it. If your enjoyment is dwindling and you dread doing it, quit working on the project. You can always start something new.
Sometimes you may need a break. You take days off from work to relax or enjoy a holiday. If you need a break, take it. Your side project should not be another job that you create for yourself. It should be something that you want to do.
Finding time for side projects
Side projects should be something that you want to do. It should let you explore new ideas, be creative and find out if you have a passion for it. When you decide to work on a side project, you can be more successful by:
Adding time it to your schedule to work on your project
Use planning tools to help you track and complete your project
Know when to stop working on a project that no longer interests you
The best way to learn a new coding technique or design framework is to build something with it. I chose to build a website with CSS Grid. I wanted to take a book and make it a website. On Grid By Example, you can find a CSS Grid starter template that makes it simple to begin. The template has a simple two column layout: left-hand sidebar and right hand column for content. Plus, it uses an existing CSS Framework called Skeleton. I have used Skeleton to create WordPress themes.
Step up the new website with the CSS Grid Starter Template
Modify the sample page with content from the ebook
Create new CSS classes and modify existing ones to create the look I wanted
Test and modify the CSS for mobile
Choose a public domain book for this project
You can download a public domain book from Project Gutenberg. I picked I chose Black Amazon of Mars by Leigh Brackett because I wanted to build a science fiction themed site.
Getting Started with the CSS Grid Starter Template
When you first install the template, your website looks like this:
My next steps were to replace the template’s content with my own and start to add new CSS to start building a simple design. Then, I downloaded images from Pixabay.com for the website. I wanted a photo of Mars for the header and a better photo for one of the chapters. It had an illustration that didn’t go with the story. The final result looks like this.
Does it work on mobile?
CSS Grid is mobile-first. I had to make changes to the CSS for the additions that I added to the website. The CSS Grid part worked beautifully on mobile.
CSS Grid Starter template helped me to get started quickly. The template did most of the work. I didn’t have to figure out the layout from scratch. I spent most of my time creating the pages, adding the content and adding design elements to make the site look better. The starter template made my first attempt in building with CSS Grid simple and easy.
You create a beautiful website for your client. Then, you hand over the website to them. Sometime later, you get a desperate call from them because they did something that made it so the site either doesn’t display or looks horribly messed up and they need your help to fix it. What can you do to make certain that the site you build isn’t easy to break?
WordPress has different user roles. Use the different roles based on the clients needs. They don’t need to have full administrator access if they are going to be publishing blog posts and page updates.
No Account for adding posts
Use Gravity Forms to create a form for adding content to the website. You add this option for people who are creating content and don’t need access to the admin section. The website’s editor can approve and release content to be seen by your website visitors.
Hide options on the Admin Menu
Install the plugin Admin Menu Editor. It allows you to hide certain menu items from your clients. The less they have access, the less likely for them to make a mistake that damages the website.
Add the TinyMCE Advanced plugin to make editing simpler for your clients. The existing editor may have too many features and make it too easy to break the website. This plugin can help to create an editor that has only the features that they need.
Add Custom Widgets to the Dashboard
Create custom widgets to the dashboard that provide extra help for your clients. You may want to create a help section that provides step by step instructions on how to edit and update their website.
Brennan Bliss gives his tip in his talk at WordCamp Albuquerque 2018.
When you hand a website over to your client, you want them to be able to maintain it as smoothly as possible. You want to give them a site that is hard to break. By making adjustments to the admin dashboard, restricting the type of user roles they get and using custom widgets and plugins that change how the admin works can help both you and your client have a better experience with the WordPress site that you built.
Resources mentioned in WordCamp Albuquerque 2018 talk