Ask HN: What to do as a back-end dev and with many app ideas but can't do UX?

49 points by humaninstrument ↗ HN
As a backend deveveloper, I often have many webapp ideas, but I can't do design/UX to save my life, so I never finish things because I get discouraged of how bad it looks in the beginning.

Does this happen to anyone else? This is so frustrating and discouraging. I often get unmotivated to finish things because of this issue. How do you guys deal with it?

I'm talking strictly about side/weekend projects.

58 comments

[ 2.9 ms ] story [ 120 ms ] thread
There are tens of thousands of designers who want to build things but can't write code. Find one and work together.
Try to use UI kits.
Maybe, 1. Get a side project partner/buddy. 2. Outsource to some freelancer. If you spend some bucks, u will get serious about it. 3. Learn basic design or use simple designing kit.

If the idea is good or useful, you will find some helping hands from the initial user base itself.

if you looking for low-cost full-time remote engineers or designers send your requirements to ajinvwilson@gmail.com

purchase a frontend from themeforest.com
Make the ugly one. Be encouraged by the functionality, rather than the form. There is nothing wrong with a prototype that solves a problem but needs a facelift.

If people are willing to use it, figure out how to improve the visual design -- delegate, sell it, design sabbatical, take some classes, whatever. This may require throwing some work away, but it's still a functioning thing.

Is there anyone in your network who would be interested in working on something together?

As someone mentioned, there are also plenty of great themes and templates that you can purchase to get things started. You'll need HTML/CSS skills of course but a lot of the design elements have already been completed.

Target your projects for people who don't care about how pretty an app is. Think HN, and Craigslist.
HN and craigslist have amazing UX and are very well designed.
I agree, but they're also extremely simple and easy to replicate.
> Think HN, and Craigslist.

This advice is true for the 90s. Not anymore. In 2017, people expect even your MVP Web App to be responsive, and at the very least not fugly.

Random advice from the internet:

+ If it solves a meaningful problem, a meaningful number of people will not care about the UX. That's why people can build tools lacking a polished UX for themselves...and their coworkers...and small business...and enterprise.

+ The tools for accurately solving complicated variable problems are often complicated themselves. A high end Nikon camera has billions of combinations of settings. The interface exposing that combinatorial complexity becomes manageable with a few years of relevant experience...that few years of experience is better than the alternatives for someone who is trying to solve the complex variable problems...and not better for someone who isn't and won't be.

+ Design is iterative. More iterative than agile TDD, because a new design suggests a new set of tests...the acceptance criteria keep moving.

+ If it really matters, hire a professional designer. Don't expect designers to work for free unless you are developing something that makes their life easier...like design software. Designers get lots of chances to work for free on things that benefit someone else.

Good luck.

