Learning HTML/CSS, is it Important for UI/UX Design? Tips and Advice

January 24th, 2015 by Mike Locke | 22 Comments »

In this video I talk about how HTML/CSS fits into the UI/UX Design discipline. I provide some quick tips on getting started learning HTML and CSS.

22 Comments

Kashif Iqbal

January 25th, 2015 at 1:13 pm

Nice to see you back Mike. Totally agree with you. I think to know basic HTML & CSS is important because it will help you for your own freelance business. And most importantly you will know how developers code your designs and I think it is vital.

Great video Mike.

Thank you

Mike Locke

January 25th, 2015 at 4:18 pm

@Kashif – Thanks for watching and supporting my vids.

Andrew

January 26th, 2015 at 6:00 am

Great video Mike, but I think the days when you got into UX design was the best time, now technology is changing rapidly and the field is saturated with designers..I think is good to have more than one skill sets to be high commodity in today society.. I think people with basic design skills should branch off in to coding they will be more valuable in the future…

Mike Locke

January 26th, 2015 at 12:25 pm

@Andrew – Very true in that it was much easier back when I got started, why? because you only had a few things to learn, things were still new and you had time to learn them. Now things are moving at the speed of light pace. But here’s where I still hold to this belief of focusing on one area at a time. I can’t tell you how many times over the past 8 years where I’ve been apart of interviewing people and we (the company I work for) fail to hire someone because of the lack of expertise in a particular field. For example, If we’re looking for a Front-End Developer, we want a Front-End Developer. We’re not looking for someone that knows a little html, css and some javascript. We need an expert Front-End person that eat, breathes and sleeps Front-End Development stuff. When we’re hiring a UI Designer, we don’t want someone that knows some Photoshop, we want someone that is VERY GOOD at user interface design. I can’t express that enough, companies are looking for experts. Be an expert in certain area first, then I would say obviously its ok to dabble in other areas as you naturally will anyway. But focusing on one area is key. Because if you spread your time into many areas, you’ll spread yourself thin and be a master of none, but average in all areas.

Juan Sidberry

January 26th, 2015 at 9:38 am

Hi Mike, thank you for this post; once again very valuable and relevant information. I agree with you that a designer does not need to be a developer. And that being proficient at HTML/CSS is a good skill to have as a Designer.

To add to your point:
I am involved in application development and testing in the broadcast and cable television industry. So, in my experience, there are three major layers related to website, application (app) and mobile-app development:

Front-end (presentation)
– UI (what visitors/users see visualize)
– UX (the way visitors/users use the UI or interface)
Middle-ware (functionality)
– the connection between the front-end interaction and the back-office or server-side systems operations.
– the connection between one UI and Back Office servers/databases –OR– the UI to the another system/subsystem.
Back Office (interactions) – this is all the functionality that happens:
– on the server(s),
– in the database(s), and
– throughout the system(s)

For clarification: a system, generically defined, is a group of server(s), databases(s), and application(s) working together for a singular business purpose.
Examples include (but are not limited to) email, websites, e-commerce, broadcasting & managing Video OnDemand (VOD) content in a secure manner, etc).

So, who focuses on what in our business?
Designers: usually focus on the front-end UI (including HTML/CSS).
Developers: usually focus on the Middle-ware and interaction with that back-office (JavaScript/PHP).
Systems Engineers: usually focus on the back-office (i.e. server-side applications, scripting, databases, and other systems/sub-systems).

In many cases, a designer (as creators of UIs) will not have the skills of a developer (as creators of functionality). Sometimes, a developer will have the skills of a designer just because those skills will help them better execute the development aspects of the UX. But, again, in my experience, many developers do not possess the skill of design creativity or research that a designer possesses. If they do possess these skills, many developers do not have the time or inclination to do the design work, hence the value of the skills brought by a UI/UX Designer. Same thing with Systems Engineers who do not have the time or inclination to do what a developer or designer do but they may actually have the skills of a designer/developer. Real life example is myself, someone who has the skills of all three but do not have the time (and sometimes do not have the inclination) to do the work of a developer or designer. Lately, because of the content on your website & training, I have been very enamoured with the Design aspects of the process.

My point is two-fold:

1 – as we consider our career opportunities and objectives, we should be aware of the disciplines around us and consider the skills-sets involved in the overall process.
2 – good prosperous designers at least understand the skills required of a developers. They do not have to be proficient in those skills but it is good for a designer to understand the SDLC and the process through which a developer must go to accomplish things. Same thing with a developer, that even though they do not do the work of a designer, they must still understand the value of the skill-set and processes that a designer must go through to accomplish things.

In my converging workplace, in an effort to shrink the “time-to-market”, a person who is proficient in design skills (UI/UX) AND development skills (HTML/CSS, HTML5/CSS3, JavaScript/jQuery, Java, PHP/MySQL, etc.) is WAY more valuable and desirable in the workforce.
So, my guidance for my new hires who want to grow in our organization (even those with experience) is to follow these steps of proficiency in terms of technical skills for website or application design and development:

