Over the last week or so, I've been lucky enough to start working with senior web developer, @vfwood, on a dummy CMS project. I am having a great time and learning so much!
Over the past week I have created a homepage with links to twitter, created a login page with a form, and linked them together with a nav bar. It doesn't sound like much for just over a weeks' work, but I've also been using git in the CLI for the first time and learning -
The life cycle:
- Pick up ticket
- New branch from master
- Complete ticket
- Create PR
- Push to branch
- Wait for review
For me, the longest time is between 2. and 3., not only because I am learning as I go (seriously, I Google everything), but also because I just don't know what things are supposed to look like...?
Now, I know that generally developer !== UI designer, but I feel like I should at least have some idea of if something looks good or not???
It's tricky - I know website UI that I like - generally minimalist, not cluttered, soft colours etc., but when I try and recreate that look - there is just so much white space, which is baaad 🐑.
So.... at what point does a developer need to put on a designer hat?
Where do I get one of these hats? 🕵🏻
For example, yesterday I spent a long time writing about 30+ <div>s in order to move the elements seperately, when in fact all I needed was an overarching <div class= "container"> to bring everything together. Things like that will come in time of course, and time won't be wasted trying to manually move elements with classes....
But when do I start knowing that things look good? Like that nothing should touch the sides and forms should only be as long as the header, but also not too long
Previously, I've worked in industries such as education, transport and finance, where generally you need to get things right first time 👏🏻
Is it just a case of drafting until I get it right?
Has someone written a rule book?
Do I need to spend a load of time learning about UI and UX?
Do most people just know what looks good when they are developing a web page?
Top comments (15)
In my experience, looking at other websites can be a huge help! Try keeping an eye out for websites with design that appeals to you, eventually this can become a bank of inspiration and help. Don't know how the footer should look? Check the website bank! I like to look through awwwards.com/ when I'm out of ideas as well.
Hope this helps to some degree!
Great idea! Thank you!
As a beginner you should be focused on understanding the basics very well. This is a mistake most noobs make (I'm a walking example). Things like figuring out the structure and overall design should come last. Emphasize on the basics and the "bigger" things will be just the basics lined up together.
Very true, thank you!
I think you first need to sketch your app. As you say that you are learning, I guess you need to become a good developer before learn design seriously. The refactor
<div>you mentioned will be fixed with time when you can able to build better apps. Don't push it, learning is hard at first.I know it is a learning curve. I just need to try and not get frustrated if what I've sent as a PR doesn't get approved first (or even second) time round. Luckily my mentor is incredibly patient haha!
I'm working as a software developer for well over 10 years now and about 4 of that in Teams with review structure in place:
The quota of my Code that goes through review without any comments is probably somewhere around 10%. For me it's mostly fails in Content-Review that annoy me personally. Code-Review is fine, I even learn a few things every now and then when colleagues point out easier or more elegant ways to solve stuff.
Fine, but rarely a PR is approved at first time :D
My multimedia design degree didn't really teach me how to design a website.
So, besides getting into development, I just learn by stealing and reading. Watch what others do. Copy and adapt bits. Inform yourself and form opinions you can defend.
I don't believe you need to worry a lot about this, but you can always brush up on design theory.
From what I see looking at your posts, it looks like you are currently undergoing a journey into the world of JavaScript, which does have a lot more to go with it. As this question is about when to put on the design hat, I highly recommend utilizing the research done by Google and Apple in order to get ideas of what they have found most useable.
I myself utilize material-ui library based upon the material design recommendations from Google.
You may also want to check out Apple's Design Page
Before getting too frustrated, I think it is good to listen to what your mentor has to say and keep learning and researching. Once you have started researching examples of - not necessarily what you like or what I like - what the metrics show work well for the most people, you can then start to figure out why that is.
Once you feel you have a good grasp on the reason why something is generally recommended, it becomes easier to debate well the ways to potentially improve it.
I also see you have been learning bootstrap - there are a lot of themes available that you could also start with to modify. I just looked up material design bootstrap and found a site with boilerplates.
Building a theme (or style) from scratch can be difficult, which is why a lot of people will use bootstrap or a library specific to the framework or javascript library they are using to create their app.
Wow, so many great tips, thank you! Thank you for all of the links too!
I'm going to be boring and directly answer a couple of those questions. As someone who has worked on various projects and systems in over a decade, and someone who has the design ability of pile of compost, I'm fairly well placed to answer, I think.
Do I need to spend a load of time learning about UI and UX?
You should spend some time learning about these topics, but they shouldn't be the primary focus. Being aware of what is good practice and current trends (which people get used to and gravitate towards) will help identify problem areas ahead of development. Remember, learning is a continual, iterative process. Focus on your chosen path but also be aware of what links to it, and keep an eye on that too.
Do most people just know what looks good when they are developing a web page?
Not at all. What looks good can be quite subjective.
Apple, who are regularly seen as a golden standard in design, has an awful layout for shipping details on their website (in my opinion).
Amazon, a global leader in e-commerce, have a site so awful in terms of design that if a startup was to go along similar lines, no-one would buy from them. It's far too cluttered and distracting.
Those are my opinions on two market leaders.
My general rule of thumb with development without a design is to ask this: "If this was a product I was trialing ahead of using commercially, would I enjoy the experience?". If you'd struggle with the layout, or think it's messy and wouldn't pay for it, then it's not right.
Just keep pushing on and learning the basics. As you work on more and more projects over time, you'll get a feeling of what works and what doesn't. You'll pull your experiences together from a number of prior sources, and be able to build interfaces with with a good UX fairly easily.
Finally, remember that perfection is the enemy of progress. Don't try to make the UI and UX perfect - just get it built and then improve it over time.
Wow, thank you! Such a well thought out reply! Answered all of my questions, thank you so much!!!!
I was in this place a time back , it's amazing to feel the pain I had to go through while designing pages and alignment of its items ,and I am happy now that am able to this with little effort ,there is still lot to learn. You will definitely get it . keep going.
👏🏻 Thank you! I'll stick with it, of course!