Recognizing good design is important for a web developer!

#1

Recognizing, knowing and having an eye for good design is important for a web developer!

Look at these 2 screen grabs of an Apple.com web page.

webdesignapple.png2295×836 408 KB

Both these web pages have EXACTLY the same HTML code, exactly the same Javascript code, and have the same code library/frameworks. They function the same. From a developer’s point of view, they are EXACTLY the same page, “HTML and Javascript code-wise” speaking. Even a git file diff will show nothing amiss.

The only difference is the lack of CSS styling on the left version (or rather, the minimal and ugly CSS styling) vs. the original Apple design on the right (with its original CSS styling).

I believe anyone (i.e. you as the audience, and you as a developer) can notice the difference right away between the 2 web pages above. Both web pages elicit a different “emotional” connection. The left version makes you think you’ve landed on a company that doesn’t care for details. The right version makes you think you’ve landed on a company that is very attentive to the smallest detail. The left version seems to be a fly-by-night company or a fake company. The right version looks trustworthy and professional.

Which web page version do you think will earn the trust of customers to enter their credit card number and buy something.

Now imagine that Apple company is your client or your company’s client. The web page on the left was your final deliverable. Do you think your client will be happy and hire you (or your company) again in the future? – probably not, and you and your brogrammers will soon be looking for a new job.

Then all the programmers will be asking “What went wrong? We’re using the latest coding practices, ES6 baby, JSLint, HTML5 verified and passed all validations, npm, nodejs, with workflow to the max using Babel, grunt, sass, etc. etc. Using Git, Kanban, Agile – we were rocking and producing perfect HTML and javascript code!!!”

Ahhh yes… but CSS and “design stuff”??? I don’t get those, they’re boring stuff. CSS is so Illogical, I don’t get CSS code. Our functional js code programming is more important. Our test-driven development shows all our tests passed, The site works perfectly, that’s the most important thing. See? No problem. You can place an order and checkout successfully… "

:slight_smile: :slight_smile: :slight_smile:

5 Likes
#2

I’d wager money that Apple’s sites are created by a team with separate designers and developers, though. Making things pretty or creating emotional connections isn’t necessarily the in the purview of web programming.

#3

On the flipside, there are too many websites that care only about aesthetics. They look pretty but are otherwise devoid of content or practicality.
I’m getting bored of too many websites looking the same. What looks “cool” now is what I would consider bare minimum. Reminds me of a video I watched where a web designer was comparing his past projects to his current ones. He was saying how much he evolved and was mocking his own work from 10 years ago. All I could think was that his older stuff was way more original and creative.

#4

Of course, that’s a given. Apple would have a separate team. I’m using it as an example because most people know what the real Apple site looks like.
But some clients may not have their own in-house graphics team, or the company you end up working for doesn’t have either. You and 2 other guys are IT.
Re: emotional connection. – As a user when you land on a site, does it give you the hibby-jibbies that this doesn’t look good, does this make me want to do business with this company. Does this site make me excited, interested, etc.

1 Like
#5

Agreed. Websites nowadays seem to “sound” like ClearChannel radios… more or less the same.

In the early years, websites had a wide variety in design, seen as online version of something, like an interactive CD-ROM. Wide variety in approach and design.

Then when big money started coming into the Internet, (e-commerce and such), being “ABOVE THE FOLD” in the design became so important that departments/people fighting for who gets to be on top. Also, some users at that time don’t even know you can scroll down the page. They just click what’s first seen on their small monitor screen. With users running 800x600 on 15" screens, and 17" was rare commodity back then, and 19" monitor even rarer… being on that first screen above the fold was super important. The designs were cramped and tight, and text sizes small.

When the era of big monitors came, it grew sideways like a movie screen. Now designs don’t know what to put on all that extra space. At least users by this time know you can scroll. And we swing to big graphics and text sizes to fill in all the empty gaps.

Then from big giant monitors, we shrink back down again to small phone displays. And designs had to evolve again, as for some sectors, the mobile users make up more % than desktop users. Used to be there’s a separate version for “wireless web”… it started as text only “WAP” sites, and when the iPhone burst into the scene, everything changed again. And everybody had to design for 320px wide screens.

From tiny iPhone displays, to ever growing large displays and tablets and phablets with multitude of sizes and aspect ratios, you can’t design for a specific device anymore. Design had to evolve again. And now instead of having 2 separate sites, we just try to make it work with one set of files by being responsive. Flat design came to be, minimizing pushing large size photo files on expensive data cell networks to the user’s phone.

Who knows what’s going to be next… VR? HUDs? Immersive Huds?

2 Likes
#6

Wow, that’s a great rundown on the history of used web interfaces @owel!
This really emphasizes how frustrating it is to design a user-friendly experience for all users.

#7

I agree with @owel.

When I used to create static websites, I only used HTML and CSS.
During those times my customers went only for looks.
For mom and pop shops, looks are important.
But for bigger companies, it is looks and functionality.
Anyone beginning this field should at least take care of how their portfolio is presented.

#8

It wasn’t Travis from DevTip, was it?

#9

I don’t remember - I’ll have to look at my YouTube history.

#10