Step-1 = UI/UX designing skills (i.e. beautiful interfaces with consideration to content and UX).
Step-2 = HTML/CSS or HTML5/CSS3 skills (i.e. getting the design to present well in a browser as designed/planned).
Step-3 = JavaScript/jQuery skills (i.e. getting the presentation to function for the front-end user as required).
Step-4 = PHP/MySQL skills (i.e. management of dynamic information and content throughout the website or app).
Step-5 = Java programming (i.e. getting the app/website to interact and function with other systems outside of the immediate app/website/PC/Mobile-device).

Knowing and understanding the skills of other discipline will help you in your discipline, solve-problems, and better communicate overall. You do not need to be an expert in someone else’s skills but, by understanding what they do, you become better at what you do. More importantly, you become more valuable to the organization in terms of contribution and compensation.

I hope this is of some value and adds to the conversation.

All the best Mike. Please keep doing what you do, really appreciate you.

Mike Locke

January 26th, 2015 at 12:32 pm

@Juan – You said a handful…lol. I’ll say this. Though I know a lot of things, I often get asked in interviews what do I hang my hat on. Many times in interviews, they come to learn that I know a ton of stuff, but at the end of the day, they’re hiring someone to fill a particular role. In most cases, its that of a UI/UX Designer. So I often put aside my front-end developer, or my internet marketer hat, or my graphic design hat and tell them that I’m a UI/UX Designer. I love designing interfaces and I love solving usability problems. That’s my bread and butter. Though its reality that if you need a job, you’ll sweep the floors and clean windows if you have to (they know that – that goes without saying) – but 98% of the time, they need an expert to fill a particular role. That’s been my experience at least. Good convo!

Andrew

January 27th, 2015 at 7:00 am

I appreciate the advice Mike and I must say I respect your candor feedback. I have learn a lot of stuff from you over the years; continue doing what you are doing you are a great educator…

Mike Locke

January 27th, 2015 at 1:33 pm

@Andrew – Thanks for the positive feedback. Means a lot when I hear positive feedback, keeps me putting out the vids and content. Much appreciated.

Seth Riley

January 29th, 2015 at 8:04 am

You have such a rich-content video here, Mike. I do agree that it is important to know basic HTML/CSS as UI/UX Designer. I believe every top web designers and developers nowadays started learning the basics. In this way, we should not neglect learning the basics too. Thank you so much for sharing this and giving us tips! Really appreciate your ideas. Keep it up!

Mike Locke

January 29th, 2015 at 2:08 pm

@Seth – Thanks man, appreciate the feedback.

Seth Riley

January 30th, 2015 at 7:27 am

I look forward to be reading more informational blogs from you, Mike. Really love it! If you have time please do take a look at my website and give me opinions about my web design and theme. Do you have any tips to improve it? I would really appreciate to hear from you. Thanks so much!

Mike Locke

February 1st, 2015 at 10:33 pm

@Seth – The site is nice. Love what you’re doing. Keep putting out great content, the site will definitely grow. I think your opening video should have a thumbnail pic of you in that video rather than the faded screenshot. Reason, I think it will show more authenticity. The theme is nice, very clean, Good stuff!

Seth Riley

January 30th, 2015 at 7:27 am

Here’s the link to my website http://www.whitehatmastermind.com

Seth Riley

February 3rd, 2015 at 7:55 am

Thank you so much, Mike! Really appreciate your visit. Yes, I am currently trying to make another podcast now to post this week and planning to do it weekly so people would get updated. I will consider your suggestion of putting thumbnail pic on my video. Thanks so much for that! :)

Mike Locke

February 3rd, 2015 at 2:15 pm

@Seth – The point about showing your pic is all about showing that someone’s home. I talked about this in a old vlog almost 5 years ago (https://www.youtube.com/watch?v=jO2e0mwL-bY) 90% of everything I mentioned in the video is still valid (for the most part). Basically, when you’re in the space of personal branding or internet marketing, its vital to always give the impression upon first visit to the user that someone is running this site. That someone is home, that the site isn’t abandoned, etc. Over the years, we’ve gotten accustomed to visiting sites that may be self-generated (robotic) type sites that run on their own. But showing a quick pic of yourself along with updated blog post is big fix for this issue. This keeps people there for a second longer giving them the opportunity to be engaged or interact with your site/content.

Seth Riley

February 6th, 2015 at 7:12 am

Thank you, Mike. You’ve got a point. Really learning a lot from you. Appreciate it so much. Will take note of everything you said. :) Thanks!

Ron

February 11th, 2015 at 7:05 pm

Hey Mike, great Video man! I agree, you must understand HTML/CSS to see behind the scenes especially those DIVs. Padding,border,absolute, etc.. Thanks as always :)

Tridib Ghosh

April 3rd, 2015 at 4:48 am

Hi Mike,
I have pasted your comment bellow.

Designers: usually focus on the front-end UI (including HTML/CSS).

Developers: usually focus on the Middle-ware and interaction with that back-office (JavaScript/PHP).

Systems Engineers: usually focus on the back-office (i.e. server-side applications, scripting, databases, and other systems/sub-systems).

But in India The third and second (System Engineer + Developer) are merged into single Designation.

I have the knowledge of Graphic Designing & Web Designing excluding JavaScript.

But now a days all are saying that a web designer should have the knowledge of Jvascript & Jquery. Is this truely needed?

Vmaert

February 4th, 2017 at 1:10 pm

Hey there, You’ve done a great job. I will definitely digg it and personally
suggest to my friends. I am confident they’ll be benefited from this web site.