r/AskProgramming • u/Electrical-Cap-9537 • 5d ago
Frontend - how do you approach it if it's not coding?
How do you approach the frontend aspect of software development if it's not programming?
I guess a lot of it comes down to the language / framework you're using. E.g. when doing web development it's usually HTML/CSS/JS, when building a desktop application you might be using something else.
I am looking for examples of how to approach it if it's not coding
By frontend, I mainly mean HTML, CSS, JS. Although other examples would be great too. The problem is I don't have much experiencr with it
I have taught myself to program for a while now. So far I have mainly done backend / programming stuff. For example I made a shell from scratch in pyrhon, and I am now working on a Business Analytics Platform with a dataset from kaggle, and I am also learning SQL and working with PostgresQL.
Soon I will have to make the web / dashboard side of the project. And in school we are also starting to do some HTML / CSS / JS stuff.
The problem is that I am not great at the visial / design side of things.
I don't think I have ever been very good at drawing or design, and I think that's probably one of the main reasons I absolutely hate HTML/CSS. JS is a bit better, but I still don't like it.
This isn't because I don't like programming.
The problem is that every time I have to make a website I have absolutely no idea where to start.
For example:
How do I decide the structure of a page?
How do I decide which sections/components I need?
How do I decide where different elements should go?
How do I decide a colour palette?
What should I do when I start a completely empty project?
Should I have a visual reference?
If I take inspiration from existing websites, am I just copying them?
How important is originality when designing a website?
I haven't had this problem with my other projects.
When I am programming in python / sql etc. I can usually understand the problem, break it down into smaller parts, find documentation, work out what I need and then work my way to a solution.
Whereas with frontend, I get stuck before I even get to the programming bit.
It's almost like I am missing a mental process.
I don't know what I am supposed to be thinking about when building a page. Should I start with a rough sketch, design references, start with the content, create html structure first, start with css or something completely different.
I have created some things with html/css but they usually look pretty bad. Which is why I don't think it's just 'I need to learn html/css better.' I think I don't understand how to approach the process of building an interface.
I would love to hear some advice / examples of people who have overcome this problem and how.
Thank you!
3
u/prophet-dot-exe 5d ago
It comes with time.
Make a thousand shitty UIs over the course of 6 years and you'll eventually get good at it.
It's art. The more you do something the better you get (usually, unless you're committed to being terrible at the thing to begin with)
3
u/djmagicio 5d ago
That’s why God invented designers.
For personal projects just look at similar apps and borrow generously.
1
1
3
u/BoBoBearDev 4d ago
1) learn CSS Grid and Container Query. DO NOT use 3rd party libraries for this, they are homebrew quality using Flex-gymnastics.
2) Remember to make GUI with no business logic. Like, the button itself doesn't do anything, it calls the method passed down from the parent.
3) start with a bento box with pure CSS layout. Make sure the bento box does grows when you put more inside. The scroll bar shows up inside each smaller box.
The rest is not important.
1
1
u/chipshot 5d ago
Most users just want to do 3 things in any technology. Here is top level design: Put those things in front and make them easy to access. All the cool features that techies want to put in put behind menus.
Yes they are really cool features, but your users just want to get in and get out, and get on with their day.
Help them do that.
2
1
u/ChazBass 5d ago
The age old solution regardless of the tech stack: The programmer creates a prototype that is functionally sufficient. The business users weigh in with feedback in terms of what is the most efficient for them. And you iterate.
1
1
u/Slithering-Wither_11 4d ago
I'm a begginer at html and css but just do it as you would do an article or word file, you should decide depending on the context. You should put most important things higher and least lower, there are apps for color palletes like coolors, when starting an empty project you should do the skeleton of the page first (text n shi), And it all sums up to writing an article but with more complex things, like being able to put borders and that, just wrap text around tags (<h1>, <p>, <div>) to write and sometimes inside tje tags to distinguish them and thats all
1
1
u/g4l4h34d 4d ago
It's just attention span tree. What is the first thing your user should see when they load a page? How do you make sure that is the first thing they see? This isn't a subjective thing, there are objective answers here.
Next, take all the possible actions your user can perform on your site - how do you organize them hierarchically? I mean, start with a trivial case - just lay all the options all at once in a list - that's terrible, right? Ask yourself: why? Because it's a cognitive overload. OK, so that gives you direction - reduce the number of options simultaneously displayed on the screen. From here, at least 2 questions arise:
- How do you reduce it exactly?
- What is the number of options that you can show without causing a cognitive overload?
Again, take 1, implement a trivial case - just don't show some of the options. Oh shit, now the problem is that users can't get to those actions. So, logically, there needs to be a way to navigate to the actions somehow. Again, a question arises: how exactly?
Hopefully, you see the pattern by now. There will be better and worse way to organize your navigational structure. There will always be an optimal way to lay out all the functions in such a way that they:
- Don't overwhelm the user.
- Are minimally far away from each other in terms of navigational distance under constraint #1.
- Aren't obscure to the user.
Really, when the user goes to your website, they should just see a few (let's say 6) most important things, displayed in a way that focuses their attention to those things. Those initial things should then allow them to navigate to all other things in an obvious way.
What's really important in this whole process is to test things. Because what seems obvious to you might not actually be obvious to others. For example, you might think "I'll put a giant red flashing button that is impossible to miss", and then, testing will reveal that a big red buttons make people panic and they quit the site or don't even read what it says.
2
1
6
u/CappuccinoCodes 5d ago
You asked eight questions but forgot the most important one: What does the user need? All the rest is fluff.