A Developer‘s Guide to Web Design for Non-Designers

As a developer, you may think that design is best left to the "creative types". But in reality, having an eye for design and understanding key principles is an extremely valuable skill for any programmer. Whether you‘re building your own apps, working on a team, or trying to communicate with stakeholders, being able to create simple yet effective designs will make you a stronger developer.

The good news is that design is not some innate talent that you either have or you don‘t. Just like programming, design is a skill that can be learned with the right tools, techniques and plenty of practice. In this guide, I‘ll share some of the core concepts that I‘ve learned in my journey as a developer learning design.

Choosing the Right Tools

One of the first decisions you‘ll make is what design tools to use. Just like in the world of IDEs for coding, there are several popular options to choose from:

• Sketch: The go-to choice for many web designers, but MacOS only. Comparable to React in its popularity on job descriptions. One year license costs $99.
• Adobe XD: A newer offering from Adobe, but gaining traction fast due to its ease-of-use and being cross-platform. Has a free starter plan. Similar to Vue in its rising adoption.
• Photoshop: The old powerhouse, but often overkill for web design. Subscription starts at $9.99/month. The jQuery of the design world that won‘t go away.
• Figma: A web-based tool that‘s great for collaboration. Free for individuals. Growing quickly like Angular.

Ultimately, the specific tool you use is less important than your core design skills. Most design software operate on similar principles. So pick one that fits your workflow (and budget) and don‘t get hung up on the "best" option.

Personally, I gravitated towards Adobe XD because I liked that it‘s cross-platform, backed by a big company, and has a generous free tier. But there are plenty of great designers who live by the other tools. The most important thing is to pick one and start creating.

Thinking Like a Designer

Coming from a coding background, one of the hardest parts of learning design was the ambiguity. With code, I was used to a logical flow, consistent rules, and explicit feedback when I messed up. My first designs looked like I wrote them in a text editor – boxy and rigid.

But design requires a different mindset. You have to be comfortable with experimentation, subjectivity, and going with your intuition. Some key things that helped me adjust my approach:

• Embrace the chaos: Design tools will feel messy compared to your perfect code. That‘s ok. The ability to move things around freely is what gives you flexibility to experiment.

• Design is an iterative process: Don‘t expect to get it right the first time. Recognize that you‘ll go through many small tweaks and changes before arriving at something you‘re happy with.

• Feedback is subjective: With code, you have errors and acceptance criteria. With design, you have opinions. Learning to parse input and make judgment calls is part of the job.

• Imitation before innovation: When you‘re learning, it‘s totally acceptable to recreate designs you like to understand how they work. Once you master the basics, then you can get creative.

Essentially, try to let go of your developer instincts and embrace the fluidity that comes with design. It can be frustrating at first, but also liberating once you get the hang of it.

Mastering the Basics

To start translating your ideas into actual designs, you‘ll need to get comfortable with the basic building blocks that make up most design tools. Luckily, if you can handle <div> and <span>, you can master this part quickly.

• Rectangles: The <div> of the design world. Use them for backgrounds, buttons, cards, inputs, and containers.
• Text: The main way you‘ll add copy to your designs. The text tools usually have two modes – point text (for short titles) and area text (for paragraphs).
• Lines: Perfect for dividers, underlines, and visual separators. Easy to forget, but an easy way to make your designs look more polished.
• Colors: Playing with colors is half the fun of designing. Use the color picker to sample from other parts of your design to keep a consistent palette.

Of course, there are many more advanced tools, but these are the core components you‘ll use in 90%+ of your work. Once you understand how to manipulate each one, you can focus on making them look good together.

Putting it Into Practice

Now that you have your tools ready, it‘s time to start designing. As you‘re getting started, here are a few practical tips I‘ve found helpful.

Layout and Spacing

One of the easiest ways to make your designs look more professional is to pay attention to your layout and spacing. A few key things to keep in mind:

• Alignment: Nothing should feel out of place. Align text, buttons and other elements in consistent rows and columns.
• White space: Don‘t be afraid to leave some gaps in your design. Cramming too much together will make it feel busy and hard to read. White space helps create visual balance.
• Visual hierarchy: Use sizes, colors and layout to communicate what information is most important. Don‘t make everything the same size or viewers won‘t know where to look first.

If something in your design feels "off", taking a second look at the layout and spacing is usually a good place to start your fixes.

Colors and Contrast

Choosing a color palette is an intimidating part of design for many developers. There‘s a whole science to color theory, but here are a few simple tricks to get you started:

