loading...

Introduction to Web Design

ziizium profile image Habdul Hazeez ・2 min read

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

The word "Web Design" is an amalgamation of two words namely Web and Design. Web is short for World Wide Web which in turn is abbreviated as WWW. Design on the other hand is a broad field more than worthy of a book, a quick search on the internet will yield thousands if not millions of results depending on your search string but, it boils down to two things:

  • User Interface Design (UI Design)
  • User Experience Design (UX Design)

UI Design is a field of design concerned with designing user interfaces of applications, simple or complex.

UX Design is mainly concerned with designing applications for the user.

We'll discuss both topics later in the series.

The UI and UX design of an application will be useful if they are implemented using code. In the context of the web, the following technologies come to mind:

  • Hypertext Markup Language (HTML)
  • Cascading Style Sheets (CSS)
  • JavaScript (JS)

These technologies are the three musketeers of web design and development with the recent addition of WebAssembly. HTML is used for structure, CSS is for presentation and JavaScript for behavior. We've discussed all three in this series, if you need a quick a refresher you can check out the following links:

HTML, CSS and JS combined can give us a functional web site but, we should take the following into consideration:

  • Accessibility
  • Usability
  • Performance

Web accessibility is a broad topic and we've had books and blog post published on the topic. The theme of web accessibility is one → designing for everyone irrespective of device, network connection or web browser. We'll get into details later in the series. As an heads up you can check out the following resources:

Usability, the name should tell you what this is all about → making your web site usable. It has a really close relationship with accessibility because if your site is not accessible it reduces the chances of its usability.

Performance, don't get me started on the topic. Every developer has a personal preference for making their site fast. We won't cover performance in this series but, if you'd like to research the topic kindly check the following resources:


That's it for the introduction. Next, some history lesson.

FrontEnd Development Zero to Hero (67 Part Series)

1) FrontEnd Development: Zero to Hero 2) What is the Internet 3 ... 65 3) What is the Web 4) Web Browsers 5) Tools for Web Development 6) Introduction to HTML 7) History of HTML 8) The HTML specification 9) HTML Elements and Tags 10) Replaced Element and Void Element 11) Writing Accessible HTML 12) Validating HTML documents 13) HTML Resources and Reference 14) Introduction to CSS 15) History of CSS 16) The CSS Specification 17) CSS Properties 18) CSS Selectors 19) CSS Units 20) CSS Specificity 21) The CSS Cascade 22) CSS Inheritance 23) The CSS Box model 24) CSS Margin Collapse 25) CSS Positioning 26) CSS z-index 27) CSS colors 28) CSS Backgrounds 29) CSS Variables 30) CSS Floats 31) CSS Block Formatting Context 32) CSS Flexbox part 1 33) CSS Flexbox part 2 34) CSS Grid part 1 35) CSS Grid part 2 36) CSS Media Queries 37) CSS Typography 38) CSS Animations and Transitions 39) CSS Naming conventions 40) Writing maintainable CSS 41) CSS References and Resource 42) Introduction to JavaScript 43) History of JavaScript 44) The EcmaScript specification 45) Introduction to programming 46) JavaScript Variables 47) JavaScript Arrays 48) JavaScript Objects 49) JavaScript Numbers 50) JavaScript Conditionals 51) JavaScript Loops 52) JavaScript Functions 53) The Document Object Model 54) Introduction to Ajax 55) JavaScript References and Resource 56) Introduction to Web Design 57) History of web design 58) Site Layouts in CSS 59) Introduction to Responsive web design 60) Introduction to Progressive Enhancement 61) Introduction to User Interface design 62) Introduction to user experience design 63) Introduction to Web accessibility and usability 64) Introduction to Color theory 65) Web design References and resource 66) Series final project 67) Building your career as a developer

Posted on by:

ziizium profile

Habdul Hazeez

@ziizium

I teach and write code with interests in Web Development, Computer Security, and Artificial Intelligence.

Discussion

markdown guide
 

Amazing, keep sharing such great blogs. Ui/Ux plays lead to maximize user engagement and a high conversion rate. Check out my blog to know the right approach for designing a website.

 

Wonderful write up 👍. Respect Senior Dev, I really love the way you arrange and breakdown your article and simple to understand. More wisdom and knowledge..... I appreciate you

 

Thank you very much. Comments like this keeps me going.