DEV Community

Cover image for How to build a product without much design background
Tom Holloway πŸ•
Tom Holloway πŸ•

Posted on • Updated on

How to build a product without much design background

I've been thinking for a while now that one of the sort of limiting factors in development is being able to have some design assets just on the ready. Lucky for us, there are many resources out there already that you can take advantage of to build off of. I have some designer friends that might cringe at using these tools over their own work, but sometimes you just need to get something out the door now. Note, I am not sponsored by any of these services. I've bought some of them definitely and had good experiences.

Name Generation

https://namelix.com/

I've used namelix to create a combination of varying names when I can't figure out what I want to call a project idea. It's helpful because naming happens to be one of the second hardest things in software development: next to caching :P

Logo Generation

Once you've create a name, you can hop over to https://brandmark.io/ to try out some design ideas. They offer some great packages for full design assets and they even offer a full service enterprise package so they can design your brand for you. It's great to get something right off the bat that looks good and follows common design principles. Far better than trying to do it yourself if you don't have much time or background in aesthetics.

Icons

Visual elements tend to work in layers of complexity. You can pair text with an image to help create additional ways for the user to draw their attention to an action. The image needs to represent what the action does, this isn't always the case but it should be close enough to convey some information. From that I would recommend checking out https://fontawesome.com/ The library is quite large and covers a range of ready to use icons for just about everything you might need in a standard every-day web application. For things that it doesn't cover I would suggest looking at https://shape.so/.

Animations/Illustrations

If you are looking to build any kind of landing page, you may have noticed that lots of landing pages have movement and illustrations. Movement creates a sense of engagement and illustrations may help create some depth to an otherwise bland/static page. You will want to balance between demonstrating what your product solves through text/lists with illustrations and content that give some kind of emotional connection to the page. It sounds a bit vague, but the artistic direction you put into your application helps demonstrate that you are confident about the kind of audience you are trying to capture. We are humans, so some level of art and emotion is nice to have. That being said, I would check out https://lottiefiles.com/ for a range of illustrations and animations to check out. You might also find plenty of https://codepen.io/ for common things like waves and pattern generators.

Typography

Assuming you want your users to read and the content to actually be legible, you'll want to figure out what kind of typography you want. Fonts aren't necessarily the only thing you will consider when it comes to typography. Choices like whitespace balance, layout, call to actions, contrast, and accessibility are all things to consider for typography. Nevertheless, check out https://archetypeapp.com/# as one choice to get started in this area.

Conclusion

While these are not the only things to consider for your project when it comes to design choices and assets; it's a good start to have something to generate content for you. There are loads of great templates out there to learn from and places to draw inspiration such as https://dribbble.com/. Be sure to give credit and support by actually buying the content when you are planning on using it. Hope this helps!

Top comments (5)

Collapse
 
andrewbaisden profile image
Andrew Baisden • Edited

Useful article this is probably the ultimate resource for design Design Resources for Developers

Collapse
 
nyxtom profile image
Tom Holloway πŸ•

Wow, great link!

Collapse
 
perpetual_education profile image
perpetual . education

Great ideas. We'd probably put those things in the opposite order. So many companies seem to start with a logo. We find that working with type and color / and feel - and in a loose style tiles way - helps keep people focused on the goals instead of the production art. We'd prototype things really early - and long before we chose any 'visual' design elements.

As far as visual design goes / we're fans of Hello Design World - even though it kinda plays in to the waterfall method that so many agencies fall into.

Collapse
 
nyxtom profile image
Tom Holloway πŸ•

Great tips!

Collapse
 
dmahely profile image
Doaa Mahely

The name generation service is really awesome πŸ’―
My biggest pain point is selecting fonts. I tried out Archetype but found it hard to use. TIL Google Fonts also shows you popular pairings with any font you select, but you gotta scroll to the bottom.