6 ms·

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

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.

MisterBastahrd 9y ago
Learn UX. It isn't some strange, mystical fantasy world. It has principles just like every other design discipline. Platform vendors usually supply design documents for how apps should look and feel. Also, feel free to steal design ideas. If your projects ever get off the ground, part of the reason will be that they are familiar enough to customers to use without a headache.
onion2k 9y ago
There are tens of thousands of designers who want to build things but can't write code. Find one and work together.
mbaha 9y ago
Try to use UI kits.
ajinvw 9y ago
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
billconan 9y ago
purchase a frontend from themeforest.com
traviscj 9y ago
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.
tixocloud 9y ago
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.
dec0dedab0de 9y ago
Target your projects for people who don't care about how pretty an app is. Think HN, and Craigslist.
- albertgoeswoof 9y ago
  HN and craigslist have amazing UX and are very well designed.
  - dec0dedab0de 9y ago
    I agree, but they're also extremely simple and easy to replicate.
- justboxing 9y ago
  > 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.
brudgers 9y ago
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.
ameister14 9y ago
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.
CameronBanga 9y ago
Use ThemeForest.
deleted 9y ago
[deleted]
emodendroket 9y ago
Honestly, just use Bootstrap. You're exactly the kind of person it's made for.
deleted 9y ago
[deleted]
jdhn 9y ago
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/ https://getbootstrap.com/ [2] https://getuikit.com/ https://getuikit.com/
- programbreeding 9y ago
  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/ https://getbootstrap.com/docs/4.0/examples/
  - gremlinsinc 9y ago
    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.
  - emodendroket 9y ago
    Yeah, but mostly you just need to apply their CSS styles.
  - roel_v 9y ago
    "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.
- tim333 9y ago
  And rather than having to write the Bootstrap code you can use something like http://www.layoutit.com/ 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.
adamnemecek 9y ago
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
candu 9y ago
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/ 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/ https://www.nngroup.com/reports/, The Design of Everyday Things, The Visual Display of Quantitative Information, http://worrydream.com/MagicInk/ 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 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.
- majewsky 9y ago
  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.
sarreph 9y ago
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-Williams/dp/0133966151/ https://www.amazon.co.uk/Non-Designers-Design-Book-Robin-Wil... [2] - https://www.amazon.co.uk/Know-Your-Onions-Creative-Businessman/dp/9063692587 https://www.amazon.co.uk/Know-Your-Onions-Creative-Businessm... [3] - https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability/dp/0321965515/ https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability... [4] - https://cfl.dropboxstatic.com/static/images/business/homepage/icons/security.svg https://cfl.dropboxstatic.com/static/images/business/homepag...
micah_chatt 9y ago
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/ 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.
- thebiglebrewski 9y ago
  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.
  - micah_chatt 9y ago
    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.
    - thebiglebrewski 9y ago
      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.
- micah_chatt 9y ago
  Also: You can (for free) remove the 30day trial restriction as a developer: https://www.skuid.com/developer-trial/ https://www.skuid.com/developer-trial/
afrophysics 9y ago
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.
gdubya 9y ago
I'm in the same boat. I recently came across PatternFly (http://www.patternfly.org http://www.patternfly.org), which has some good advice and examples for common 'enterprise' webapp design patterns.
yeezul 9y ago
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.
rpeden 9y ago
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.
fdik 9y ago
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/ https://bold.cat/
mabbo 9y ago
> 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.
acconrad 9y ago
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
spraak 9y ago
I was in the same position. I made a resolve to learn enough to get by (so far) and have done so using the Next.js framework. It uses React but gives you soooo much 'out of the box'. It also makes doing CSS really easy. The other part is that I learned by copying. I found an app I liked and wanted to make my own version of, and then component by component I copied it, often using the browser inspector to understand how the CSS worked.
3pt14159 9y ago
I'm going to take a different angle: Don't build a GUI if you don't have the skills to build a GUI. You won't be able to compete on features in the long run, and you certainly won't be able to compete on design in the short run. And certainly not without devoting 100% of your time towards it. Instead realize that there are three primary types of interfaces that are in wide use today: GUI, API, and CLI. If you're a backend dev the last two are much easier for you to build. So instead of building a GUI, build and API. Hire a designer to design you a basic 1 page marketing site. Keep it simple. Put up API docs on http://readme.io/ http://readme.io/ or something like that. Then iterate on features. Once you solve someones problem well enough find a second person. Iterate until finding leads is your primary problem, not closing them. At that point switch to marketing fulltime.
- 0xJRS 9y ago
  I think if you could build a mvp front end and get started then by the time you have to worry about competing on features you're already at a point where you'll have the resources available (skills and/or employees).
