How do you handle design when working a project that doesn’t have explicit design guidelines?

I’ve been working on some personal projects, but I am continually getting held up on design. I hate looking at a blank page, not knowing where to start. I’m not a particularly creative person in art and design and I really struggle to come up with new ideas on my own. I don’t enjoy it.

I’m the kind of person who buy 10 plain black t-shirts and 5 pairs of plain jeans so I never have to think about style.

I’m sure there are a lot of us out there; you can make the thing but, not design it. How do you work that part of the process?

I don’t want my projects to get skipped over because they’re ugly and I don’t want to copy other designs pixel for pixel.

  • abhibeckert@lemmy.world
    link
    fedilink
    arrow-up
    22
    ·
    edit-2
    7 months ago
    1. Write down who your customers are.
    2. Write down what problem your customers have, which can be solved with your product.
    3. Write down how your product can solves the problem.
    4. Figure out how you can achieve that goal (this needs to be separate to step 3 - you’re essentially tackling the same thing from a different perspective… helping you see things that might not be visible from the other one).
    5. Anything that does not bring your product closer to the goal(s), remove it from your product.
    6. Anything that would bring you closer, but isn’t achievable (not enough resources, going to take too long, etc), remove those as well.

    Those are not singular items. You have multiple customers (hopefully thousands). Your customers have multiple problems your product can solve. Actually solving all of those problems will require multiple things.

    If that list sounds functional, that’s because good design is functional. Aesthetics matter. Why do you choose a black shirt over an orange shirt with rainbow unicorns? Take the same approach for the colours on your app icon. Why do you choose jeans that are a specific length? Take that same approach for deciding how many pixels should separate two buttons on the screen.


    You said you struggle with looking at a blank page. Everyone does. If you follow the steps I outlined above, then you won’t be working with a blank page.

  • Oisteink@feddit.nl
    link
    fedilink
    arrow-up
    14
    ·
    edit-2
    7 months ago

    A controversial suggestion, but you could read up and maybe take a few courses. While I love UX/interaction design you might want to start with UI design and design patterns. Once you get a basic UI and know when to implement different patterns you can move on and work on the UX.

    I would suggest the same here, some learning is needed. There’s a reason you hire UX designers and not just more programmers.

  • yournameplease@programming.dev
    link
    fedilink
    English
    arrow-up
    9
    ·
    7 months ago

    You can start by using plain, semantic HTML and grabbing a classless CSS with a license you like. (Check out this list.)

    It’s good enough for a simple app or site, and it’s honestly impressive how good something can look with just this. It’s the “plain t-shirt and jeans” of web design.

  • atzanteol@sh.itjust.works
    link
    fedilink
    English
    arrow-up
    5
    ·
    7 months ago

    I’m the kind of person who buy 10 plain black t-shirts and 5 pairs of plain jeans so I never have to think about style.

    I’m far more stylish. Some of my tshirts are gray…

    I’m terrible with UI design as well. Mostly I try to copy from others and modify as needed. After all - “good artists borrow, great artists steal.”

  • CatPoop@lemmy.world
    link
    fedilink
    English
    arrow-up
    5
    ·
    7 months ago

    Maybe also look ip a good component library, for C# I use MudBlazor, which has great documentation that helps a lot to pick the right component for the job, and a lot of the hard work is already done in terms of styles/themes.

    For my apps I use the MVVM pattern and write all the backend logic first, then that helps me narrow down the right way to display it.

  • DieguiTux8623@feddit.it
    link
    fedilink
    arrow-up
    3
    ·
    7 months ago

    I am a complete disaster, sometimes errors slip in even when I have a UI done by a designer because I am totally “blind” to certain aspects.

    In my personal projects I try to follow guidelines and best practices for dimensions/typography/colors/placing of elements/etc but the results are “meh” of course, since apart from my layout-blindness I am more tolerant to small sins, since it’s not work after all.

    If the project gets to be used by a few people (of course not the faint of heart) I collect feedback and iterate over it to improve the UX.

  • jeremyparker@programming.dev
    link
    fedilink
    arrow-up
    4
    arrow-down
    1
    ·
    7 months ago

    Copy designs you like, and keep a couple of CSS files +/- web components that you can carry along with you from project to project. Tweak then as you go.

    Like everything else, getting good at making designs that you like will take time and effort, so if you want you get good at it, do it! I find it fun, and my designs aren’t to everyone’s taste (I too like black tshirts), but whatever.

    Plus, getting good at making designs that i like has made me better at making designs clients/projects will like, so, win/win.

  • monomon@programming.dev
    link
    fedilink
    arrow-up
    3
    ·
    edit-2
    7 months ago

    One suggestion - if you get 10 plain black t-shirts, then implement your style!

    I am a dev who was focused on design and ux early on (this has changed as the needs of my work changed).

    @abhideckert’s suggestion on how to analyze the needs is great. Now on to the implementation.

    Similarly to development, you start out with some requirements - you need to show an input box, a history of inputs, and a sidebar with categories. You work out the layout (with wireframes, pencil drawings, etc.). Then comes visual style, which I guess is the thing you struggle with?

    In both layout and visual style, you need to apply design principles, but ultimately the goal is to guide the visitor’s eye to the right places. This is where rhythm, repetition and contrast play a role. Basically highlight important elements, make the order of elements logical and not boring, avoid large empty areas but leave sufficient “breathing room” between elements, etc.

    For visual style, you should make your own “style guide” that you apply to all personal projects. You can vary it a bit for each, if you are worried about them looking the same. Make that into a css file with a dummy html page to test. Add an input box, a textarea, select, unordered lists, etc. and style all of them to your liking. This guide will capture a lot of visual ideas, colors, spacing, which you can paste straight into your project. Do not sweat too much about stealing other people’s ideas - it’s an intrinsic property of art, and anyway it will probably not look 100% the same even if you copy it.

    Edit: PS: spend some time just looking at the design and thinking.

  • tsonfeir@lemm.ee
    link
    fedilink
    arrow-up
    2
    ·
    7 months ago

    If you’re using web stuff, just use a framework. Whatever has the easiest to use components for your workflow. As long as your app doesn’t look like total ass, people will forgive an uninspired design in favor of functionality.

  • AsAnAILanguageModel@sh.itjust.works
    link
    fedilink
    arrow-up
    2
    ·
    7 months ago

    UX is not primarily about how your project looks like, but about how easy it is for humans to interface with it.

    On the other hand, user interfaces that are difficult to read or have misleading layouts can seem ugly.

    I can recommend the book “the gamer’s brain” by Celia Hodent. Maybe this blog post of hers can give you a rough idea what the book will cover. Although she focuses on games, the lessons are universal.

  • Cwilliams@beehaw.org
    link
    fedilink
    arrow-up
    1
    ·
    edit-2
    7 months ago

    Honestly, I love figma for this. For make a simple layout that I can turn unto HTML code later, figma is killer.

  • elxeno@lemm.ee
    link
    fedilink
    arrow-up
    1
    ·
    7 months ago

    I don’t want my projects to get skipped over because they’re ugly and I don’t want to copy other designs pixel for pixel.

    Just build your ugly thing then look up some designs and copy the parts you think are a good fit for you project.