Using Trello For Your Projects

What tools do you use to manage your projects? Do you track them using lists, a bullet journal or a project management tool like Trello? With Trello, you can create a meal planner, a weekly to-do list, manage clients and development projects. You create as many board, cards and lists as you need.

Using Trello For Your Projects
Photo Credit by RawPixel

With all of this flexibility, it can be a challenge to figure out how to best work with Trello. Use the following tips to make this project management tool work for both your personal and professional projects.

1. Create a projects board

If you are like most people, you may have more than one project to keep track of. A projects board can help you to plan which projects that you want to work on next. Some people like to plan the next six months or year out. Use this board to provide on overview of what you are working on.

2. Make one board for each project

It may be tempting to place all projects on one board. You may find that it grows rather quickly and becomes hard to manage. A single board for each project keeps things simpler and cleaner.

3. Create as many lists as you need

Trello is based on the Kanban method, which starts with three lists: To-Do, Doing and Done. For some projects, these three lists are all you need. For other project, you are going to need more. Make as many as you need.

4. Give your labels meaningful names

Trello provides different colored labels with no names. It is up to you to decide what they mean. You can use these labels to help manage your tasks. For example, you may use red for Stopped or Blocked tasks, yellow for waiting and orange for annoying issues.

5.Use the inspiration boards

Why create a board from scratch? Trello has a public library of boards that others have created and are available for you to use. Use one these boards to get started on your next project.

Looking for more tips and inspiration on how to use Trello?

Trello’s blog has helpful tips and tutorials on using this project management tool more productively and creatively.

3 Dashboard Design Tips

Dashboard design sounds simple. You want to create a way of presenting data to your users that is clean and easy to understand. Easy right?

3 Dashboard Design Tips
Photo by rawpixel.com from Pexels

No, dashboard design is more difficult than it seems. You need to consider your users before you can decide what data to present to them and how.

Ask these questions before you start building

  1. What data needs to be show to your users? You want to track a small number of key metrics. Not all data should be on a dashboard. Some data belongs in a report. If the data your considering is a summary or analysis, it may work better as a report.
  2. How am I going to present this data? You can choose to display the data as a chart, gauge, totals or a simple table.
  3. What actions do you want the user to take? Should they click on a link to open a report, update some information or do nothing?

Sketch out your design

After you researched and learned what data the user wants to see, you need to decide how to organize the data. You may find that you have too many pieces of information to present to the user. Sketch out your dashboard before you build it to determine what pieces of data go where. An easy to read dashboard has from 5-9 pieces of information on it. Remember that less is more.

Keep the design simple

You want your users to be able to scan the dashboard quickly. Help them by choosing to limit the number of pieces of information, colors, fonts and other UI elements. Your design should be minimal.

By asking questions before you build a dashboard, sketching out the design and keeping the design simple, you can give your users key pieces of information quickly.

More information on Designing With Data
Data Visualization Best Practices 2013

Ways to make screenshots of your code great

How do you take screenshots of your code? The simplest way is to use your screen capture application that comes with your OS. Then, you can improve it by using a graphics editor like GIMP.

Make Your Code Screenshot Look Great
Photo: Photo by Nicole De Khors from Burst

What if you want your code to look right without the extra work? You can capture your code using a extensions that work with your code editor.

Polacode

Polacode is a Visual Studio Code extension. You launch it by using the command palette and typing Polacode, It opens the Polacode window next to your code. You select and copy the code you want a screenshot of. Paste it into Polacode, click the camera button and it generates a screenshot for you. Then, you can use the screenshot for your blog, social media accounts or future reference.

Polacode Screenshot Example

If you don’t want to add an extension to your IDE, you can install software like Carbon to take screenshot. For more details on Carbon and Polacode check out Scotch’s 6 awesome tools for creating a screenshot of your code.

How do I make my screenshot great?

If you use Visual Studio Code, you can modify the settings to get a clean and easy to read screenshot. Andrew J. Byrnewalks you through the 6 settings he uses. If these tools don’t create the screenshot that you are looking for, you can also use 5 Ideas for making a screen shot great.

What if I want more than a screenshot?

Screenshots are great for static images of your code. What if you want to create a demo or screencast? Travis Fischer on Hacker Noon provides you with different tools for making your code look beautiful.

Getting Started with a Design System

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.

Getting Started with a Design System
Photo by Sarah Pflug from Burst

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.

Examples of Design Systems

How do I build my own design system?

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:

Prototype a website with CSS Grid

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?

Prototype a website with CSS Grid
Photo by Stefan Schweihofer

You could use a prototyping app or start building in the browser. Sometimes, it is simpler to start building in the browser. With HTML, CSS and JavaScript, you can build it quickly.

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.

How Do You Start?

With CSS Grid, you have three choices:

  • Start with a page layout example. With these experiments, you can learn how CSS Grid works without having to build all of the markup yourself. One of the examples uses the Skeleton Framework. I used this example to build a public domain book website with it.
  • CSS Grid Layout Builder, an app, you download to help you build your CSS Grid layout quickly.
  • 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.