- jnbiche 9y ago
  > So instead of building a GUI, build and API This is a good idea. Indeed, if the software is useful enough, people will build free, open source GUIs and CLIs for your API. Just look at the open source mobile apps and CLIs popping up with DeepL translation system, for example.
adamqureshi 9y ago
Does not matter how bad it looks. What matters is you launch and get feedback / make money ASAP ( validate) Strong / successful designs allow a user to complete a task as FAST as possible. Also your app is not your business. You need to build a business THEN an app comes after. Your first goal is to validate your s business idea ( simple lading page with form / email capture) with some info about the benefits of your idea. ( freezes time, makes something more simple, less complicated ) get feedback on it, not ego stroke. You can do it. Just start with looking up strong examples THEN use pencil / paper to wireframe a BASIC UI or just copy a great app ( SO MANY OUT THERE) Perfection is an illusion. Build. Launch. Test. Feedback. Converge. Get useful feedback on why your app / business idea is NOT gonna work and for heavens sake don't take it personal ( when in feedback someone says "that shit is SO stupid) prove'em wrong with data ( i got 1k sign ups) Good Lucky!
jorgeleo 9y ago
If your ideas REALLY solve an expensive problem, then the UI, what the heck, not even stability, matters. There are 2 types of ideas where this is true: * I can make a lot of money using your software that it would be near impossible to make otherwise. * I can save a lot of money using your software that it would be near impossible to save otherwise. Any other idea is just a bias guess that needs to be market tested, were UI/UX may or may not be of any importance. If you are really sold on the Importance Of UI (tm). Read this book: Design for Hackers (https://www.amazon.com/Design-Hackers-Reverse-Engineering-Beauty-ebook/dp/B005J578EW/ https://www.amazon.com/Design-Hackers-Reverse-Engineering-Be...). It will not make you a designer, but it will make your UIs not fugly. And finally, please consider on coding the software thinking it has no UI, or that the current UI is only one of many ways to use your software. It will help you to structure it so you can fix the UI later when it is actually profitable.
wslh 9y ago
I would partner or pay someone else to take care of the UX/UI. In most cases you can clearly divide tasks and the UI/UX guy implements the user interface using dummy web services and following a storyboard while you develop the other components. At the end there is an integration phase for these two parts.
guskel 9y ago
Learn, look at other projects for ideas, steal, or get someone to help you with it. All of my projects don't have amazing UX.
simook 9y ago
Frontend UX guy here: Focus on making the best damn API experience that you can. It should be restful, fast, and reliable. If you can build that, then someone like me can easily build out the visual interface.
ploggingdev 9y ago
I've started building a few side projects and experienced the same frustration. I'll use one of my recent projects as an example. Here's the first version of the landing page : https://imgur.com/a/BDNgl https://imgur.com/a/BDNgl and here's the current landing page : https://www.hostedcomments.com/ https://www.hostedcomments.com/ Even though the current version could be improved significantly, I graduated from receiving comments such as "The current one doesn't motivate me to continue, even less to buy from you" to being somewhat acceptable. Here's what works for me : I used bootstrap but tweaked the colours of the default buttons, the colour of the navbar and footer and it made a world of difference. The default bootstrap colour scheme is pretty ordinary and the examples feel like they are literally designed to expose people like me, who just use the default bootstrap colour scheme and example code snippets and end up with a terrible design. As an example, the default navbar has rounded corners and a simple addition of the navbar-static-top class makes the navbar look significantly better. Regarding UX, keep things as straightforward as possible. Cut out all the bullshit and fluff to deliver a flow that's natural to new users. You will need to talk to users to figure out what works and what doesn't. It's also a good idea to have helpful tooltips in areas where users can potentially have trouble understanding the flow. In general use screenshots/gifs/videos liberally, especially on the landing page. They work pretty well.
- jnbiche 9y ago
  I think your advice on page flow in good. Here's a couple of additional ideas that could help your current page: 1) increase the left and right margins for your nav menu to match the margins of your other page elements, like the price menu. 2) Change the color of the card icons, making them all the same color. 3) Use a palette maker like http://paletton.com http://paletton.com or pre-set palettes like from http://www.colourlovers.com/ http://www.colourlovers.com/ But next one is important! 4) For UX/UI beginners, USE AS FEW COLORS AS POSSIBLE. Maybe even just one accent colors along with several shades of blacks or greys. Maybe then use colourlovers or paletton to help add one additional color and ask for input. The number one mistake I see backend devs making when they make frontend sites is using lots of different colors that don't work together (btw, even very talented designers usually use no more than 2-3 colors along with various shades of white/grey/black).
jesus-spain 9y ago
You could: . Look for a friend/partner who does UX. . Contract external freelancer or business to design for you.
htormey 9y ago
Personally I’d go on fiverr.com & find someone to do a basic design for your project ($100-200 if you keep it simple). Then find another person to convert it to html/css ($15-$80) then wire that up. I’ve done the above before for my projects. The trick is to keep your design requests very simple and reference existing websites as an example. Also hire someone who is in a similar time zone to you. If the project works & start making money you can go find someone who is more expensive to make it look nicer. Design is an iterative process.
togusa2017 9y ago
I was also just like you but then I started feeling like let me imagine what the user would want . I try to be imaginative and creative but still functional . Spent alot of time on designer news and copied design and then evolved from their . Trust me it's fun and it let's you play God
1fa451fa 9y ago
I am backend developers who got a few side projects. I learned basic css, jQuery, and Bootstrap CSS. This let me get my ideas out there. Then if I feel it is worth improving, I would hire someone off Upwork and Fiverr. Usually, it is a lot easier to work with frontend developer when they can see a functioning website. Also it seems to be a lot cheaper than starting with idea on paper. Although, I am working hard to learn more and more frontend dev, so my cost will be lower.
ajcodez 9y ago
Keep in mind designers use lots of tools. You can't expect to sit down with a text editor, hack for a few hours, and come out with something great. You need to design first using professional tools and then build what you designed. It took me a while but I can put together a decent site using the following tools: - Sketch (https://www.sketchapp.com/ https://www.sketchapp.com/) - Font Pair (http://fontpair.co/ http://fontpair.co/) - Paletton (http://paletton.com/ http://paletton.com/) - Unsplash (https://unsplash.com/ https://unsplash.com/) - UI Gradients (https://uigradients.com/ https://uigradients.com/) - Flat Icon (https://www.flaticon.com/ https://www.flaticon.com/) I use Tachyons to limit the number of CSS choices I need to make. It works for 95% of styles and looks great. I only need to add custom classes or inline styles for special cases such as gradients, background images, transitions. - Tachyons (http://tachyons.io/docs/ http://tachyons.io/docs/) When I design something the goal is to define components and re-use them. I usually steal components from existing projects. - Shopify Polaris Components (https://polaris.shopify.com/components/get-started#navigation https://polaris.shopify.com/components/get-started#navigatio...) - Bootstrap Components (https://getbootstrap.com/ https://getbootstrap.com/) - Material Components (https://material.io/components/ https://material.io/components/) - Metro UI Widgets (https://metroui.org.ua/ https://metroui.org.ua/) Website design comes from understanding what the user wants to do and selecting components that solve the problem. I usually create a new artboard in Sketch for each purpose. For example LandingPage, PricingPage, SignInPage, SignUpPage, ResetPasswordPage, ThankYouForConfirmingEmailPage, UserSettingsPage, etc. You should create a mobile artboard, tablet artboard, and desktop artboard for each page. You can add variants for error states, etc. I start with the mobile artboard and add components until I accomplish the purpose. I then adapt the mobile design to tablet and desktop. If the user needs to enter information I add a Form with a Heading, a number of Inputs with Labels, and a submit Button. If the user wants to view data I need to add a Heading, a Chart or Table, etc. If there is a lot of negative space, I find an image or commission a drawing to fill the space. If I can't decide how it should look, I search online for inspiration. Google "login forms ui" or see how successful companies solve the problem. Adapt what they do to use my existing components, space it out so it doesn't look offensive, and I'm done.
sprobertson 9y ago
Practice. Find UIs that you like and figure out why you like them. Find software with good UX and pick out what makes it good. Duplicates those details in your own projects, or even just in mockups.
iisbum 9y ago
It's much easier to get people involved (even if it's just to give you advice on how to fix things) if they can use the app. That really helps me get to the finish line, because I'm not thinking I'm going to launch the app in this state. I'm just trying to get it to the next checkpoint. Either I fix the UI/UX or get other involved who can. Alternatively, UI kits are really cheap (some are free), on sites like ThemeForest, just pick one of those and run with as best you can. There will be rough edges, but for the most part the app will look good enough.
nunez 9y ago
Read books on UX and learn it. You don’t need to be a UX expert to understand what a comfortable user experience looks like.

