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
Practice, research, learning and working with others can help you to build your UX skills. Not all projects that you do for clients or your company can help you learn new techniques. You have to make time to learn, practice and keep improving.
1. Work on improving your design skills
Practice drawing or sketching You don’t have to draw like an artist. Your sketches need to be good enough to get the idea down on paper. If you want to sketch better, consider taking an drawing class.
Work on Color Theory Study how color affects how people behavior and react to your designs. Use a color scheme generator for inspiration.
Experiment with design elements like white space, lines and animation These design elements can help make the user experience better by guiding your user to take the actions that you need them to do.
Try out new design tools Every year there are new tools for you to try. You don’t have to use them all. Experiment and play with a few that can help you create better user experiences.
2. Be inspired and Keep up with Design Trends and Techniques
You can find inspiration for design everywhere. Look online, read magazines, books and art. Read design articles daily.
3. Create Throwaway or Projects for Yourself
When you work for a client or company, you don’t always have time to experiment with new ideas or new techniques. A personal or throwaway project, a project that won’t be published, can give your the opportunity to learn new skills and create something new. In the Frontside podcast, they talk about building useless stuff. Or throwaway projects that you build which combats burnout and lets you test new ideas.
Can’t think of a small side project to work on? You can do copywork. Painters learned how to paint from the masters by copying their work. You can do the same with a website or a UI. Eric Kennedy explains how to improve your design skills with copywork.
4. Focus on the essentials
Focus on the big idea. Don’t get stuck on the details.
Don’t rely on research.
Keep it simple as possible.
Start with your content.
Don’t add things because you think their are fun or interesting.
5. Meet in person with UX Designers
Go to meetups, conferences or have coffee with other designers. Take time to meet with a mentor in person. By meeting in person, you can trade tips and techniques and help each other with current problems that you are working on.
How do you do all of this? As a developer or designer, you need to plan on continuing to add new techniques and skills. Plan to add time to your schedule so you can read design articles, apply what have learned and meet with others to share your new techniques.