I am currently working on a full stack project (a time tracker).
I finished the back end of it and now I am working on the front end. But I am not a good designer and I want to try and learn web design. But should I pause working on the project to learn web design and resume. Or should I make the front end with poor design, learn web design and than re-make it with a good design?
On one hand I dont want to take a break from the project and possibly loose motivation after I learn UI. But on the other hand I dont think making a front end to just re-do it and never use it is worth it. So Im not sure witch one I should do.
Top comments (8)
It's simple!
How can you even tell if it's a bad design? Since you said you don't know about design, right?
So, just solve those design issues on paper (wireframing) and do the frontend.
It will be good for obvious reasons.
I know the designs I make arent good since when I ask people IRL if they like the design (them no knowing anything about UI or anything), they dont like it. So I dont have a list of specific issues I can try and solve.
There are plenty of batteries-included design specifications out there. I started by using bootstrap in a basic html webapp.
You could also use bulma or material.css. Their documentations provide good hints about basic design principles. Such as where to use what components, the grid system and such like.
I do like how those look I dont want to learn how to make good designs relaying on frameworks/libraries for if I ever need to do something without a framework (like for a job)
Then I'd suggest you start with using a framework and learn as you go. When you customize bootstrap colors, you'll learn a lot about its internal workings and can implement them yourself next time
JFDI
Web design isn't really a thing you need. It's an old term that describes designing a website but you're trying to create a digital service - they're not the same thing.
gov.uk/guidance/government-design-... gives you lots of pointers on how to build an effective digital service; GDS builds some of the best digital services in the world - they know what they're talking about.
You can even reuse their design system as it's open source. I note that you don't want to because you think that won't be useful when you get a job but reusing frameworks is exactly what you'll be doing when you get a job. Good frameworks solve most of your design issues for you because they give you components that just work and work well together.
Yes it's cool to master CSS and html but is it a productive use of your time? The answer is no, unless you want to create your own component framework. Being able to tweak things is good enough for day-to-day work and you can't tweak something that doesn't exist so use a framework. You wouldn't learn to drive by building a car first would you?
The other thing you'll need to pick apart is difference between UI (User Interface) and UX (User eXperience). The user experience includes the user interface but the user interface shouldn't dictate the user experience. GDS does a lot of good work on this.
My own take on the GDS style is to focus on the task the user is doing and then give them a journey that does just that. From what I can see from your GitHub whilst browsing on my phone, you have a single page that does everything - adding projects, listing them etc. This makes for a busy UI, a bad UX and exponentially more work for you as design becomes that much harder.
Instead replace that page with a page with three buttons (I haven't paid enough attention to your code for this to be anything other than a rough example of what you could do - it's not going to match your actual flow). One button for view projects, one for edit project, one for new project.
View projects takes you to a simple list of projects - maybe just the name, maybe there's some other data that's essential you could include but only include it if it's really essential. Clicking on the project takes you to a page that displays the whole project.
At this point I wonder if an edit project button is really necessary on the first page, maybe there's a button in the top corner of this view page that allows you to edit it.
Maybe the front page is actually a table of projects with a button to view and a button to edit on each row with a big button underneath for a new project?
If you create a new project, just take the name on its own on a separate screen. Click next to add the next data point. If there are two different types of project with different inputs then choose the type on a screen and then follow the journey appropriate for those inputs on the next screens.
By concentrating on what the user is trying to achieve and giving them one step at a time you make their life easy because they don't have to think and they aren't confused by multiple irrelevant inputs and widgets - you need the project name then just ask for that!
By concentrating on what the user is trying to achieve and giving them one step at a time you make your life easier because now you just have to display one input box with a label and a next button and a back button. You don't need to be a professional UI designer to make that look good! If you use a framework anyway.
By breaking down the journey into simple steps you're suddenly able to reuse code and screens. You usually make your backend simpler to write. Validation becomes a lot easier if there's only one condition to consider.
By breaking things down into simple atomic steps you won't be like a deer caught in the headlights of a car, overwhelmed by too many possibilities - you'll be able to do one thing at a time without worrying about other considerations. If you do end up rewriting everything it will be a lot easier to do one single screen at a time.
TLDR; Use a design framework, steal ideas from GDS, don't worry about trashing everything and rewriting it - how else are you going to learn? Each screen should do one thing.
I see. Thanks. For if I would learn to drive by building a car, I would I like building stuff though thats besides the point. And the current UI is just for me to test the API endpoint through the UI.
I would vote to not lose the motivation. Keep cranking out the designs, take a step back and analyze the approach. With each new project, the skills should grow over time. Re-doing the UI later might be a really good exercise to evaluate where you were vs your knowledge know.