MisterBastahrd 9y ago

Learn UX. It isn't some strange, mystical fantasy world. It has principles just like every other design discipline. Platform vendors usually supply design documents for how apps should look and feel. Also, feel free to steal design ideas. If your projects ever get off the ground, part of the reason will be that they are familiar enough to customers to use without a headache.

onion2k 9y ago

There are tens of thousands of designers who want to build things but can't write code. Find one and work together.

mbaha 9y ago

Try to use UI kits.

ajinvw 9y ago

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

billconan 9y ago

purchase a frontend from themeforest.com

traviscj 9y ago

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.

tixocloud 9y ago

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.

dec0dedab0de 9y ago

Target your projects for people who don't care about how pretty an app is. Think HN, and Craigslist.

albertgoeswoof 9y ago
HN and craigslist have amazing UX and are very well designed.
- dec0dedab0de 9y ago
  I agree, but they're also extremely simple and easy to replicate.
justboxing 9y ago
> 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.

brudgers 9y ago

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.

ameister14 9y ago

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.

CameronBanga 9y ago

Use ThemeForest.

deleted 9y ago

[deleted]

emodendroket 9y ago

Honestly, just use Bootstrap. You're exactly the kind of person it's made for.

deleted 9y ago

[deleted]

jdhn 9y ago

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/ https://getbootstrap.com/ [2] https://getuikit.com/ https://getuikit.com/

