How to learn EFFECTIVE web design?

Good afternoon!

So I am a guy who has wanted to learn how to build GOOD websites most of his life. I just never seem to get very far with it, either I get lost in all the different books, websites and opinions that are out there, I get bored with the read 100 pages and then do 10 minutes of actual design work or life happens and I have to focus on other things.

I recently got a couple e-books from Amazon, HTML5 and CCS for Dummies and Unraveling HTML5, CSS3 and JavaScript and have been going through both of them some. Both of them are older books and seem to be out dated with what I see on the web today and both of them have completely different ideas on almost everything.

I am looking for an inexpensive (or free) source to learn web design, and learn it the right way the first time, that is less a text book and more of maybe a project? I am not sure how best to describe that.

I do best with hands on, of course explaining how the hands on works is also important.

Any advice would be greatly appreciated!

Sam

 

I am considering going to the book store and picking this one up:

https://www.barnesandnoble.com/w/murachs-html5-and-css3-anne-boehm/1127921339?ean=9781943872268

It is the newest one I can find with good ratings and being in book format it might be easier to go through, text books in e-reader format are not quite as friendly.....

 

This question actually depends on your definition of "design"; because MOST of what the web development industry calls design? Isn't. NOT EVEN CLOSE!

I'm going to give you some advice that you won't find in any of those books, or in any tutorials. It's lessons based on 40 years of programming, 20 years of building websites, 10 years of working as an accessibility consultant, and a general knowledge of the site-building process from top to bottom... much less the advice I've gotten over the years that worked, whilst omitting or rejecting the things that were utter tripe.

A dearly departed friend summed up good design in a rather brilliant way. "A good design is one the user never notices."

It's a very strange thing to hear, much less wrap your head around... but once you get it? You look at all these artists under the DELUSION they are designers, and suddenly realize just how full of nonsense they are.

It comes down to another concept, a very simple one that another friend who's no longer with us noted: "People don't visit websites for the goofy graphics and animation you hang around the content, they visit for the content!"

...and that's where most people cock-up doing ACTUAL design. It's all about the content. About what the user came to your page to do. It's not about stroking some artists ego, it's not about fancy bling bling nonsense that adds nothing to the user experience, it's about CONTENT and meeting the needs of the USER!

This is why speed matters. It's why visual accessibility norms matter. It's why things like the underlying semantics for non-visual accessibility matters. It's why letting users do what they came to your site to do matters more than almost anything else... and it's why "Content is king".

You can actually screw up a hell of a lot -- just look at all the framework-using ignorant frauds out there and the incompetent trash they vomit up scamming client after client -- if the content is good enough to put up with the excess arsty-fartsy BS... But honestly, content that good is rare. That's why a lot of graphical artsy-fartsy nonsense is thrown at covering up for a lack of content.

Design -- ACTUAL DESIGN -- is NOT art unto and of itself. It is engineering that meets user needs, content creator needs, accessibility norms, obeys specifications and guidelines, and THEN incorporates just enough art it is not hideous. This is why even THINKING about appearance before you have proper semantic markup of your content -- or at minimum a reasonable facsimile of future content -- is utterly and completely back-assward.

It's why using classes to say what things look like -- like every framework out there -- is wrong. It's why screwing around in some WYSIWYG editor is wrong. It's why dicking around editing layers in Photoshop and calling it "design" is so wrong it may never be right again!

Hence why sites like Google and eBay are good design... you want examples of horrifyingly BAD designs? Go to a site claiming to be about the "best in design" such as "awwwards". Yes, many of the sites are pretty, even clean... but they're horrifically badly coded, horrifically worse at accessibility and usability, and are more often than not riddled with garbage that makes the visitor to the page have to work harder to get anything done -- even just reading the content or finding what they came to the site for.

It's this artsy-fartsy form-over-function that can cause most real businesses that pull these stunts to either treat their websites as a "necessary expense" (aka money pit), or if they have no physical product to fall back on end up going under in a year. No joke, stuff like that are a major contributor to why most web startups fail.

