Preferring Functionality Over Styling?

Hey everyone, I’m am someone who really likes solving a problem, but I am not great at making things pretty. This really shows in my work (for example: https://codepen.io/drewgill89/full/JLwVjP/ ), but I keep telling myself that functionality is the most important aspect, and I can always make it look better later. Does anyone else do this, and is this something I should change?

Dude. You aren’t wrong. You can always make it look better. It won’t even take that much. You should check out CSS Grids. They are very powerful, and very easy to use (grid-template-areas is my favorite CSS property now). I condensed my knowledge of layout based on the Beta into this CodePen. Feel free to fork it. Also, if you have 30 minutes while cooking or something, fire up this Youtube video on CSS Grids

EDIT: Updated the link to my CSS Cheatsheet. Seems to work now. Let me know if it doesn’t.

1 Like

Ah, I know exactly what you mean since I think/do the same. Unfortunately it’s a bad habit…speaking of my experience, the few times i tried to rework the aesthetic part a past project I always ended up on building a new one thinking something like “what’s this mess, bah…let’s build/focus on something else”.

Since I am still working on the problem I cannot give out a solution, but what I found useful is to “square” things. Everyone likes a square ( or, at least, no one dislike it!); furthermore it gives a feeling of ‘order’, like something you can definitely work against to use some make up on, like a frame, a skeleton^^ Reading something about the stylish stuff probably will help too, some good practices, few tricks and so on^^

1 Like

It’s not a huge problem, as long as you maintain top-down programming principles. For example: my real estate site needs a calculator. Okay, let me slam out some well-named divs and buttons, and write this JS code I have in my head. It works! But dang, that’s some ugly styling. Okay, let’s use Grids to make that nice, make it mobile-first, make it responsive. Now, let’s work on the Map function…

If you wait until the whole site is done to make things pretty, yeah, you’re going to have a bad time. Consider ugly UI a bug. Joel Spolsky writes:

In general, the longer you wait before fixing a bug, the costlier (in time and money) it is to fix.

For example, when you make a typo or syntax error that the compiler catches, fixing it is basically trivial.

When you have a bug in your code that you see the first time you try to run it, you will be able to fix it in no time at all, because all the code is still fresh in your mind.

If you find a bug in some code that you wrote a few days ago, it will take you a while to hunt it down, but when you reread the code you wrote, you’ll remember everything and you’ll be able to fix the bug in a reasonable amount of time.

But if you find a bug in code that you wrote a few months ago, you’ll probably have forgotten a lot of things about that code, and it’s much harder to fix. By that time you may be fixing somebody else’s code, and they may be in Aruba on vacation, in which case, fixing the bug is like science: you have to be slow, methodical, and meticulous, and you can’t be sure how long it will take to discover the cure.

And if you find a bug in code that has already shipped, you’re going to incur incredible expense getting it fixed.

I hope you are looking for an honest answer here. This is just my opinion.
The truth of people in the real world is they look at something first, and have already made half of their decision about it before they even try it.
In my experience (like you, getting the functionality right and showing it before the asthetics are ready) has had me lose out to others who have a flash looking job that has bugs.
People judge things by what they look like first, then how they perform. They know bugs can be fixed. In our business we present things to these people, They know how they want it to work and can hold that vision, but it looks like what it looks like and they cant envisage anything else once you have shown it to them, so sadly the visual impression is critical.
In answer to your question, yes you need to change your thinking and consider the presentation as at least as important as the functionality.
I agree with vipatron that you shouldnt allow bugs thru, but you also shouldnt allow an ugly demo thru, spen a little extra time to get it presentable,

You are 100% correct. UX/UI is a huge field, and people expect things that look good to perform well and the converse, too. It is in this sense that I consider ugly UI a bug. As long as I’m still working on that chunk of code, it’s not a problem. But if I haven’t fixed it before I move on to some other part of the project, then it’s an issue.

I think its perfectly fine to have some projects where you just aim to learn how to get them functioning.

For example here is my calculator

I think its kind of a waste of time to constantly aim for really nice looking projects. If your goal is a designer I could understand that but if your goal is to improve as a programmer then I think its better to just get things functioning. Still… every once in a while you should try to make something look presentable. Which is why for my simon project I aimed to make a nearly perfect replication of the simon project.

1 Like

I don’t know how true this really is. If you look at it from a UX perspective, “flashy” doesn’t mean “usable”, and vice-versa. Having visually pleasing app is important but functionality is 100% more important. Consider websites like Craigslist…it’s ugly as heck but it’s been around for years and nobody cares…because it fills a need with useful functionality. I really could care less if Craigslist looks good while I browse for car parts. It just doesn’t matter.

1 Like

You are of course entitled to your opinion, but as soon as you lose a job because you didnt spend enough time on the presentation then you will understand what I am talking about.

1 Like

You say this, but your calculator’s UI is better than OP’s: Button alignment, button spacing, visual grouping by color for function… Literally slap a well around it, and widen the input on the right edge a smidge, and it is perfect. This is a visual medium, and we are creatives. Craigslist comes from a time when this was the most common style. If you mean that “content is king,” Bill gates agrees with you.

But, we are still creative-types, even though we lack the black turtlenecks and haircuts. We sculpt bits into something processed by the sensory cortex with the largest bandwidth: The visual cortex. When you add in sound, especially with language in it, we’re talking about massive cortical bandwidth. when I look at your “ugly” example, my brain instantly knows what to do with it because of visual features I described above. And if that is you “not paying attention,” you are.

1 Like

You sound like you are speaking from personal experience: Without violating any NDAs, what happened?

I am, its exactly as I mentioned in my first post. I lost a contract to a dev who’s demo was not as functionally complete and well featured as mine, but looked better and had more of a finished look.

In short the client’s opinion was, functionality can be achieved by any old coder but visual appeal cannot, you are either artistic or you are not. An eye for art and beauty is a creative endeavour but code development is more of an assembly thing. (not my words. Non coders clearly dont understand what we do.)
Of course I disagreed with him and argued that I could have also made mine look good in time but I considered “functionality 100% more important than visual appeal” The client didnt see my point. The client has the money, the client makes the decisions.

In fact I discovered the client was right. Making the finish look good is an art and needs to be practised. You can’t just decide one day to make it look great and suddenly its great, just as an artist can’t just decide to paint a masterpiece if he has never painted a masterpiece before. He must practice his art for years getting better with each pass. It is critical that we strive for visual appeal with everything we do so we can get good at it, that way we know we can offer beauty when called for .

I have since developed an attitude that I will not show something that I am not happy with. This goes for visual appeal as well as functionality. Trying to tell someone that it will look better doesnt cut it.

Of course in the greater scheme of things as programmers we strive mainly for functionality, and in some projects there are teams that handle the UI and artwork and finish, and we just need to provide mockups and functional code with rough layouts and no style. As developers we can live like that, we prefer not get bogged down with asthetics when there are algorithms to write and code to test. I get that.
But as freelancers and front end developers we need to be able to offer a finished job. I now consider it a bad habit to disregard the visual finish. You are neglecting an important aspect of your craft if you dont work towards neat and tidy and visually appealing results.

And for the record I dont suggest that 100% functionality is not important, I just say you are not finished the job until it also looks presentable.

1 Like

I think we’re in complete agreement. I refuse to merely meet the test cases on the projects on FCC. I work until I’d accept it for my own uses. Polished, color balanced, good layout, etc… HOWEVER, In the top-down programming model, there is nothing that demands that form has to be done before function. Inside the time spent working on a chunk of application, I often find that I’ll write whatever my mind is on first, and the interplay between UI and function causes me to toggle my attention between the two.

No…that will never happen, because I’m actually good at my job. Regardless, you can make a really beautiful app that has bad functionality, and you’ll never keep users that way. You didn’t bother to refute the fact that there are lots of very popular yet ugly websites out there serving users by the million.

I’m sorry that you lost a client. Clients are not all the same…and no, functionality can not be done correctly by any old coder. I’m in the position now where I’m fixing another contractor’s work. He was focused on looks, but when he got near the end of the project, he couldn’t pull the important details together. Auth code is messed up. Terrible spaghetti code with nice presentation. He had style, but he couldn’t cross the finish line.

Selling and coding are two different things. And presentation is important, but you can’t claim that it’s the most important thing because you lost a single client. Other clients may feel the opposite, “Sure it looks nice, but it doesn’t work”.

You definitely need both skills. But I’ve learned something in the last year - in a lot of situations, perfection is absolutely unattainable. A lot of times I have to ship code I’m not proud of and hope I can come back to it later. That’s because I’m working at a startup with limited funds and tight deadlines on things. We’re flying by the seat of our pants. It’s made me extremely pragmatic. Sometimes “good enough” has to be good enough.

If you’re a coder on a big team, then someone usually takes care of the UI/UX/Graphics/Style. Sometimes, even different people for each task.

But on a small team, (or 1-man team like myself), you’d have to do both. Both are important.

Looks/Style == so the customers keep coming back to the business. After all, the point of these websites is to make money for the client/company. The look/style is also a reflection of the company’s brand.

Functionality == so the customers can do what they need to do. If not, then the company suffers financially if the customer can’t make a sale, make a reservation, etc.

And if the company can’t make a good ROI, then what the heck are they paying you for? They’ll find another developer/designer that can do the job.

A good UI is part of the functionality of the site. It’s not extra! Good design helps users understand, navigate and use your site easily. It’s part of the job. There is no CSS fairy who will come along later to clean things up.

(Remember too that some of your users will be partially-sighted (or even blind), elderly, or disabled.)

Also, even if you are not Michaelangelo, there are certain basic principles of good design which anyone can learn and apply. Failing that, just copy something else. Just find a picture of a nice calculator and copy that.

Lastly, if you enjoying the coding logic of JavaScript more than CSS, try Sass. It allows you to use functions and variables in your CSS and makes it much more fun and concise to write.

2 Likes