programbreeding 9y ago
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/ https://getbootstrap.com/docs/4.0/examples/
- gremlinsinc 9y ago
  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.
- emodendroket 9y ago
  Yeah, but mostly you just need to apply their CSS styles.
- roel_v 9y ago
  "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.
tim333 9y ago
And rather than having to write the Bootstrap code you can use something like http://www.layoutit.com/ 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.

adamnemecek 9y ago

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

candu 9y ago

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/ 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/ https://www.nngroup.com/reports/, The Design of Everyday Things, The Visual Display of Quantitative Information, http://worrydream.com/MagicInk/ 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 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.

majewsky 9y ago
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.

sarreph 9y ago

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-Williams/dp/0133966151/ https://www.amazon.co.uk/Non-Designers-Design-Book-Robin-Wil... [2] - https://www.amazon.co.uk/Know-Your-Onions-Creative-Businessman/dp/9063692587 https://www.amazon.co.uk/Know-Your-Onions-Creative-Businessm... [3] - https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability/dp/0321965515/ https://www.amazon.co.uk/Dont-Make-Think-Revisited-Usability... [4] - https://cfl.dropboxstatic.com/static/images/business/homepage/icons/security.svg https://cfl.dropboxstatic.com/static/images/business/homepag...

micah_chatt 9y ago

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/ 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.