Let me give you a stunning example of one of the worst sections of a website I've ever seen from a design perspective:
https://www.blackmagicdesign.com/products/davinciresolve/

Their main site isn't horrifically bad (it has problems, but I can get done what I need done), but when you try to get actual information about DaVinci Resolve, or even *SHOCK* to download / buy a copy, you come to the train-wreck of incompetence and ineptitude I just linked to. Most of the "artists" under the DELUSION they are designers would not -- or likely understand -- what's so wrong about that page.

Where are the download/buy links? This is the page Google takes you straight to.

The page navigation is hidden below the fold by a stupid massive stock image that has dick-all to do with the product. At 1080p and entire screen is wasted when the only huffing thing on the screen is the product name! (for a version that's still in BETA, aka "not for production use"). The single "menu" just shleps you around the single page that wastes in excess of 30+ full height scrolls on a mere 18k of content text (aka omitting menus and disclaimers). The majority of that text being redundant, repetitive, and irrelevant to the task of actually getting the product. Worse, nowhere does the menu imply where to ACTUALLY get it... no, that's buried so far down the page you'd think it was part of the footer.

There is a product, you have a free and a pay version. PUT THAT AT THE TOP. People know what stock images are, you're not impressing anyone by filling the page with them, get rid of them! There is a complete lack of focus on what the user came to do, and more of a focus on bling bling nonsense. That does NOT help move the item in question. Hell, three of the major sections -- at least five screen-heights at 1080p -- of the page aren't even for Resolve itself! They're advertisements for other products that work with it! Utter and complete /FAIL/ at content development as it relates to design; BUT entirely what I've come to expect when a marketing turd who knows dick about the web teams up with an artists deluded about their own skillset. Websites that look pretty, go over well with the suits, and in the end utterly and totally piss off users.

... and that's before we talk about the accessibility failings of how they used REM across the design, but then told REM to sod off by declaring 10px on body. (one of the dumbest things I've ever seen). Hence why the page is not "elastic" failing to scale to user preference without diving for the zoom, a horrible idea when so much space is wasted on massive images visitors really aren't going to give a flying purple fish about, much less the over-use of whitespace to try and hide the poor content quality. That any attempt at responsiveness ranges from little to none -- at least for me as a USER -- only further exacerbates and already painful to use site.

Naturally, that's before we talk the minute and a half page-load thanks to the 136 separate file requests needed to load the site. Spends more time handshaking than it does on transfer, another indication of EPIC /FAIL/ in terms of ACTUAL design.

But because people seem to think that design means "oooh, pretty" you'll see steaming piles like this held up as the pinnacle of good design. It isn't. You know what good design looks like? Craigslist. Google. E-Bay. You say "Craigslist is good design" to most of the typical artists calling themselves "designers" they're peeper will shrink in so far it shoots out their pooper. That simply shows how utterly full of manure they are.

A decade ago when Apple set the trend of "flat design" in motion I'd have included them, but ever since Jobs passed they've been wetting their own bed, undoing everything they were once praised for. The current steaming pile they have being as likely a contributor to their declining online sales as their lacklustre new products and horde of scandals that call their ALLEGED quality into question.

Flat, Flat+, Fat Flat, etc are good design. They're clean, simple, and put the content and usability ahead of goofy animations, goofy stock photos, goofy background trickery, and all the other games people play that do nothing but stroke the artists... ego. I mean something else, but let's say ego.

This focus on form over function in "design" has always been a problem in every field, it's why things like the "engineering code of ethics" exist and why certain "architects" like Rafael Vinoly are as big a bunch of frauds as the "designers" making these fancy websites. The end result are things like the so-called "death ray" buildings because an artsy design was put ahead of public safety. You look up "architectural disasters" and a good two-thirds of them are not shoddy materials, or fault of the contractors, or someone up top cutting corners. NO! It's some art f** who put pretty ahead of basic physics.

Just like in web design. Putting pretty, or expedience, or "I don't have the time and money" ahead of usability, accessibility, or why websites exist. That's why so many of these artsy fartsy pages fail. That's why it pisses off so many users. That's why these things matter... and I guarantee you cut those corners for "ooh shiny" now it WILL cost you more time and money in the long run.

