TechTech News Afrika

Building A Design-y Sense; Design tips for developers

Story Highlights

  • Building a design-y sense
  • Creating a logo
  • Images and Illustrations
  • Branding

Most developers aren’t well-known for their design skills. Usually their projects are technically brilliant – fast, well tested, and well maintained but without a loveable interface. Poor design/UX in open source projects is the primary reason they aren’t more successful.

Design is about doing less rather than doing more. I don’t advocate over-design, and I recommend erring on the side of simplicity. This blog post will only elaborate this point.

Building a design-y sense

This step isn’t necessary but it’s the thing that gave me the most improvement for the least effort. It will improve your “design sense”, and give you an idea of your personal design style. The steps are:

  1. Visit Dribbble (I have no affiliation) and sign up for their weekly newsletter
  2. When you receive the weekly newsletter, click the “Most Popular Shots” link
  3. Browse through the first page of the most popular shots for that week
  4. “Favourite” any that you like

This takes about 5 minutes each week. After a few weeks you can go back and look at your favourites. You’ll likely find a theme in your favourites – perhaps the same color, or you like angles, etc.

You’ll also notice the up-and-coming trends. In the past it was soft shadows and sharp angles. The current trend is illustrations of people. Start feeding these trends into your projects. Even if you aren’t a big fan of them, it’s good to remember that design is effective when it appeals to your target audience and not yourself.

.

 it’s good to remember that design is effective when it appeals to your target audience and not yourself.
Anonymous

Logos are a great place to start since the logo design carries over to your software/site. Logos vary for different mediums (print, digital, etc),

Doing the best at this moment puts you in the best place for the next moment! Oprah Winfrey

but since you’re reading I’ll assume you’re a developer, and so your logo will be used on a website, on an app, or in software.

If this describes your use-case it means your logo should consist of two parts, and should follow a few basic patterns. You should start with:

  1. An icon
  2. Logo text/name

 

Designing an Icon

Here are some useful guidelines:

  • Square
    Make sure it fits evenly into a square. This is important because it will be in a favicon or possibly an app icon.
  • Symetrical
    By symetrical, I mean that it should take up an even amount of space within the square. Logos can look a bit awkward when they are squashed to one side or if there is lots of space in one area of the square.
  • Simple
    This is by far the most important rule. There is no such thing as an icon which is too simple. Make sure it is legible when scaled down to 32×32 px. This is how it will look in the tab of a browser. Also keep the colors simple – you can use color, but it’s best if you stick with just one.

Designing the logo text/name

You have a bit more freedom with this one. I would recommend, however, that you make this just a simple color – for example, black or dark grey. Let the icon carry the logo, and let font that you choose for the text set the brand. Whichever font you choose for the text, you should (probably) use it in all the headings of your site/app/software.

Images and Illustrations

Images and illustrations largely serve the purpose of filling space and emphasizing your message. Which one you choose is a matter of preference, but try not to mix the two.

Illustrations

Illustrations can really bring a website/app to life. They are less important in software (in fact they would probably look stupid in most software) but work well on landing pages. However illustrations are the hardest to nail, because they are hard quite bespoke which makes it difficult to have a consistent look across all of them.

Try to create your site first without illustrations (I doubt this will be a problem for most readers), then as a final step add a few illustrations if you have gaps to fill. There are some really great resources starting to pop up which have some free, lightweight illustrations to try. These are:

Images

Images are much easier than illustrations because the quantity of stock photos is so much larger than stock illustrations, and if you want to move the designs in-house in the future then it’s far easier to find a competent photographer than a competent illustrator.

 

Once again, images are far more effective on websites than software (which probably goes without saying, but I’m staying it anyway).

It can be difficult to make images feel “part” of the site – quite often they just seem like they are floating in place. It just takes some small things to mitigate this. For example, you can make your images stretch full-width. Or if your site uses lots of rounded corners, add rounded corners to your floating images. If your site uses drop-shadows, add them to your images.

Adding text onto images is a little bit risky since it can make the text hard to read. If you are going to do this, add a very subtle drop shadow to the text. Alternatively you can consider adding an overlay between the text and the image.

The best sites I use for images are:

Great things in business are never done by one person. They’re done by a team of people. Steve Jobs

Branding

Consistency is the only thing you need to remember here. For a product to feel cohesive, it must be consistent. Some guidelines are:

  • Choose one color and use it everywhere. For everything else use black or dark grey.
  • Choose one font and use it everywhere
  • Text sizes should always be the same (with the exception of headers). Don’t make one paragraph 12px and another 14px
  • Use consistent padding
  • Make things line up. When we see things for the first time, it’s easier to make sense of fewer “blocks” of things. We can achieve this by grouping things together and aligning them.

Don’t fall into the trap of “redesigning sections”. When you start designing it feels like every part of your site should look slightly different. In fact the opposite is true. Try to use the same layouts everywhere. When a person sees a something for the first time their brain has to make sense of everything they are seeing. There is a cognitive load while they determine what is the important information, and this is mentally an uncomfortable process. If you can reuse the same layouts throughout your site then your users’ cognitive load is lessened, and they only have to feel uncomfortable once.

Using a CSS framework

If you’re building a website, I highly recommend keeping your CSS framework and JS framework separate. Wherever possible avoid using “locked in” frameworks like ReactStrap, and instead opt for “class based” CSS frameworks. Once you become comfortable with this then your designs can be implemented anywhere – whether you use HTML, React, Vue, or whatever latest and greatest framework you decide to use.

I would also recommend sticking with a “utility-first” CSS framework. Take your pick of either Bulma or Tailwind and invest a day into learning how they work. This day will pay off in spades – prototyping with either of these is quicker than designing then implementing from scratch. Avoid ever using the style tag. Just use classes for everything from layout to look and feel.

Design tools

Figma. That’s all you really need. Forget about Sketch and Invision. Figma has vector design capabilities, clickable prototypes, commenting, and it’s collaborative. And it’s free(mium)! Invest a little bit of time into using it – video tutorials are quite helpful here – and then live inside it for anything that you need to do for design and editing.

I’m really a fan-boy of Figma, but for good reason. I’ve tried a lot of other tools in the past and none are as good (and holistic). If you’re working with photos then you may also need Photoshop but as a developer the types of things that you need to do with photos are usually just compressing and resizing, which can be better achieved with an asset pipeline.

Tags
Show More

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Close