thebiglebrewski 9y ago
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.
- micah_chatt 9y ago
  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.
  - thebiglebrewski 9y ago
    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.
micah_chatt 9y ago
Also: You can (for free) remove the 30day trial restriction as a developer: https://www.skuid.com/developer-trial/ https://www.skuid.com/developer-trial/

afrophysics 9y ago

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.

gdubya 9y ago

I'm in the same boat. I recently came across PatternFly (http://www.patternfly.org http://www.patternfly.org), which has some good advice and examples for common 'enterprise' webapp design patterns.

yeezul 9y ago

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.

rpeden 9y ago

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.

fdik 9y ago

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/ https://bold.cat/

mabbo 9y ago

> 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.

acconrad 9y ago

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

spraak 9y ago

I was in the same position. I made a resolve to learn enough to get by (so far) and have done so using the Next.js framework. It uses React but gives you soooo much 'out of the box'. It also makes doing CSS really easy. The other part is that I learned by copying. I found an app I liked and wanted to make my own version of, and then component by component I copied it, often using the browser inspector to understand how the CSS worked.

3pt14159 9y ago

I'm going to take a different angle: Don't build a GUI if you don't have the skills to build a GUI. You won't be able to compete on features in the long run, and you certainly won't be able to compete on design in the short run. And certainly not without devoting 100% of your time towards it. Instead realize that there are three primary types of interfaces that are in wide use today: GUI, API, and CLI. If you're a backend dev the last two are much easier for you to build. So instead of building a GUI, build and API. Hire a designer to design you a basic 1 page marketing site. Keep it simple. Put up API docs on http://readme.io/ http://readme.io/ or something like that. Then iterate on features. Once you solve someones problem well enough find a second person. Iterate until finding leads is your primary problem, not closing them. At that point switch to marketing fulltime.

0xJRS 9y ago
I think if you could build a mvp front end and get started then by the time you have to worry about competing on features you're already at a point where you'll have the resources available (skills and/or employees).
jnbiche 9y ago
> So instead of building a GUI, build and API This is a good idea. Indeed, if the software is useful enough, people will build free, open source GUIs and CLIs for your API. Just look at the open source mobile apps and CLIs popping up with DeepL translation system, for example.

adamqureshi 9y ago

Does not matter how bad it looks. What matters is you launch and get feedback / make money ASAP ( validate) Strong / successful designs allow a user to complete a task as FAST as possible. Also your app is not your business. You need to build a business THEN an app comes after. Your first goal is to validate your s business idea ( simple lading page with form / email capture) with some info about the benefits of your idea. ( freezes time, makes something more simple, less complicated ) get feedback on it, not ego stroke. You can do it. Just start with looking up strong examples THEN use pencil / paper to wireframe a BASIC UI or just copy a great app ( SO MANY OUT THERE) Perfection is an illusion. Build. Launch. Test. Feedback. Converge. Get useful feedback on why your app / business idea is NOT gonna work and for heavens sake don't take it personal ( when in feedback someone says "that shit is SO stupid) prove'em wrong with data ( i got 1k sign ups) Good Lucky!

