What is UX Writing? It is the practice of writing copy that is used in user interfaces to guide the user and help them figure how to use the website or app. You write your copy to ensure that everything matches the tone and style of your brand. Microcopy is the small pieces of copy that helps the user get stuff done. These little pieces are typically error messages, button text, helpful hints, notifications and more.
Why UX Writing?
It affects how the users interact with the UI. Good copy makes the user interface easier to learn and to use. It guides the user on what they need to do and doesn’t interrupt them. Bad copy ruins the experience for the user. It makes it harder for the user to learn and use the UI.
Tips for Good UX Writing
Have a conversation.Talk to your users. Avoid writing robot-like messages. Use words like “you”, “we” and “our”.
Keep it simple. Be brief and avoid complex technical jargon.
Don’t be too quirky. Trying to be fun and cool can backfire. Use it sparingly.
Test your copy on a variety of users. If they are having trouble understanding or using the UI, you need to change your interface or simplify the copy.
Copy is an integral part of your UI. The copy should guide the users and be unnoticeable. Good copy improves the usability and functionality of the UI. It helps a user to intuitively understand what they need to do. If you have to explain your UI, it isn’t done right.
You can learn CSS Grid with starter projects. They can help to build basic layouts. For most of your projects, you’ll need to build two, three and more column layouts. You can use starter projects to learn how to make these layouts.
Two Column Layout
Start building a two column layout. Two column layouts are quite common on the web. You’ll find them on most websites from blogs to startups.
Three Column Layout
After building a two column layout, you will want to be able to add more columns. Three columns is another common layout that you will need for your projects.
When learning a new layout technique, start small and build more complex layouts as you learn how to do it. By building with starter projects, you can see how you would use it in your real world applications. Not all of your projects will be simple. They may require more columns or additional features like a hero image or even a carousel. Build on your new skills by creating a production ready CSS Grid layout.
You are working on a new UI. It isn’t working out. Where do you find inspiration? How do you make it unique to your design?
You find inspiration from live websites, design collections and design inspiration articles. Use these tools to help you create unique and better UI.
Why Design Collections?
Design collections can are curated by other web designers and developers. They submit the designs that they are working on and are their best work. From these collections, you can see what others have done and apply new ideas to your designs.
Look at print magazines layout and graphic ideas. Find book covers with color schemes and fonts that you like. Analyze what elements you can use for your design.
3. Pick an element
You may like the fonts, color scheme or even photos used. Choose one of these elements and adapt it for your design.
Design is about solving problems. It is about learning what works and applying different elements to your design. You can find inspiration from a variety of places. Draw inspiration from the designs you like, don’t copy them exactly. Take what you need and adapt it to make your design unique. It should look like it belongs there naturally and not somewhere else.
How do you document your projects? Do you keep a programmer’s notebook? As you write code, you will have ideas, notes, code snippets and other things that you have learned. You’ll want to keep code that you didn’t use and save for later. By keeping a programmer’s notebook, you’ll create a personal reference that you can use for other projects and documenting your code for your users.
What tools do you use for writing documentaion?
You can use pen and paper to create a bullet journal or collect your notes and ideas. If you want to use an app, I have collected 4 tools that you can choose from.
Boostnote is a note taking app for programmers. You can take notes and collect code snippets. Boostnote is customizable and usable anywhere. You can write notes on your laptop and share with your mobile devices.
Quiver is a programmer’s notebook. You can mix code, text, Markdown in a note. You can install Quiver on your Mac and iOS devices.
Use Bear Writer to create notes and prose. You can organize your notes any way you can. This app is available on your Mac and iOS devices.
Write the Docs
Write the Docs is an open source community dedicated to creating wonderful documentation. They provide guides on writing great documentation, conferences and meetups. Write the Doc is build using the Sphinx static site generator.
Whether you use pen and paper or an app to document your projects, you’ll have a reference that can help you better understand the problems, solutions and things you have learned. Writing documentation for yourself or your users makes you a better programmer. If you want to write better documentation for yourself and your users, Mark has collected tools and resources for creating great documentation.
PlainJS is a collection of functions, plugins and code snippets. This resource is maintained by Pixabay.
Vanilla JS Toolkit