What is your writing process? Whether you write a blog or technical documentation, you need to have a process. Not just a writing process, but a process for getting your work in a format that can be published on the web. My process is writing, converting to hypertext and publishing. It works, but it can be cumbersome adding the html code to my writing. What can I use instead? Markdown.
What is Markdown?
Markdown is a way to write for the web. It is text to html conversion tool. The goal was to make it as readable as possible without looking like it was marked up with a bunch of formatting code. This simple system was created by John Gruber.
When you write HTML, it can get very complicated looking with the tags and extra formating:
With Markdown, it looks much simpler:
Changing your writing process
Markdown is easy to learn. The syntax is very simple. In five minutes or so, you can start writing in Markdown. You can use either a text editor or an app for Markdown.
What if you don’t want to use a special app? You can install it in IDEs like Atom or Visual Studio. With an IDE like Atom, you can use the preview mode to see how it will look in a browser before you publish your writing.
Want to get started learning Markdown? Start with this Markdown tutorial. It goes through each concept one lesson at a time. You can also use this cheatsheet to look up how do write Markdown.
Developers like to build stuff. Apps, websites, apis or a quick little script that does something quickly and easily for you. A developer portfolio shows your best work. Whether it is a single page website or a full website with a blog, your portfolio shows your unique style and approach to solving problems.
Tips for building your portfolio
1. Start with a plan
Treat your portfolio like it is a project for a client or your employer. Plan it out. Think about what pages you want to create, what projects you are going to include and additional resources like screenshots you are going to need. Write your copy and sketch out your design. You don’t have to be a graphic designer to showcase your best work.
2. Consider what tools you use
You can build your portfolio with whatever tools you want. Whether you decide to build it from scratch or use an existing framework, don’t choose to use a framework or technology because you can. You want to make it easy for you to maintain.
3. Buy your own domain name
Why? With your own domain name, you control how it looks and what you can do with it. If you want to create new projects like an app or a tutorial website, you can. Your own domain name makes it easier for potential clients or employers to find you.
4. Make sure it works on mobile
You want your website to be readable and look good on as many platforms as possible. There are different ways to test your website for mobile from resizing your browser to testing on a mobile device. Choose the method that works best for you.
5. Choose your best work
Don’t show everything that you have built. Choose projects that demonstrate your current skills. If you develop mobile applications, don’t include projects from when you created websites for WordPress. Be picky. Show the pieces that reflect who you currently are.
See how other developers created their portfolios
When building your first one or updating an old one, it helps to see what other developers have done. Be inspired by other developers.
Brent Krueger is a freelance web designer and developer. He uses a beautiful photo of the state capitol building in Madison, WI in his website’s header.
Christina Richardson is a UX Researcher and Designer. She has a one page portfolio with a timeline of her career in UX and an infographic of her design process.
Jess Johnson is a full stack developer. He uses great typography and a simple color scheme.
Ali Spitel is a developer. Her website has a minimalist design with simple navigation and a great use of color.
Kyle Ledbetter is a designer and developer. He uses a mix of background colors and images for each section. In his About, he uses the states as subtle background images.
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?
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
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.
How am I going to present this data? You can choose to display the data as a chart, gauge, totals or a simple table.
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.
When you enter information into a form, it is easy to make mistakes. How do you help your users make less mistakes? You provide them with defaults. Defaults can help users to fill out a form quicker, make decisions easier and reduce errors.
When you build a form, you need to get different types of information. Some information like their name, address and email address need to be entered by the user. Other information like state, country, gender or some other information that requires a decision can use a default. A default is the most likely option that a user would choose.
For example, your user is going to buy a product. The default quantity is one. You set the quantity for them, so they don’t have to. It helps them to make the purchase quickly. You don’t want them to think to hard on how many they want.
Should you use a drop down list or something else?
It depends. If you have a short number of options, you can use a radio button list. The list makes it easy to scan your options and choose quickly.
For a longer list of options like State or Country, a radio button list would be too hard to read. It is better to put the options in a drop down list. Most mobile devices can handle the use of a drop down list on a form. If you aren’t certain which one works better for your form, you can ask these 9 questions to help you decide.
Should you choose an option in a drop down list?
When you can, fill drop down lists like state and country with user data. For drop down lists that require a decision by the user, you can leave the field blank. By leaving them blank, people scan for the empty or blank fields and fill them in. They rarely change fields with defaults in them.
Should you use placeholders in fields?
If you are designing a short form with a couple of fields like a login or sign up form, then the answer is yes. You can use placeholders instead of labels on these forms.
When you create longer forms like an event registration form, don’t use placeholders. Use clear label, error messages and defaults to help guide the user through the form.
When you build a form, you can use these techniques to help guide them through filling out a form. Defaults, radio button lists or other input fields, pre-selected drop down lists and placeholders in fields when necessary. By making decisions for users and guiding them through the data entry process of your form, you can help make filling out forms faster and easier.
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: