this post was submitted on 16 Apr 2024
31 points (100.0% liked)

Programming

420 readers
8 users here now

Welcome to the main community in programming.dev! Feel free to post anything relating to programming here!

Cross posting is strongly encouraged in the instance. If you feel your post or another person's post makes sense in another community cross post into it.

Hope you enjoy the instance!

Rules

Rules

  • Follow the programming.dev instance rules
  • Keep content related to programming in some way
  • If you're posting long videos try to add in some form of tldr for those who don't want to watch videos

Wormhole

Follow the wormhole through a path of communities !webdev@programming.dev



founded 1 year ago
MODERATORS
 

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.

top 11 comments
sorted by: hot top controversial new old
[–] Kolanaki@yiffit.net 9 points 5 months ago

As a user myself, I just design it the way I think is best if I was using it because 9 times out of 10, I'm making it for myself in the first place.

[–] Oisteink@feddit.nl 9 points 5 months ago* (last edited 5 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.

[–] pohart@programming.dev 6 points 5 months ago

We just point a backend developer at it and hope.

[–] yournameplease@programming.dev 6 points 5 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.

[–] jeremyparker@programming.dev 4 points 5 months ago (1 children)

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.

[–] Kcg@lemmy.ml 2 points 5 months ago

"Good artists copy, great artists steal"

[–] monomon@programming.dev 3 points 5 months ago* (last edited 5 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.

[–] GBU_28@lemm.ee 3 points 5 months ago

Just gaslight the client into not needing better ux ui

[–] AnAngryAlpaca@kbin.social 2 points 5 months ago* (last edited 5 months ago)

It's actually not that hard, because the web is mature, and there are some conventions you must follow so users know how to use your site.

Start with a framework like bootstrap (general websites) or AdminLTE (backend panel type sites) or whatever your prefered frontend libary is. Look at all the example pages and components the framework gives you. Think about which components you need for your system, and how you want to present and interact with the information.

There are some bootstrap visual builders out there, so you can experiment and try different layouts and ideas to give you a feel for layouts, sizes, propotions before you commit and code a layout.

Then think about the general structure of the website, and what the user knows and expects from other sites. Look at other sites with a similar topic, then think about what you like and dislike about this site, and how you would make it better. Go with a common, basic and understood structure and navigation, which in most modern sites is generally:

-> Homepage (latest/interessting stuff)
-> Index/Category (all items of the same topic, all posts in a blog category, all products in the category "phone" etc.)
-> Detail page (a single blog post with it's comments, a single product with all its pictures and properties etc.)

Design as simple as possible. Make sure the user can accomplish your business goal (ordering a product, fill out a contact form, ...) with as little input, clicks and efford as possible. Make sure your business goal can be reached from everywhere on your site by placing a big link in the main menu that is always visible.

You can also throw your ideas into chatGPT and ask it to design a bootstrap portfolio template for your personal blog, and then build and expand on that.

[–] Cwilliams 1 points 5 months ago* (last edited 5 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 1 points 5 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.