Honestly, if design wireframes are giving you trouble, start with something like Adobe XD - it's not the most useful tool for functional apps but it'll at least help you block everything out and see how you'd like it to look and feel.
(comment deleted)
Honestly, just use Bootstrap. You're exactly the kind of person it's made for.
(comment deleted)
I would say that your best bet is to stick with an established front end library. Bootstrap[1] is the most well known, but there are others such as UI Kit (not to be confused with Apple's UIKit for iOS)[2].

If you'd like some additional advice, feel free to contact me (email should be in my profile).

[1] https://getbootstrap.com/

[2] https://getuikit.com/

Be aware that these still require you to have at least a basic understanding of CSS and HTML (the more you need to customize it, the more you'll need to know). Nothing crazy, but don't expect it to be a drag and drop designer.

For Bootstrap (UI Kit might be the same but I haven't used it) your best option is to look at their examples[1], find one you like, then view the source code from it. Use that as your starting page and go from there.

But like I said: any customizing, tweaking, etc will require you to know some HTML and CSS.

[1] https://getbootstrap.com/docs/4.0/examples/

True, but if you have an MVP idea... best bet is just build it --even if it's not perfect/beautiful... just launch.. get some validation for the concept, maybe some early subscribers, and then hire an ui/designer to clean things up a bit.
Yeah, but mostly you just need to apply their CSS styles.
"But like I said: any customizing, tweaking, etc will require you to know some HTML and CSS."

That's the easy part. Knowing what you want it to look like, that's the hard part.

And rather than having to write the Bootstrap code you can use something like http://www.layoutit.com/ to drag and drop what you want, then click 'download' to get the css/html.

Also Google 'hackathon starter' for your language. Most languages have some predesigned stuff that's open and you and hack/modify.

Check out the book design for hackers, learn your way around sketch (it's easier than you think), and try cloning things from dribbble and what not
For some perspective: take a few sites that you use every day (e.g. Google, possibly Facebook, any news site that you visit regularly) and check on First Versions (http://www.firstversions.com/) to see what their first publicly available iterations look like. If that doesn't lower your bar for visual design, nothing will :)

Remember also that many "minimalist" / "undesigned" sites (e.g. Craigslist) are quite popular. "Good" design isn't necessarily more elaborate or complicated; often users will prefer an interface that is concise and clear with a few well-thought-out options to one that looks nicer but is unusable.

I'm no designer myself, but I've done a passable job of maintaining reasonable design in my projects with a few principles: understand what your users want to do, then help them do that; use visual cues consistently (contrast, color, size, font weight, etc.); pick easily readable fonts; and so on.

A bit of reading up on design from various perspectives helps. Here's some of my favorite resources: https://www.nngroup.com/reports/, The Design of Everyday Things, The Visual Display of Quantitative Information, http://worrydream.com/MagicInk/, Understanding Comics (no, seriously! A lot of "sequential art" principles transfer well to web design), https://developer.mozilla.org/en-US/docs/Web/Accessibility (accessibility isn't just about helping the disabled; a more accessible site is, well, more accessible to everyone).

Also, learn to use the tools that are out there. There are color pickers to help you build reasonable color schemes, font libraries (e.g. Google Web Fonts) for easy-to-use readable fonts, icon libraries (e.g. Noun Project) for decent icons covering common user actions. CSS3 itself has many goodies (transitions, ::before / ::after pseudo-classes, etc.), and is worth learning in detail.

Even if you end up working with designers - I certainly do for many projects - it's worth your time to understand the basic principles.

I second the recommendation of "The Design of Everyday Things". I read it in college and it influenced my perspective on nearly everything I build. Not just UIs, although that's what the book is about at first sight.
I think the most important thing is that you are motivated to create a web-app in the first place — this should give you mental leverage to learn how to do UI / UX properly, if you have the time to go down that route.

As someone who started off as a non-designer programmer, I taught myself UI/UX just by practising a lot. The two ways (that in hindsight were the most invaluable) I improved were to:

• Read highly-praised books on design fundamentals... These two literally changed the way I make / look at everything that is graphic design related: 1. The Non-Designers Design Book [1]; 2. Know Your Onions [2]. The third I can recommend is all about making websites / UX and covers everything you need to think about when you're working on a web project: 3. Don't Make Me Think (Revisited) [3]. All three are very well-reviewed and have changed people's lives.

• Copy everything you like the look of. What are your favourite web apps / pages / interfaces? What makes them tick? Try and copy sections that you like to give you a feel for how things should be laid-out. Most crucially, use a vector graphics program (I cannot recommend Affinity Designer enough, not least because it is insanely cheap for what it is), and copy as many icons / vector images as you can. Learn the fundamentals of bezier curves and how almost every piece of graphic artwork is made up of different combinations / layerings of shapes... Forget about fancy effects (e.g. shadows, gradients) at first, and just copy the shapes themselves. This was my biggest revelation and improved my UI ability to that of a professional standard. Once you realise that a fancy padlock icon [4] is just a rounded rectangle with a circle and triangle in it merged together, you'll start being able to recreate neat icons really easily.

If you don't enjoy doing any of the above, then hire a professional designer :) There really are no other 'ways of dealing with it' than doing it yourself or using a service. But trust me, it is well within reach to get yourself to a decent level in just a few months.

[1] - https://www.amazon.co.uk/Non-Designers-Design-Book-Robin-Wil... [2] - https://www.amazon.co.uk/Know-Your-Onions-Creative-Businessm... [3] - https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability... [4] - https://cfl.dropboxstatic.com/static/images/business/homepag...

I literally have experienced this same issue, and was lucky enough to work for a company where building UI/UX around APIs _is_ the product. We're a no-code (but code-extensible) UI platform.

https://www.skuid.com/

This isn't meant to be a marketing message, I really actually build UI's around internal API's I write all the time. It is honestly great for side projects and we have multiple F500 organizations that use it at scale as well.

I know this is pretty common for F500 serving companies, but I had no idea that's what you did from looking at your landing page.
F500 is where the money is at, so that is where the marketing is at (currently). Also, selling (no-code) development software to F500 business units requires explanation, which is a hard problem.
For sure! I just always think it's kind of funny when I'm just like, "whaaaaat do you do?" from looking at a landing page. I get why it's like that though.
Most people don't know UI/UX, especially people who teach UI/UX. Prepare to spend 5+ years studying graphic/interface/interactive design if you actually want to get good. Get critiques from lots of people, find online communities that show design principles you want to implement in your style.

Everyone tries to take a logical approach like it's coding, but good design is an artform and should be treated as such. Contrary to common thought right now, you can't be bad at design and good at UX, unless you're a blind person making apps for other blind people.

I'm in the same boat. I recently came across PatternFly (http://www.patternfly.org), which has some good advice and examples for common 'enterprise' webapp design patterns.
Buy a theme. Spend some time to play around with the HTML code from it.

Don't reinvent the wheel if you don't have the skills.

Look at the admin themes section on Themeforest.

They contain lots of premade components, as well as plenty of sample pages to give you ideas.

They're not free, but last time I checked, there were panty of good looking themes for under $20.

UX is something, which is connected to feelings. It's not enough to have a tool, try to work with designers.

If you're developing Free Software with good purposes, then contact our design team at https://bold.cat/

> I never finish things because I get discouraged of how bad it looks in the beginning

So let it look bad. Let it look terrible frankly. You can make something that works look good later more easily than you can make something that looks good work.

I also recommend React and Redux. I am a terrible UI person, but playing around with React and it's declarative model has made my brain suddenly understand how to work with UIs.

I couldn't find your contact info in your profile, but if you're interested in a side project buddy I can do the things you're looking for (including front end dev), would be happy to help