But we live in the "credit mentality" society. Pay more later for something you cant afford now. Snake oil peddlers. carny barkers, and two-bit hucksters everywhere rejoice over this now being the societal norm.

Just like how online scammers exploit people who will take one look at this post, scream "AAAH, WALL OF TEXT", and instead look for the "easy" answers, even when they are bald-faced lies. The typical twitter generation mouth-breather who thinks their cup runneth over when the 144 character limit was lifted are prime targets for those peddling bunko.

 

Thank you very much for your awesome reply to my post. I actually worded the topic improperly, I should have said web development not web design.

I am attempting to learn full stack web development. I bought the book I listed above and also some courses on Udemy (I got the courses at 95% off so a great deal) and am going to work through them all and learn as much as I can. Then probably buy more books and courses.

 

@SimplPrimate

My advice is that you pay close attention to what @deathshadow just laid out. This is the current state of the web. It's sad but you will come to realize how this industry is actually mostly driven by scam artists who call themselves designers/developers/professionals/UI specialists/UX specialists/bootstrap experts (let's add "with XX years of experience") but are actually "full of nonsense" you'd think if most of them still have something inside them that kind of resembles the human kardía!!

I'd say beginner books are still better than most free/paid online tuts and videos. I find them to be more organized and they also usually don't skip the basic concepts, terms, theories, even history among other things that may not seem very important at first glance -- that's why you don't usually see them covered in most online tuts, BUT are actually golden ... at least for me I find them these little bits of information as important. I don't take shortcuts. I don't like to, even in video games. I don't find any enjoyment in using cheat codes. It's all fake and not rewarding. I like to grind instead. But unlike playing video games where you still have to rely on RNG, learning to code doesn't have that ... so technically it should be easier lol

You should have a solid foundation by the time you're done with those materials you purchased and I think that's more than enough to get you started with 2 of the most important things that actually matter: building websites and not becoming a scam artist along the way.

 

I appreciate this insight very much. Unfortunately the whole world is full of scammers and cheaters that will do anything and everything to get ahead, and maybe that is why I am still working at Home Depot for peanuts.... I refuse to be one of those people that takes shortcuts and cuts corners and stomps on everyone else to make sure I am the one in front.

I want to learn all of this correctly and I want to be able to plan and build a full website, taking care of every aspect of it myself. This way I can work on any project, any part of the project, and know I will do it right. Also being able to make sure that those doing any other parts of the project are doing their part the right way.

 

I also will add, I am an avid gamer. I also do not cheat or steal or cut corners in games. I take my time in games and do everything the right way.

 

Do this right and you'll have more time playing video games than fixing bugs LOL

BTW, you don't learn bootstrap. Learn HTML and CSS properly instead cos it is A LOT easier! Only look at bootstrap after doing so ... and that's only to confirm how useless and flawed it is.

 

I hope you could be a perfect web developer
Keep Going

 

Rubbish. Don't listen to this guy. If every website resembled Craigslist and eBay the internet would be stuck in 1996 with a poor user experience. eBay and Craigslist are POOR examples of layout design. They don't give a crap about their layout because it doesn't matter. All they are showing are listings... Their control panels and backend pages are awful. They represent old designers/programmers who have not updated their skills. Don't listen to deathshadow. If you've seen his web site you would know he knows nothing about designing web sites for the consumer.

 

I've been told by credible sources that Strayer University has excellent online courses. You might want to check them out.

 

Why don't you start learning from the easiest things, like find out what is branding and some other stuff.
That's my suggestion for you

 

Karolina, do you have any idea what branding actually is? And how many years you need to work to come up with a decent logo? It's just like telling someone who's interested in law, don't worry, learn to be a doctor first and then it will be easier

There are some pretty nice Udemy course with basic HTML/CSS stuff. There are actually free youtube videos for this, and free tutorial sites that could get you in the right direction.

The best way to learn is to actually DO, so start a small website for yourself and see where it takes you.

 