jorgeleo 9y ago

If your ideas REALLY solve an expensive problem, then the UI, what the heck, not even stability, matters. There are 2 types of ideas where this is true: * I can make a lot of money using your software that it would be near impossible to make otherwise. * I can save a lot of money using your software that it would be near impossible to save otherwise. Any other idea is just a bias guess that needs to be market tested, were UI/UX may or may not be of any importance. If you are really sold on the Importance Of UI (tm). Read this book: Design for Hackers (https://www.amazon.com/Design-Hackers-Reverse-Engineering-Beauty-ebook/dp/B005J578EW/ https://www.amazon.com/Design-Hackers-Reverse-Engineering-Be...). It will not make you a designer, but it will make your UIs not fugly. And finally, please consider on coding the software thinking it has no UI, or that the current UI is only one of many ways to use your software. It will help you to structure it so you can fix the UI later when it is actually profitable.

wslh 9y ago

I would partner or pay someone else to take care of the UX/UI. In most cases you can clearly divide tasks and the UI/UX guy implements the user interface using dummy web services and following a storyboard while you develop the other components. At the end there is an integration phase for these two parts.

guskel 9y ago

Learn, look at other projects for ideas, steal, or get someone to help you with it. All of my projects don't have amazing UX.

simook 9y ago

Frontend UX guy here: Focus on making the best damn API experience that you can. It should be restful, fast, and reliable. If you can build that, then someone like me can easily build out the visual interface.

ploggingdev 9y ago

I've started building a few side projects and experienced the same frustration. I'll use one of my recent projects as an example. Here's the first version of the landing page : https://imgur.com/a/BDNgl https://imgur.com/a/BDNgl and here's the current landing page : https://www.hostedcomments.com/ https://www.hostedcomments.com/ Even though the current version could be improved significantly, I graduated from receiving comments such as "The current one doesn't motivate me to continue, even less to buy from you" to being somewhat acceptable. Here's what works for me : I used bootstrap but tweaked the colours of the default buttons, the colour of the navbar and footer and it made a world of difference. The default bootstrap colour scheme is pretty ordinary and the examples feel like they are literally designed to expose people like me, who just use the default bootstrap colour scheme and example code snippets and end up with a terrible design. As an example, the default navbar has rounded corners and a simple addition of the navbar-static-top class makes the navbar look significantly better. Regarding UX, keep things as straightforward as possible. Cut out all the bullshit and fluff to deliver a flow that's natural to new users. You will need to talk to users to figure out what works and what doesn't. It's also a good idea to have helpful tooltips in areas where users can potentially have trouble understanding the flow. In general use screenshots/gifs/videos liberally, especially on the landing page. They work pretty well.

jnbiche 9y ago
I think your advice on page flow in good. Here's a couple of additional ideas that could help your current page: 1) increase the left and right margins for your nav menu to match the margins of your other page elements, like the price menu. 2) Change the color of the card icons, making them all the same color. 3) Use a palette maker like http://paletton.com http://paletton.com or pre-set palettes like from http://www.colourlovers.com/ http://www.colourlovers.com/ But next one is important! 4) For UX/UI beginners, USE AS FEW COLORS AS POSSIBLE. Maybe even just one accent colors along with several shades of blacks or greys. Maybe then use colourlovers or paletton to help add one additional color and ask for input. The number one mistake I see backend devs making when they make frontend sites is using lots of different colors that don't work together (btw, even very talented designers usually use no more than 2-3 colors along with various shades of white/grey/black).

jesus-spain 9y ago

You could: . Look for a friend/partner who does UX. . Contract external freelancer or business to design for you.

htormey 9y ago

Personally I’d go on fiverr.com & find someone to do a basic design for your project ($100-200 if you keep it simple). Then find another person to convert it to html/css ($15-$80) then wire that up. I’ve done the above before for my projects. The trick is to keep your design requests very simple and reference existing websites as an example. Also hire someone who is in a similar time zone to you. If the project works & start making money you can go find someone who is more expensive to make it look nicer. Design is an iterative process.

togusa2017 9y ago

I was also just like you but then I started feeling like let me imagine what the user would want . I try to be imaginative and creative but still functional . Spent alot of time on designer news and copied design and then evolved from their . Trust me it's fun and it let's you play God

1fa451fa 9y ago

I am backend developers who got a few side projects. I learned basic css, jQuery, and Bootstrap CSS. This let me get my ideas out there. Then if I feel it is worth improving, I would hire someone off Upwork and Fiverr. Usually, it is a lot easier to work with frontend developer when they can see a functioning website. Also it seems to be a lot cheaper than starting with idea on paper. Although, I am working hard to learn more and more frontend dev, so my cost will be lower.

ajcodez 9y ago

Keep in mind designers use lots of tools. You can't expect to sit down with a text editor, hack for a few hours, and come out with something great. You need to design first using professional tools and then build what you designed. It took me a while but I can put together a decent site using the following tools: - Sketch (https://www.sketchapp.com/ https://www.sketchapp.com/) - Font Pair (http://fontpair.co/ http://fontpair.co/) - Paletton (http://paletton.com/ http://paletton.com/) - Unsplash (https://unsplash.com/ https://unsplash.com/) - UI Gradients (https://uigradients.com/ https://uigradients.com/) - Flat Icon (https://www.flaticon.com/ https://www.flaticon.com/) I use Tachyons to limit the number of CSS choices I need to make. It works for 95% of styles and looks great. I only need to add custom classes or inline styles for special cases such as gradients, background images, transitions. - Tachyons (http://tachyons.io/docs/ http://tachyons.io/docs/) When I design something the goal is to define components and re-use them. I usually steal components from existing projects. - Shopify Polaris Components (https://polaris.shopify.com/components/get-started#navigation https://polaris.shopify.com/components/get-started#navigatio...) - Bootstrap Components (https://getbootstrap.com/ https://getbootstrap.com/) - Material Components (https://material.io/components/ https://material.io/components/) - Metro UI Widgets (https://metroui.org.ua/ https://metroui.org.ua/) Website design comes from understanding what the user wants to do and selecting components that solve the problem. I usually create a new artboard in Sketch for each purpose. For example LandingPage, PricingPage, SignInPage, SignUpPage, ResetPasswordPage, ThankYouForConfirmingEmailPage, UserSettingsPage, etc. You should create a mobile artboard, tablet artboard, and desktop artboard for each page. You can add variants for error states, etc. I start with the mobile artboard and add components until I accomplish the purpose. I then adapt the mobile design to tablet and desktop. If the user needs to enter information I add a Form with a Heading, a number of Inputs with Labels, and a submit Button. If the user wants to view data I need to add a Heading, a Chart or Table, etc. If there is a lot of negative space, I find an image or commission a drawing to fill the space. If I can't decide how it should look, I search online for inspiration. Google "login forms ui" or see how successful companies solve the problem. Adapt what they do to use my existing components, space it out so it doesn't look offensive, and I'm done.

sprobertson 9y ago

Practice. Find UIs that you like and figure out why you like them. Find software with good UX and pick out what makes it good. Duplicates those details in your own projects, or even just in mockups.

iisbum 9y ago

It's much easier to get people involved (even if it's just to give you advice on how to fix things) if they can use the app. That really helps me get to the finish line, because I'm not thinking I'm going to launch the app in this state. I'm just trying to get it to the next checkpoint. Either I fix the UI/UX or get other involved who can. Alternatively, UI kits are really cheap (some are free), on sites like ThemeForest, just pick one of those and run with as best you can. There will be rough edges, but for the most part the app will look good enough.

nunez 9y ago

Read books on UX and learn it. You don’t need to be a UX expert to understand what a comfortable user experience looks like.