• Stick to a few core colors: Most designs really only need 2-3 main colors (plus black, white and grey). Resist the urge to jazz things up with a rainbow.
• Use different shades: Instead of choosing lots of different colors, try playing with lighter and darker shades (or opacity) of the same hue to add visual depth.
• Limit pure black: Lighten your blacks a bit for a softer, less stark look. Same goes for pure white – try an off-white or light grey for backgrounds.
• When in doubt, go monochrome: You really can‘t go wrong with a monochrome color scheme – various shades of blue or green for example. It‘s an easy way to look classy and consistent.

As you‘re experimenting with colors, pay attention to contrast. Make sure important elements don‘t get lost because they are too similar to the background. When it comes to text, use a color contrast checker to make sure it‘s readable.

Fonts and Typography

Choosing great fonts is one of the easiest ways to make your designs stand out. While there are thousands of great free and paid fonts out there, here are a few simple guidelines:

• Prioritize legibility: Avoid overly stylized or decorative fonts for body text. Stick to simple, easy-to-read typefaces for most of your content.
• Create a hierarchy: Use variations in size, weight and spacing to distinguish headers from body content. Don‘t be afraid to go big and bold for titles.
• Limit your fonts: Using too many different fonts will make your design feel disjointed. Stick to 2-3 max. Find fonts that pair well together for a cohesive look.
• Play with spacing: Sometimes small tweaks to line height or letter spacing can make a big difference, especially for headlines. Don‘t be afraid to add some extra room to breathe.

With typography, the overall effect is more important than any one element. Experiment with different combinations until you land on something that matches the vibe you‘re going for.

Leveling Up Your Designs

Once you‘re comfortable with the core components of design, you can start to explore more advanced concepts and patterns. Here are a few next steps.

Designing Landing Pages

Landing pages are all about making a great first impression and convincing visitors to take action. Some tips to keep in mind:

• Keep it simple: Don‘t overwhelm people with too much information right away. Focus on a key message and make it easy to scan.
• Prioritize benefits over features: Instead of listing technical details, focus on how your product or service will improve people‘s lives. Sell an aspiration.
• Use social proof: Testimonials, client logos and stats help build trust and credibility. Don‘t be shy about the positive feedback you‘ve gotten.
• Create a visual flow: Use colors, shapes and directional cues to lead people‘s eyes through the page towards your call-to-action. The layout should tell a story.

The key with landing pages is to find the right balance of being informative and persuasive without being overcrowded or aggressive. When in doubt, keep tweaking and testing.

Designing Web Apps

Designing web apps and dashboards requires a slightly different approach than landing pages. The focus is more on usability, organization and helping users complete tasks. A few things to consider:

• Simplify the UI: Resist the temptation to expose every setting and option right away. Progressively reveal complexity so new users aren‘t overwhelmed.
• Organize content logically: Group similar functions together and use clear labels. Users should be able to find what they need without hunting around.
• Provide feedback: Make sure actions like saving or deleting are clearly communicated. Don‘t leave people wondering if their changes took effect.
• Design for different states: Consider how each screen looks when data is loading, missing, or in an error state. Don‘t just design the ideal scenario.

Ultimately, good web app design is about empowering users to be efficient and successful. Always be thinking about how to streamline workflows and communicate status.

Practice Makes Progress

The best way to get better at web design is simply to practice. Regularly challenge yourself to recreate UIs you like or design new ones from scratch. Over time, you‘ll develop an intuitive sense for what works and what doesn‘t.

It also helps to learn from others. Follow designers on Dribbble or Behance to see how they approach problems. Analyze the designs of your favorite sites and apps to understand their patterns. Don‘t be afraid to inspect their code or try to recreate them yourself as an exercise.

Remember, even the best designers were once beginners. Don‘t get discouraged if your first attempts feel clumsy or fall short of your vision. Keep practicing and refining your skills. With time and persistence, you‘ll be able to bring your creative ideas to life.

Conclusion

Web design is a valuable skill for any developer to cultivate. Not only will it help you build better products, it will also make you a stronger communicator and collaborator.

Don‘t be intimidated by the artistic aspects of design. Focus on the basics like layout, color, and typography. Develop an iterative approach and seek out inspiration from others. Most importantly, keep practicing and refining your skills.

Remember, you don‘t need to become a world-class designer to be a successful developer. But by learning the core principles of web design, you‘ll be able to create more polished, professional, and engaging experiences for your users. And that‘s a worthy goal for any programmer.

Hungry for more? Check out my free Adobe XD landing page template to start practicing your new design chops. Happy designing!