You can enroll at Free Code Camp's website. It's completely hands on. If you want to jump all in you can enroll for a web development course at udemy for 10 dollars. Lot's of sources available. Just get started ASAP. Best of luck

 

Design is a skilled and Learning to web designing create a passion.There are some basic programming languages & tools need to master like HTML, Notepad++, Photoshop, Dreamweaver, XML, Javascript etc. If you search Google using keywords like web designing tutorials it will surely give you a good idea about the basic. A web designer should the ability to give an amazing look to the website.

 

@deathshadow, I always surprise to see the kind of input you give wherever you participate in the discussion. Once again, I'm impressed with the thoughts you shared above. Will you like to share the secret of your "knowledge & participation stamina"?

 

Knowledge is easy... I'm pushing fifty and have been programming since I was a pre-teen. I had code go into orbit (no joke, RCA 1802 machine language) at an age most people were still sorting out what their dangly bits were supposed to do.

I've seen many technologies come and go, and at the end of the day it ALWAYS comes down to the basics. The underlying languages. The core concepts that will always apply. EVERY generation seems to have to learn that part the hard way, which is why we see the same mistakes rebranded as the latest hotness year after year, decade after decade. I've seen the same type of two-bit poseurs as those who make lame excuses for the bling bling, and every time they're allowed to rule we get the same results... disasters. Economic disasters, engineering disasters, and design disasters. Again, just look at what happens every time an "artist" tries to be a designer. Next thing you know you end up with an Edsel, Nissan Cube, or every automobile ever produced by Mosler. It's how we have death ray buildings, the unsafe engineering atrocity that replaced the WTC, the Charles De Gaulle Airport roof collapse, etc, etc. Hell, we have an entire branch of "art" devoted to such stupidity: "Thomassons". Sometimes it's harmless leftovers from renovations, but most of the time it's reckless public endangerment or somebody doing a half-assed job.

But what can one expect in a society that has forgotten that "ornamental" means useless, or "succulent" means "just beginning to rot"?

As to my "posting stamina" on forums?

https://en.wikipedia.org/wiki/Non-24-hour_sleep–wake_disorder

Well, host of other problems too, but that's the big one that "helps" me have a lot of free time, and why freelancing I have to tell clients to not expect me to fit into their 9 to 5 world.

Also not helping that I'm bolting wide awake at 2AM every day regardless of how my 26 hour sleep schedule lines up. Yes, 26 hour schedule. I go off it, well... I get all the symptoms of sleep deprivation regardless of how much I sleep. Strange part is I've talked to a number of people who seem to be bolting awake around the world at 7AM GMT / 2AM EST... Started out talking about it with some friends locally here in Keene, NH who have all had the same issue where we have no idea why we're all bolting wide-awake at that hour... but now I've got people across the US confirming the same issue. SOMETHING is making a lot of people all bolt awake at the exact same time. Anecdotal for now, it's not like "my friends" can be treated as a serious scientific study.

"The twins keep us on Centaurian time, standard thirty-seven hour day. Give it a few months. You'll get used to it... or you'll have a psychotic episode." -- Zed, MiB

 

I'm not sure how advanced you are based on your post, but I started out on YouTube and continued through online articles and lot's of googling when I had problems. I find YouTube a lot more fun than reading through a dry book.

 

I just started a web design course and I think that the key for learning effectively is to practice as soon as possible what you've learned. And yeah, start from the small things.

 

If you want to learn anything – especially if you want to learn web design – you need to do two things:

-You have to be aware of what you need to learn.
-You have to motivate yourself to actually do the work required to learn those things.
-Web design can be complicated. Once you find out what you need to learn, it can make you too frustrated to be motivated.

Once you see how much work is required, you find yourself paralyzed. Next thing you know, you’re tooling around on Facebook, and not making any progress.

That’s why I want to help you with this quandary. I can’t teach you all of the web design in a single post, but I can get you started with a sustainable system of discovery and motivation, so you can start the virtuous cycle required to learn web design.

That’s why I recommend a two-pronged approach for learning web design:

-Learn just enough to do things
-Do things