{"id":54612,"date":"2024-09-18T03:06:12","date_gmt":"2024-09-18T10:06:12","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=54612"},"modified":"2024-10-09T05:46:27","modified_gmt":"2024-10-09T12:46:27","slug":"pillars-of-web-design-beginner-guide","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/pillars-of-web-design-beginner-guide\/","title":{"rendered":"7 Pillars of Web Design \u2013 A Beginner\u2019s Guide"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Design-System-for-Developers-1024x512.png\" alt=\"Design System for Developers\" class=\"wp-image-54617\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Design-System-for-Developers-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Design-System-for-Developers-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Design-System-for-Developers-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Design-System-for-Developers.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>So you wanna be a Web Designer huh?<\/p>\n\n\n\n<p>I mean why not? After all, everything is on the web \u2026<\/p>\n\n\n\n<p>As of writing this article <a href=\"https:\/\/www.wix.com\/blog\/small-business-website-statistics\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">100 Million+ companies<\/a> have an online presence through their websites.<\/p>\n\n\n\n<p>But AI is here! Does that mean Web Design is dead?<\/p>\n\n\n\n<p>Not at all! AI is changing the game, yes. AI can assist with the heavy lifting, no doubt. But creativity and empathy? Those are things it\u2019s still catching up on. We need to be realistic about what AI can do and separate the hype from practical applications.<\/p>\n\n\n\n<p>In this beginner\u2019s guide, we\u2019ll cover the fundamentals of web design to get you started on your path to becoming the next Mark Wheeler.<\/p>\n\n\n\n<p>I\u2019ll also show you a case study without overwhelming you so you get a sense of what you\u2019ll actually be doing as a Web designer. Hopefully, this will give you a practical understanding of what it&#8217;s like to work as a web designer and inspire you to learn more.<\/p>\n\n\n\n<p>Let\u2019s go.<\/p>\n\n\n\n<p>Looking for a tool for web design? Try UXPin, an end-to-end prototyping tool that for creating interactive app and web designs that can be developed within minutes. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Try UXPin for free<\/a>.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">What Is Web Design?<\/h2>\n\n\n\n<p>Web design is the creation of visually appealing and functional websites. It involves planning, and designing (<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/web-design-and-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">not coding<\/a>) the structure and layout of a website and its content.<\/p>\n\n\n\n<p>Wait, \u201cand its content\u201d?<\/p>\n\n\n\n<p>Yes, more often than not, a company will not hire a separate content planner which can sometimes mean the designer takes on that responsibility. We&#8217;ll come back to that later.<\/p>\n\n\n\n<p>Just like other design disciplines, web design also has humble beginnings. In the early 90s, websites were primarily text-based, focusing on information. As the web evolved, visual elements like <strong>images and graphics added engagement.<\/strong> Today a website can have hundreds of web elements. <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/button-states\/\">Buttons<\/a>, text, fields, dropdowns, icons, video, sliders, gifs, checkmarks \u2026 you name it.<\/p>\n\n\n\n<p>In web design, like many other fields, we face a common challenge: balancing form (how it looks) and function (how it works). <strong>This is why we have two specialties &#8211; UX for user experience and UI for user interface.<\/strong><\/p>\n\n\n\n<p>Many experts will categorize the web design process into many parts or phases.<\/p>\n\n\n\n<p>But here is the industry standard:<\/p>\n\n\n\n<p><strong>Discovery Phase<\/strong><strong> &gt; <\/strong><strong>IA and Wireframing<\/strong><strong> &gt; <\/strong><strong>Visual Design<\/strong><strong> &gt; <\/strong><strong>Prototyping <\/strong><strong>&gt; <\/strong><strong>Testing<\/strong><\/p>\n\n\n\n<p>While these are important, they&#8217;re not what this post is about. This post is focused on the fundamental\/core principles of web design. Let\u2019s take a look:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The 7 Pillars of Web Design<\/h2>\n\n\n\n<p>Not to be mistaken with <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/web-design-basics\/#h-principles-of-web-design\" target=\"_blank\" rel=\"noreferrer noopener\">Principles of Web Design<\/a>, These are one the first concepts every web designer must be familiar with. These pillars are the foundational elements that ensure a website is effective, engaging, and functional.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pillar #1: Usability (UX)<\/h3>\n\n\n\n<p>Frustration doesn\u2019t have to be vocalized! <strong>Usability in UX Design measures how effectively users can interact with and navigate a website to achieve their goals<\/strong>. Oh, and one of the most ubiquitous terms you\u2019ll get used to as a web designer is actually <strong>\u201cUser Goals\u201d.<\/strong><\/p>\n\n\n\n<p><strong>What are User Goals?<\/strong> Let\u2019s look at an example:<\/p>\n\n\n\n<p>Sarah, a busy working mother, is looking for a birthday gift for her 7-year-old son. During her lunch hour at work, she uses her iPad to surf internet stores. Sarah&#8217;s primary goal is to buy a gift that her kid would enjoy, and her secondary goal is to make the transaction swiftly and effectively.<\/p>\n\n\n\n<p>So, as a Designer, you want to <strong>LISTEN <\/strong>to these queues. If you\u2019re designing an eCommerce store in this example, you\u2019d wanna make sure that there are filters. Filters for gifts for example, and maybe you can go down to specifics of what kind of gifts and for what age.<\/p>\n\n\n\n<p>Amazon has a collection of <a href=\"https:\/\/www.amazon.com\/gp\/most-gifted\" target=\"_blank\" rel=\"noreferrer noopener\">Gift Ideas<\/a> for example. With sub-optimal filters \u2026 take a look:<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfT48B7uLbhl8N4cRedqDRWs1CamE1bYhMhxroluDzwGgjq05T7Jv31TmfZVttNEjDa6xwodDBNoRp_U7LuU8oq0pDrQozmWrcXMR-E5gGzHWiIhzHwHb7C1l32Pdzn5kANavb40TGGkBLokNXVqGHKKeny?key=WBBR-QamACb0Zp4WnIPPSg\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p>On this page, Shara could filter by product category, but it&#8217;s hard for her to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/advanced-search-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">find filters for age range or toy color<\/a>. And since she\u2019s browsing on a tablet with weak eyesight, the font used in the filter section can be difficult to read &#8211; these are the kinds of usability issues that you try to solve.<\/p>\n\n\n\n<p>So, To solve them you have to KNOW the user. There is a simple three-step process approach to getting to know the user:<\/p>\n\n\n\n<p><strong>Define Pain Points<\/strong><strong> &gt; <\/strong><strong>Create Journey Maps<\/strong><strong> &gt; <\/strong><strong>User Personas<\/strong><\/p>\n\n\n\n<p>We\u2019ll use <a href=\"https:\/\/www.behance.net\/gallery\/150475009\/Moldo-To-the-Dreamers\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">MOLDO<\/a>: a sample case study project I was involved in as an example. \u201cMoldo\u201d is an online shopping app for furniture and interior ware.<\/p>\n\n\n\n<p>To understand our users&#8217; needs, my team conducted research through surveys. We analyzed the results, prioritized the feedback, and identified the most common <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-pain-points-in-ux-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">pain points <\/a>that users were experiencing:<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeIn3xk0eTdDSU3FYkMQF9tI4wy8W9glIk9Jujuyho8tBQwWwPukR6m0tjxA1ZfoCdwnUbuJLjhbXC2RDRjdB-CF_FSemGrY7SmAi2wOxuF0HDa2rAL5byPDOyHl2i20HS0avaNPOFUh39nEd9g9zaCBUg?key=WBBR-QamACb0Zp4WnIPPSg\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p>Then, we analyzed the major phases the user will have to go through on the App, and for each phase, we mapped user emotions, actions, and opportunities.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdbQPFt-ERkONLgn1FXmj0g3Qs3UIwTBqtYmrLa-5WAeRDin9a3zNVSc6qa_tBie3QLS4_Of1vxAHfC8AdQgu-UxIpJ57vs3_iKI_T_mIoqKiXDjhKeHRPKfLjvjGdVAt9FZU3zk586FMcAewUsRBOQY7Y?key=WBBR-QamACb0Zp4WnIPPSg\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p>And finally, we have our personas \u2026<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfqNiEPuZcAb3Nmv6z6uB5gMwRn2ku1JmL9DEGZNgRJ1bi7fIJVq3OU_URfuA2UA8-2VmnsZN4_EuRCUWmaCkHnOJk6onNhQleIDLgv5eyz2TE4pKuee6SkeZoqo5ubMgR1ePhKWv7D3fC4dTb12H6FXwU?key=WBBR-QamACb0Zp4WnIPPSg\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p><strong>Great UX design should consider the following factors:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>User&#8217;s Goals.<\/strong> As we already saw above: these are <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-needs\/\" target=\"_blank\" rel=\"noreferrer noopener\">User Needs<\/a>.<\/li>\n\n\n\n<li><strong>User&#8217;s Emotions<\/strong><strong>.<\/strong> How does the user feel when using the product?<\/li>\n\n\n\n<li><strong>User&#8217;s Behavior and Actions. <\/strong>How does the user <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-testing-prototypes\/\" target=\"_blank\" rel=\"noreferrer noopener\">behave when using the product?<\/a> Are they able to <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/how-to-do-task-analysis\/\" target=\"_blank\" rel=\"noreferrer noopener\">complete their tasks efficiently<\/a>?<\/li>\n\n\n\n<li><strong>User&#8217;s Context<\/strong><strong>.<\/strong> Where and how is the user using the product? Are there any environmental factors that affect the user&#8217;s experience?<\/li>\n<\/ul>\n\n\n\n<p>You will need to put yourself in the user\u2019s shoes so that ultimately you can be able to create an intuitive design.<\/p>\n\n\n\n<p><strong>What is intuitive design? <\/strong>A design that is<a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-friendly-what-does-it-mean-and-how-to-apply-it\/\" target=\"_blank\" rel=\"noreferrer noopener\"> easy to use and understand<\/a>, even for first-time users. This means that the product should be developed to align with the user&#8217;s expectations and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/should-user-experience-designers-be-aware-of-psychology\/\" target=\"_blank\" rel=\"noreferrer noopener\">mental models<\/a>.<\/p>\n\n\n\n<p>Here is another example \u2026<\/p>\n\n\n\n<p>Our <a href=\"https:\/\/www.uxpin.com\" target=\"_blank\" rel=\"noreferrer noopener\">home page<\/a> has a clear and prominent call to action &#8211; a form that explicitly tells users what they need to do next.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdfzUV9mBZcSOkdhavbhLKn2n6N6lU06HbVcsUjqjszGaW2jBFYsGE0Ymi-Cm4PP6TSk-uWYHzGhpP2_GZwoaZhcFrBnIx3bMHnpVo8hQw8NDlhshGMXlzivlZ7X-tXcAumfIVYtenrggCwXgTu_3Fo36U?key=WBBR-QamACb0Zp4WnIPPSg\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p>The text clearly states the purpose of the product, which is to design UI with code-backed components. It is concise and free of distractions, making it easy for the user to focus on the main message and CTA.<\/p>\n\n\n\n<p>The initial CTA is <strong>&#8220;Try for free&#8221;,<\/strong> which guides the user to take action and try the product. And even tells the user that we prefer their work email.<\/p>\n\n\n\n<p>Again, this is why UX always comes before UI. UX is the why, and UI is the how.<\/p>\n\n\n\n<p>Make it functional, then make it pretty.<\/p>\n\n\n\n<p>We&#8217;ve written extensively on this topic in our blog &#8211; like <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/heuristic-evaluation-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Heuristic Evaluation<\/a>, and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/the-beginners-guide-to-capturing-ux-requirements\/\" target=\"_blank\" rel=\"noreferrer noopener\">UX Requirements<\/a> feel free to browse around after you finish reading this one.<\/p>\n\n\n\n<p>We even have a free ebook: <a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/guide-to-usability-testing\/\" target=\"_blank\" rel=\"noreferrer noopener\">Guide to Usability Testing<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pillar #2: Design (UI)<\/h3>\n\n\n\n<p>UI Design focuses on the visual elements of a product, based on UX research findings. Visual elements are the ones a user directly interacts with, such as <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/button-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">buttons<\/a>, menus, and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/typography-in-web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">typography<\/a>.<\/p>\n\n\n\n<p>Its primary objective is to ensure that these interfaces are not only visually appealing but also user-friendly, enhancing overall satisfaction and efficiency in task completion.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcO8fGmvKIDVmzQp2zITGr3qPRMmuojkMGcVMvSOuGKfsZRkjSPVuWcnkC05d7a0DhM12wgPwhnBEHdL0qBq-wSBsQKiIiTj9oFDc2E5TcpavWT_exrttrwoQXO8SvyraYGc03OhBwR4PRoVmVnZ2Osq38b?key=WBBR-QamACb0Zp4WnIPPSg\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p>I\u2019ve been a UI Designer for half of my career, and let me tell ya, it\u2019s fun. We worry about design movements, hierarchy, layout, <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/interaction-design-its-origin-and-principles\/\" target=\"_blank\" rel=\"noreferrer noopener\">interactions<\/a>, and so on \u2026<\/p>\n\n\n\n<p>To start with, There are three types of UI Elements, Input, Output, and Helper elements, we cover them broadly <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-interface-elements-every-designer-should-know\/\" target=\"_blank\" rel=\"noreferrer noopener\">in an article about UI elements<\/a>, but let\u2019s look at them quickly:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Input elements<\/strong><strong>. <\/strong>These elements allow users to enter data into the interface. Examples include text fields, checkboxes, radio buttons, drop-down menus, and sliders.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Output elements<\/strong><strong>. <\/strong>These elements display information to the user. Examples include labels, text, images, and icons.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Navigation elements<\/strong><strong>.<\/strong> These elements allow users to move around. Examples include buttons, links, menus, and breadcrumbs.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">The UI Design Process<\/h3>\n\n\n\n<p>As I mentioned before, UI Design mainly involves the visual design and prototyping (and testing phase shared between UX and UI) part of the design process.<\/p>\n\n\n\n<p>Depending on who you ask, <a href=\"https:\/\/www.uxpin.com\/studio\/ui-design\/what-is-a-wireframe-designing-your-ux-backbone\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Wireframing<\/strong><\/a> is part of UI design. Wireframes are the blueprints for your interface. So it goes like this:<\/p>\n\n\n\n<p><strong>Wireframing<\/strong><strong> &gt; <\/strong><strong>Sketching<\/strong><strong> &gt; <\/strong><strong>Lo-fi Prototype<\/strong><strong> &gt; <\/strong><strong>Hi Fidelity Prototype<\/strong><strong> &gt; <\/strong><strong>Mockup<\/strong><\/p>\n\n\n\n<p>But for brevity, we\u2019ll stick to:<\/p>\n\n\n\n<p><strong>Wireframing<\/strong><strong> &gt; <\/strong><strong>Sketching<\/strong><strong> &gt; <\/strong><strong>Prototyping<\/strong><\/p>\n\n\n\n<p>Usually, the UX Designer would provide the IA (Information Architecture) of the app\/website, and based on that we can start sketching out the project design scope.<\/p>\n\n\n\n<p>IA is just a fancy term meaning a graph or map of how the content and pages should be structured, and it usually looks something like this:<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeYEUk9wUH9c0jtWYGUxc7seM0kDRIeFJpLOLmjSO40fjJTtBCeJLfwWl5A_9lKSsDHnSsVl9N7ANOLUZV1PWpMlKf_CZrphYwGn9v6vBWi1zyASCmzAflE6ZJEwzuuLf5RMF4jVC5vj_ZrROHSDbXctpZb?key=WBBR-QamACb0Zp4WnIPPSg\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p>But it\u2019s the foundation of Wireframing which is the next step.<\/p>\n\n\n\n<p>We use wireframes to define page elements (buttons, forms, images), Arrange content (headers, sidebars, main content areas), and Show basic interactions (click paths, transitions).<\/p>\n\n\n\n<p>You can create wireframes by hand (on paper) or digitally using tools like <a href=\"https:\/\/www.uxpin.com\/uxpin-vs-figma\" target=\"_blank\" rel=\"noreferrer noopener\">UXPin or Figma<\/a>.<\/p>\n\n\n\n<p>Getting back to the MOLDO example, here is what the wireframe looked like:<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfQbzgW3s_LkUImVMUdLq7k3jR050csi26wu0LaNpLbeFXP2udo4SXLCUypkxEGyNN9daMFa00IVSN7YaI9EOdTcgTAqEsjZ_DUG7NEZUivkr30D18G-62eUcT6vI2mHsWxve4W4sW12fqnd_024z8iuTga?key=WBBR-QamACb0Zp4WnIPPSg\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p>For most ecommerce products we found that <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-mobile-navigation\/\" target=\"_blank\" rel=\"noreferrer noopener\">the navigation<\/a> was visually not inviting or was bulky. So we wanted to make sure that we have our UI balanced between obvious but not lame \u2026<\/p>\n\n\n\n<p>Beyond the optimized design itself, We also adjusted the size of buttons to be particularly bigger than what\u2019s usually a standard in mobile apps.<\/p>\n\n\n\n<p>The point of having a wireframe is to change and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/design-iteration-process\/\" target=\"_blank\" rel=\"noreferrer noopener\">iterate<\/a> to your heart&#8217;s content. As you progress through the design process there will naturally be less wiggle room so this is your way of telling your clients, \u201chey \u2026 here is what I\u2019m thinking\u201d and gathering feedback.<\/p>\n\n\n\n<p><strong>As you can see the wireframe stage makes it easy to know what goes where.<\/strong><\/p>\n\n\n\n<p>Next, you flesh out the Lo-fi and Hi-fi versions. Lo-fi usually is the flat but colored version of the wireframes. And Hi-fi almost looks like the real product. Sometimes we simply use a prototype and then a mockup.<\/p>\n\n\n\n<p>You can see what a visual design prototype might look like in a design tool, with all the visual elements and layout finalized.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcnkfr9xtDZbTUMAbB4RhDiUM0GSzsuAmM8NZDkU4KgOZj2ZmoK7cvBJYUgd_1fv-Y5cB-R6chjE9V3nLtEIPlQyqq-dKJ6jMU_dAVAhtRihy5G-MS-LRX_OWy8KV2pLtd0YGOwUDKp1plNSSxSvqWCgZQ?key=WBBR-QamACb0Zp4WnIPPSg\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p>And then finally the polished Mockups \u2026 yay!<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdhzjRRWq0K8nIKUj0NdutY7KWG6u1pjsdd2jjTUfdHKNPte7YTwESivZ0tR-6cgS6EMstZi8jZKDbX491fN06Md0mLFTwylv_-tff7rk8aAKFOCN5amuzULbb6B_JPLBu5KYXtPIV-4ZFksmdVglrpuVQ?key=WBBR-QamACb0Zp4WnIPPSg\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p>As UI Designers, we don\u2019t only design how elements look but also how they behave during interactions. <strong>AKA animations.<\/strong><\/p>\n\n\n\n<p>And I\u2019m not necessarily talking about transitions or motion animation.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-animation-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">Animations<\/a> that guide and interact with the user in a way that feels natural, but consistent. That gives users feedback about their actions, so they know what&#8217;s happening.<\/p>\n\n\n\n<p><strong>We call these <\/strong><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/microinteractions-for-protypes\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>micro-interactions<\/strong><\/a><strong>. <\/strong>are small, purposeful animations triggered by specific user actions (clicking a button, hovering over an icon \u2026 so on).<\/p>\n\n\n\n<p>For example: When you click a button, it slightly depresses\/shrinks to give visual feedback that your action has been registered.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">UI Motion Principles<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Consistency. <\/strong>As a user, I<strong> <\/strong>should experience familiar motion patterns across different parts of an application. I should be able to predict how interactions will unfold. If a button slides in from the right on one screen, it should do the same elsewhere.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Hierarchy. <\/strong>Primary actions (like submitting a form) deserve more attention than secondary ones (like canceling an operation). That\u2019s just an example, but prioritize animations based on their importance within the user flow and <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/web-structures-explained\/\" target=\"_blank\" rel=\"noreferrer noopener\">website structure<\/a>.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Realism. <\/strong>UI animations should mimic real-world physics to feel natural. Depending on what you\u2019re going for Objects should accelerate when they start moving (ease-in) and decelerate when they stop (ease-out).<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Context. <\/strong>Animations should align with the context and purpose of the interaction. A loading spinner during data retrieval makes sense. A playful bounce effect on a serious error message might not.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Pillar #3: Accessibility<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/accessibility-apps\/\" target=\"_blank\" rel=\"noreferrer noopener\">Accessibility<\/a> in UI design goes beyond just color. Color can not be used as the only way to convey information. Surely, many other disabilities are not related to the human eye.<\/p>\n\n\n\n<p>According to a survey, more than <a href=\"https:\/\/www.cdc.gov\/ncbddd\/disabilityandhealth\/infographic-disability-impacts-all.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">1 in 4 adults<\/a> in the United States have some type of disability. That\u2019s a population of more than 83.5M!<\/p>\n\n\n\n<p><strong>Accessibility refers to whether a product or service can be used by everyone, regardless of their abilities or disabilities.&nbsp;<\/strong><\/p>\n\n\n\n<p><strong>Read: <\/strong><a href=\"https:\/\/www.w3.org\/WAI\/standards-guidelines\/wcag\/\" target=\"_blank\" rel=\"noreferrer noopener\">Web Content Accessibility Guidelines<\/a><strong> (WCAG)<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcfXMvVyf2e-x-2P-pkRbQytl5DJ6h1XkpqIolLlU_VQKCCUyYUbxDOyUMb9WtqyuiUiDiW5G8K0TTPkYvRvpB7t5I4H7LtW2ljSKJifo9y5OfKCsUMXR4tXnvdXSfN46G7AnR1Nv7Sx1m1_uL5jY9SPNY?key=WBBR-QamACb0Zp4WnIPPSg\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p>Check out the full list of <a href=\"https:\/\/www.w3.org\/WAI\/test-evaluate\/tools\/list\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">tools curated by W3.Org<\/a>.<\/p>\n\n\n\n<p>According to the WCAG, a website should do the following to be accessible:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Perceivable.<\/strong> Content should be presented in ways that users can perceive (e.g., through text, images, or sound).<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Operable.<\/strong> Users should be able to navigate and interact with content (e.g., using keyboard shortcuts or voice commands).<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Understandable<\/strong>. Content should be clear and easy to comprehend (avoid jargon, provide instructions, etc.).<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Robust.<\/strong> Content should work reliably across different technologies and devices.<\/li>\n<\/ul>\n\n\n\n<p>WCAG also has Levels of Conformance ranging from <strong>A to AA and AAA.<\/strong><\/p>\n\n\n\n<p>At UXPin we are very <a href=\"https:\/\/www.uxpin.com\/studio\/accessibility\/\" target=\"_blank\" rel=\"noreferrer noopener\">serious about accessibility<\/a>. With UXPin\u2019s accessibility features, you can design for all users, both disabled and nondisabled.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfsvxRomgeFeM8Jol5WY4gVKeV-u9tgQqlicn_izei8ZCkAwUiUHORcN2r6xVJJU-wLDWdscx95aYd3XyY1MgARMNo6joe7raR3GdliNt7qDNGUfLT0JAz6NpTsSJHwLfeOmnh4YaKEuHbNlp21F5xkZI6O?key=WBBR-QamACb0Zp4WnIPPSg\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p><em>Image Source: <\/em><a href=\"https:\/\/web.dev\/static\/learn\/accessibility\/aria-html\/image\/the-aria-augmented-access-70b111217be0f_856.jpg\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><em>Web.Dev<\/em><\/a><\/p>\n\n\n\n<p><strong>Accessibility Ground Rules:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Color Contrast and Text Legibility. <\/strong>Poor color contrast can make text difficult to read, especially for people with limited vision or color blindness. The solution is to use high-contrast combinations (e.g., dark text on a light background or vice versa). Avoid relying solely on color to convey information. Use additional cues like icons or patterns.<\/li>\n<\/ol>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>Alternative Text (ALT Text) for Images. <\/strong>People who use screen readers rely on ALT text to understand images. ALT text Describe the image\u2019s purpose or content concisely.<\/li>\n<\/ol>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>Keyboard Navigation and Focus States. <\/strong>Some users rely on keyboard navigation (e.g., screen reader users or those with motor impairments). All interactive elements (buttons, links, form fields) should be keyboard-navigable.<\/li>\n<\/ol>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><strong>Semantic HTML and ARIA Roles. <\/strong>Proper HTML structure aids screen readers and other assistive technologies. Learn more about <a href=\"https:\/\/web.dev\/learn\/accessibility\/aria-html\" target=\"_blank\" rel=\"noreferrer noopener\">ARIA attributes<\/a> (Accessible Rich Internet Applications).<\/li>\n<\/ol>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li><strong>Captions and Transcripts for Multimedia. <\/strong>Deaf or hard-of-hearing users rely on captions for videos and audio content.<\/li>\n<\/ol>\n\n\n\n<ol start=\"6\" class=\"wp-block-list\">\n<li><strong>Forms and Error Handling. <\/strong><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/form-input-design-best-practices\/\" target=\"_blank\" rel=\"noreferrer noopener\">Forms<\/a> are critical for user interaction, but poorly designed forms can be frustrating. Label form fields clearly and provide <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/user-error\/\" target=\"_blank\" rel=\"noreferrer noopener\">error messages<\/a> in a perceivable way.<\/li>\n<\/ol>\n\n\n\n<ol start=\"7\" class=\"wp-block-list\">\n<li><strong>Test with Real Users. <\/strong>Real-world feedback is invaluable. Conduct usability testing with diverse users, including those with disabilities.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Pillar #4: Layout<\/h3>\n\n\n\n<p>Layout refers to the arrangement of visual elements within a given space. It is part of UI primarily but decided by factors in UX.\u00a0 A well-designed layout enhances user experience by <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/organizing-information\/\" target=\"_blank\" rel=\"noreferrer noopener\">making content easy to find and understand<\/a>. Here are some common types of website layouts:<\/p>\n\n\n\n<p><strong>Grid Systems. <\/strong>In a <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/ui-grids-how-to-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">grid-based website layout<\/a>, elements like margins, flowlines, rows, columns, gutters, and modules work together to create a structured and visually appealing design. Margins define the edges, flowlines guide reading, rows and columns organize content, gutters provide spacing, and modules combine elements into organized groups.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfrbM_aSrgqtszNotaxc4VQFQuE4N-yY_zj5IawF4531bGVeYUvnqg6fcVJH2HqIkUcdGCgqIxs6q8pyy5h6OOVjAD5BLPOjGBLIQD_RkzfJJ5J9BcPKzDgGzoE3faJkdAPHwvMiVkKXKYXNaDEoxC5mnKk?key=WBBR-QamACb0Zp4WnIPPSg\" alt=\"\"\/><\/figure>\n\n\n\n<p><strong>Box Model.<\/strong> The box model represents how elements are rendered on a web page. It includes four components: margin, border, padding, and content.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXeRPLqYxcerh737wLWRJefV59VzhJUwV6gOqzC4a6WOE_Qz_JRm1tCuH8hrHppQ8V-gJzQVqJUTozhpW7-o_Dk410SuLskbyLbxcOKhYR5t-yhRRAJ9C6Bdx8POSCsyAj18syxrLtET1TDg02-6qbVMeIk?key=WBBR-QamACb0Zp4WnIPPSg\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p><em>Image Source: <\/em><a href=\"https:\/\/www.w3schools.com\/css\/css_boxmodel.asp\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><em>W3<\/em><\/a><\/p>\n\n\n\n<p><strong>Flexbox.<\/strong> A powerful layout mode that allows flexible and responsive designs.<\/p>\n\n\n\n<p>Key properties include display: flex, flex-direction, and justify-content.<\/p>\n\n\n\n<p>Using a flexbox system is perhaps the best choice for managing responsive layouts.<\/p>\n\n\n\n<p>Here are the primary types of website layouts, that provide a solid foundation for understanding web design principles:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Fixed Width Layout. <\/strong>The content area has a fixed width, regardless of the screen size.<\/li>\n\n\n\n<li><strong>Fluid Layout. <\/strong>The content area expands or contracts to fit the width of the browser window.<\/li>\n\n\n\n<li><strong>Responsive Layout.<\/strong> A combination of fluid and fixed layouts, using CSS media queries or clamp functions to adjust the layout based on the screen size.<\/li>\n\n\n\n<li><strong>Adaptive Layout. <\/strong>Similar to a responsive layout except it\u2019s specifically arranged in the most suitable way for each device. (Separate layout for each).<\/li>\n\n\n\n<li><strong>Grid Layout. <\/strong>A flexible layout that uses a grid system to organize content into columns and rows.<\/li>\n<\/ul>\n\n\n\n<p>Learn more about <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/Common_questions\/Design_and_accessibility\/Common_web_layouts\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">website layouts<\/a> and how they affect user psychology.<\/p>\n\n\n\n<p>A fundamental principle that greatly impacts layout is <strong>balance<\/strong>, which web design relies on. Balance is all about distributing visual elements in a way that creates a sense of harmony.&nbsp;<\/p>\n\n\n\n<p>There are <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/symmetry-vs-asymmetry-in-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">two main types<\/a>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Symmetrical Balance:<\/strong> Mirror-like fashion, creating a sense of formality and stability. This is often used in traditional designs and logos.<\/li>\n\n\n\n<li><strong>Asymmetrical Balance:<\/strong> Arranged in a way that is not symmetrical but still feels visually balanced. This can create a more dynamic and interesting composition.<\/li>\n<\/ul>\n\n\n\n<p>Another thing to keep in mind when working with layouts is <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-negative-space-in-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Negative Space<\/a>. This is an overlooked design element that differentiates between a noob and a pro.<\/p>\n\n\n\n<p>Did I say \u201cdesign element\u201d? Yes!<\/p>\n\n\n\n<p>In fact, thinking about negative space as an active element in web design will help you understand how layout works. It\u2019s obvious that when a webpage is cluttered with too many elements, it becomes overwhelming for users.<\/p>\n\n\n\n<p>But what is the point where it stops becoming clutter?<\/p>\n\n\n\n<p>For example, look at this:<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdQVBCRrk6oHNROaUKXNMkTL4l7kRhNyiYzTRA2lF-LeWrJoAwjjjB0ui51xPZddcfRKzTxIhnkfKWztAXYyFOcWAfkjhWDJFpgmZkgw2aMGhtkq_W4lXJ0xiH4kqCyhA59mMScfJMUNHY4ElP3mPWiIy8w?key=WBBR-QamACb0Zp4WnIPPSg\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p>Unless you&#8217;re intentionally aiming for a busy, maximalist aesthetic and it makes sense for your audience, this approach can be detrimental to focus.<\/p>\n\n\n\n<p>Modern WebUI is almost always incorporated with <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/what-is-negative-space-in-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">negative space<\/a> like this:<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdz-UO1MXw3aV7HUrBQ6DbmdjSlsY5MMwRflbO_bIhmRcT2kj5pNCvLy3Xij8LYNP8ZkLbiCb2BEEKzWS6sVh3GTm2TRzmTjY4mZNyOB0CeKaZYsnNF2Cm_zrr_X-ta6TTH_Mv_cFy547L3cVzxShZ-WkU?key=WBBR-QamACb0Zp4WnIPPSg\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Pillar #5: Typography<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/typography-management\" target=\"_blank\" rel=\"noreferrer noopener\">Typography<\/a> is the art and technique of arranging type\/letters, numbers, and symbols to make written language legible, readable, and visually appealing when displayed.<\/p>\n\n\n\n<p>It\u2019s an entire field of its own.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXcN4vZ0UOo1pNTA9_vpDzLL-m4KUSMWDwYt_46eo3OgtmBilgWJnccD--7OJvUbBTlZi9mQk-5I5JYLZdHs3BpuLcZlupGVwCvJQumrGG1amY2exIWexbLY1m64JfXdRkWgJ10RJkaQ1a2g8Jlsr2uCFeW4?key=WBBR-QamACb0Zp4WnIPPSg\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p>But in our context of web design, it involves <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/typography-in-web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">choosing fonts<\/a>, adjusting the spacing between characters (kerning), the space between lines (leading), and the overall layout of the text. Good typography guides your eye across the page smoothly without making you think too much about it.<\/p>\n\n\n\n<p>It\u2019s a big deal because it\u2019s directly connected to clients&#8217; ROI. So let\u2019s take a look at&nbsp; some typography basics:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Font Families<\/h3>\n\n\n\n<p>A font family is a group of fonts that share a common design style. Think of a typeface as a broad category of fonts that share a unified look and feel. Within a typeface, you&#8217;ll find individual fonts that vary in size, weight, and style.<\/p>\n\n\n\n<p>Font families are classified into types: <strong>Serif, Sans-Serif, Monospace, Display and Handwriting.<\/strong><\/p>\n\n\n\n<p>Let\u2019s focus on the first three:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Serif Fonts. <\/strong>Have small strokes (called serifs) at the edges of each letter. They exude formality and elegance. Think Times New Roman, Georgia, and Baskerville.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sans-Serif Fonts.<\/strong> Mostly used on UI and are sleek and modern. They don\u2019t have those little serifs just clean lines. Arial, Helvetica, and Open Sans.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Monospace fonts.<\/strong> Give every letter the same fixed width. Fonts like: Courier New, Consolas, and Inconsolata.<\/li>\n<\/ul>\n\n\n\n<p>I once designed my own custom font, although I loved Proxima Nova. It took two months and gave me an insight into what works well on the web. It might even be one of the factors that I was nominated for Awwwards.<\/p>\n\n\n\n<p>And from that experience, here are some tips that I\u2019ve learned:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use <s>regular<\/s> medium font weights and anywhere between 18-21px for body text.<\/li>\n\n\n\n<li>Don\u2019t use more than two types of fonts. And always stick to one font for the body.<\/li>\n\n\n\n<li>When choosing a font for headlines or titles, feel free to explore more expressive options. Bold, playful, or unique fonts work well here.<\/li>\n\n\n\n<li>Use a clamp function for responsive text.<\/li>\n\n\n\n<li>Always use a different font style for links (usually bold or underlined).<\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/8-typography-tips-for-designers-how-to-make-fonts-speak\/\" target=\"_blank\" rel=\"noreferrer noopener\">More typography tips<\/a>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Web-Safe Fonts<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.xrilion.com\/blog\/website\/what-is-a-web-safe-font\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Web-safe fonts<\/a>, also known as system fonts, are pre-installed on most operating systems. These fonts are readily available to users without requiring any additional downloads.<\/p>\n\n\n\n<p>These should only be used as either a fallback font or if your client only wants raw performance and doesn\u2019t give a dime about custom fonts. Or if other overarching elements on the site compensate for it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Google Fonts<\/h3>\n\n\n\n<p><a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Google fonts<\/a> are hosted by Google, making them easy to incorporate into your web projects. You can use the API or directly download them and include them in your projects.<\/p>\n\n\n\n<p><strong>HTML Example:<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;head&gt;\n\n&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/fonts.googleapis.com\/css?family=inter&quot;&gt;\n\n&lt;style&gt;\n\nbody {\n\n\u00a0\u00a0font-family: &quot;Inter&quot;, sans-serif;\n\n}\n\n&lt;\/style&gt;\n\n&lt;\/head&gt;\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">Typeface Anatomy<\/h3>\n\n\n\n<p>I think while we\u2019re at it it\u2019s good for you to familiarize yourself with some common terms. Like <strong>\u201cGlyphs\u201d.<\/strong> So here is a quick rundown:&nbsp;<\/p>\n\n\n\n<p>Each letter, number, punctuation mark, or symbol is a glyph. X-Height is the height of lowercase letters (excluding ascenders and descenders).&nbsp;<\/p>\n\n\n\n<p>Ascenders and Descenders? They are upward-bound strokes of lowercase letters that extend beyond the x-height. The baseline is the invisible tightrope where letters stand. It\u2019s their foundation the ground level.<\/p>\n\n\n\n<p>Kerning is the space between individual characters. And tracking controls the overall spacing across a block of text.&nbsp;<\/p>\n\n\n\n<p>Here is a better look:<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXfu_evZvVZjoNENl0EqsSOc5YK4tSNZrWQCjOd5HvKZD0OCQcvIKex163lYGNni-YIlTWqyKXUeTL4_45RMRyafjTkGxSuLdXY_osaR-vCxXrRG4cwkv_paC84SuRhCbpruNUdglZ-XprkfwtqwIB9WSUjR?key=WBBR-QamACb0Zp4WnIPPSg\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p><em>Image Source: <\/em><a href=\"https:\/\/yesimadesigner.com\/get-familiar-with-type-anatomy\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><em>Yesiamadesigner<\/em><\/a><\/p>\n\n\n\n<p>And again you can learn in more detail about <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/typography-in-web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">typeface anatomy<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pillar #6: Responsiveness<\/h3>\n\n\n\n<p>Responsive Design (not to be mistaken with <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/responsive-vs-adaptive-design-whats-best-choice-designers\/\" target=\"_blank\" rel=\"noreferrer noopener\">Adaptive Design<\/a>) is a web design approach that ensures a website adapts seamlessly to various screen sizes and devices<\/p>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/best-practices-examples-of-excellent-responsive-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Responsiveness<\/a> is the ability of a website to adapt its layout and content to different screen sizes and devices, such as smartphones, tablets, and desktops.<\/p>\n\n\n\n<p>Design for mobile first!<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXf4XZjwyZ8lJaZOZrvRYWLy8-to4DRqnu1ioyGQNsV6DactwQrRrNEj08sQnlom6D0M6cM7Wjs3EeTsB2IGXW2ZhmJf2elivHRmrvLShinRg9gtImKvJ2d5h0z0bSUe7ncWUZYf-4gHmAEPlE4XCB9esMDq?key=WBBR-QamACb0Zp4WnIPPSg\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p>It&#8217;s often easier to adapt a mobile design to a desktop than the other way around. Since larger screens can accommodate more content, it&#8217;s best to start by designing for mobile and prioritizing the most important elements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Media Queries<\/h3>\n\n\n\n<p>Simple but if the user drags the window size they step towards the next set size.<\/p>\n\n\n\n<p><strong>Here is an example:<\/strong><\/p>\n\n\n\n<p>\/* Tablets and smaller *\/<\/p>\n\n\n\n<p>@media (max-width: 768px) {<\/p>\n\n\n\n<p>&nbsp;&nbsp;.container {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;width: 100%;<\/p>\n\n\n\n<p>&nbsp;&nbsp;}<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>\/* Mobile devices *\/<\/p>\n\n\n\n<p>@media (max-width: 480px) {<\/p>\n\n\n\n<p>&nbsp;&nbsp;.container {<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;width: 100%;<\/p>\n\n\n\n<p>&nbsp;&nbsp;&nbsp;&nbsp;padding: 0 10px;<\/p>\n\n\n\n<p>&nbsp;&nbsp;}<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Clamp Function<\/h3>\n\n\n\n<p>The clamp() function in CSS lets you set a value that\u2019s dynamic between a minimum and maximum. It adjusts based on the screen size or viewport width. So, instead of using media queries, you can have a property (like font size) scale naturally between limits.<\/p>\n\n\n\n<p>Formula: clamp(minimum, preferred, maximum);<\/p>\n\n\n\n<p><strong>Example: Responsive Font Size with clamp()<\/strong><\/p>\n\n\n\n<p>h1 {<\/p>\n\n\n\n<p>&nbsp;&nbsp;font-size: clamp(1.5rem, 5vw, 3rem);&nbsp; \/* Between 24px and 48px *\/<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>With clamp(), you don\u2019t need to set up media queries for every screen size. The text grows naturally between your set limits, and you don\u2019t even have to calculate it by hand there are great <a href=\"https:\/\/www.xrilion.com\/font-size-clamp\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">free clamp() generators<\/a> out there.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Responsive Images<\/h3>\n\n\n\n<p><a href=\"https:\/\/www.uxpin.com\/studio\/blog\/responsive-images-the-designers-definitive-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">Images<\/a> can be a big hurdle when it comes to making a website responsive. They can slow down your site if not optimized, or worse, they might look distorted or too large on smaller screens. But, don\u2019t worry, you\u2019ve got a few tricks up your sleeve.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Srcset. <\/strong>The <em>srcset<\/em> attribute is for delivering different image sizes based on the device. You\u2019re telling the browser &#8220;Hey, use this image for mobile, this one for tablet, and this one for desktop.&#8221;\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Vector Images.<\/strong> SVGs (Scalable Vector Graphics) are amazing because they scale <strong>infinitely<\/strong> without losing quality. This makes them perfect for logos, icons, or any simple illustrations.\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Image Optimization<\/strong>. Beyond just choosing the right size, you can optimize images to load faster using lazy loading. You can use Webp or any other modern web image format. Read more about what matters for <a href=\"https:\/\/www.xrilion.com\/blog\/website\/lighthouse-performance-scoring\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">web performance<\/a>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Flexible Grid Systems<\/h3>\n\n\n\n<p>While responsive images handle the visual content, flexible grids manage layouts across different devices. These grids allow your design to flow naturally, adjusting based on the screen size.<\/p>\n\n\n\n<p><strong>1. CSS Grid<\/strong><\/p>\n\n\n\n<p>CSS Grid allows you to define rows and columns that automatically adapt to the size of the screen.<\/p>\n\n\n\n<p><strong>Here\u2019s a basic example:<\/strong><\/p>\n\n\n\n<p>.container {<\/p>\n\n\n\n<p>&nbsp;&nbsp;display: grid;<\/p>\n\n\n\n<p>&nbsp;&nbsp;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));<\/p>\n\n\n\n<p>&nbsp;&nbsp;gap: 10px;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><strong>2. Flexbox<\/strong><\/p>\n\n\n\n<p>While CSS Grid is perfect for two-dimensional layouts, Flexbox is awesome for one-dimensional layouts \u2026 think rows or columns.<\/p>\n\n\n\n<p>Here&#8217;s how you can use Flexbox to build a simple responsive layout:<\/p>\n\n\n\n<p>.container {<\/p>\n\n\n\n<p>&nbsp;&nbsp;display: flex;<\/p>\n\n\n\n<p>&nbsp;&nbsp;flex-wrap: wrap;<\/p>\n\n\n\n<p>&nbsp;&nbsp;gap: 10px;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>.item {<\/p>\n\n\n\n<p>&nbsp;&nbsp;flex: 1 1 200px;<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>You can even combine both! For instance, use Flexbox to lay out different sections of your site, and then use Grid inside those sections for more complex layouts.<\/p>\n\n\n\n<p>Now you need to think backwards<strong> FROM CSS towards your UI Design tool.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pillar #7: HTML &amp; Performance<\/h3>\n\n\n\n<p>Ultimately, your design will be <a href=\"https:\/\/www.uxpin.com\/studio\/blog\/hmtl-line-spacing-good-bad\/\" target=\"_blank\" rel=\"noreferrer noopener\">brought to life in HTML<\/a>, so having a basic understanding of HTML and CSS can be a huge advantage. It\u2019s not a must for designers to know about this, but it sure helps a lot!\u00a0<\/p>\n\n\n\n<p>Browsers read HTML like a book, from top to bottom. They create a DOM (Document Object Model) as they go. The simpler this book, the faster it can be built. Believe it or not, it all starts with the designer.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXf9pI98WhWFdUx6D1QCA5xBKEPc0ankz1iCOSRpTXkYhEsJ-_MQjBPdSMLGxGst7YjAHjj-6Zv8TiV8FxbUd1X7rtGc6yFgVnLm_z8LMNqx1x2rsVDHRpumpQ7qi_Uph1aOZ0APTTgj2u3DXtftDDm1vIY?key=WBBR-QamACb0Zp4WnIPPSg\" alt=\"\" style=\"width:750px\"\/><\/figure>\n\n\n\n<p><em>Image Source: <\/em><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/First_steps\/How_CSS_works\/rendering.svg\" target=\"_blank\" rel=\"noreferrer noopener\"><em>Mozilla<\/em><\/a><\/p>\n\n\n\n<p>If you\u2019re a designer who understands this, you can start making decisions that not only look great but make life easier for the developer. For example, knowing how HTML is structured (with headers, paragraphs, images, and links) allows you to visualize how content will flow and stack across different devices. It also means you can avoid suggesting <strong>IMPOSSIBLE LAYOUTS<\/strong> that would take hours of unnecessary coding.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Benefits of Knowing Code as a Designer<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Identify and troubleshoot design issues more efficiently.<\/li>\n\n\n\n<li>Achieve precise control over the layout, typography, and styling of their designs, resulting in a more polished and professional final product.<\/li>\n\n\n\n<li>Experiment with more advanced techniques and create innovative designs that might not be possible for designers who rely solely on visual tools.<\/li>\n\n\n\n<li>Utilize a tool like UXPin much better because they can understand the code behind the elements.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">The Handoff: Collaborating with Developers<\/h3>\n\n\n\n<p>The designer-developer handoff is often where dreams go to die, but it doesn\u2019t have to be that way. Handoff is transferring a completed web design from the designer to the developer for implementation.&nbsp;<\/p>\n\n\n\n<p>When you understand the basics of HTML and CSS, you\u2019ll know what\u2019s possible, what\u2019s tricky, and how to meet halfway to create something that both <strong>looks great<\/strong> and <strong>works smoothly<\/strong>.<\/p>\n\n\n\n<p>Developers will appreciate it, too, because you\u2019ll be speaking their language &nbsp; or at least enough of it to avoid miscommunication.<\/p>\n\n\n\n<p><strong>Key Components of Handoff:<\/strong><\/p>\n\n\n\n<p><strong>Design Files:<\/strong> These typically include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>PSD, Sketch, or Figma files:<\/strong> Contain the visual elements, layers, and styles of the design.<\/li>\n\n\n\n<li><strong>Style guides:<\/strong> Document the typography, colors, and other design elements used in the project.<\/li>\n\n\n\n<li><strong>Wireframes:<\/strong> Provide a basic structure and layout of the pages.<\/li>\n<\/ul>\n\n\n\n<p><strong>Specifications:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Measurements:<\/strong> Dimensions of elements, spacing, and padding.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> Font families, sizes, weights, and line heights.<\/li>\n\n\n\n<li><strong>Colors:<\/strong> Hex codes or color names for all colors used in the design.<\/li>\n\n\n\n<li><strong>Interactions:<\/strong> Descriptions of how elements should behave when clicked, hovered over, or focused.<\/li>\n<\/ul>\n\n\n\n<p><strong>Annotations:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Notes and comments:<\/strong> Additional information or instructions for developers.<\/li>\n\n\n\n<li><strong>Placeholders:<\/strong> Indicate where content will be added dynamically.<\/li>\n<\/ul>\n\n\n\n<p><strong>Design with Implementation in Mind<\/strong><\/p>\n\n\n\n<p>When designing a responsive navigation bar, knowing that developers can use CSS Grid or Flexbox to make it dynamic can inform your design decisions. You&#8217;ll create a flexible layout that adapts to different screen sizes, rather than specifying rigid pixel values for each breakpoint.<\/p>\n\n\n\n<p>This approach streamlines the design-to-development process, reducing the need for back-and-forth revisions. By showing that you&#8217;ve considered the build process, you&#8217;re more likely to earn the development team&#8217;s respect and ensure that your design is implemented as intended.&#8221;<\/p>\n\n\n\n<p><strong>Suggest Solutions, Not Just Problems<\/strong><\/p>\n\n\n\n<p>We&#8217;ve all been there &#8211; pouring our hearts into a design, only to have it rejected due to technical limitations. But what if you could turn those limitations into opportunities? By having a basic understanding of HTML and CSS, you can collaborate with developers to find alternative solutions that achieve the same visual effect.<\/p>\n\n\n\n<p>For instance, if an animation is deemed too complex, you can suggest using CSS transitions or animations that are easier to implement. This way, you&#8217;re not just handing off your design and hoping for the best &#8211; you&#8217;re actively working with the development team to bring your vision to life.<\/p>\n\n\n\n<p>My favorite places to start learning CSS are: <a href=\"https:\/\/www.youtube.com\/@KevinPowell\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Kevin Powell<\/a>, and <a href=\"https:\/\/www.youtube.com\/@BroCodez\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Bro Code<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Web Designer Career opportunities<\/h2>\n\n\n\n<p>There are different ways web design can be added as a skill set of other professions like a web developer, freelancer digital marketer and so on but here are the major roles you can embody as a web designer:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>UI or UX Designer<\/strong><\/li>\n\n\n\n<li><strong>Web Design Consultant<\/strong><\/li>\n\n\n\n<li><strong>UX Researcher<\/strong><\/li>\n\n\n\n<li><strong>Product Designer<\/strong><\/li>\n<\/ul>\n\n\n\n<p>UI\/UX Designers and Product Designers are the most common. I\u2019ve personally worked in these exact roles myself.<\/p>\n\n\n\n<p>I just did a search on LinkedIn for \u201cUI\/UX Designer\u201d and just today there are 1000+ offers available. And this is just in the United States.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXe13IwLyQgP2aI3tJnUOTxkNyjlzOT8ug9or-W5SVkmpNQ4P1A9mvA8WDer6S6xGrDU5NnAOnmGe697_HOXPwfoaDu7snp-4-EnC7rY0mGjiGhXCDbToo8TxNwmdNVLLUx1MEuMAqD9_InlL7qlTTiBXJbd?key=WBBR-QamACb0Zp4WnIPPSg\" alt=\"\"\/><\/figure>\n\n\n\n<p>Taking a peek at Indeed shows another 1000+ results:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdeP_ZRg6etsbfPScajSQV43gIGAdQ1yTiHqRdGawnIoLkKlmclYLGWWWd6b4k4dLxWa-iICzvOfSpq4ELApvBCjpjRK2zW3yRudwi80BZic2fklM_OR5qMsEDjMZNoiIEtANdBVDSrLrlxZiwJiFDjon-2?key=WBBR-QamACb0Zp4WnIPPSg\" alt=\"\"\/><\/figure>\n\n\n\n<p>The best platforms for finding web design jobs are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Company Websites<\/li>\n\n\n\n<li>Dribbble and Behance<\/li>\n\n\n\n<li>Toptal<\/li>\n\n\n\n<li>Linkedin and Upwork<\/li>\n\n\n\n<li>Traditional Job Boards<\/li>\n<\/ul>\n\n\n\n<p>Web-designers anywhere between <strong>$62K &#8211; $112K\/yr<\/strong> according to <a href=\"https:\/\/www.glassdoor.com\/Salaries\/web-designer-salary-SRCH_KO0,12.htm\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">GlassDoor<\/a>.\u00a0<\/p>\n\n\n\n<p>You\u2019d also be well-positioned to explore a wide range of entrepreneurial opportunities. Like freelancing, starting a web design agency, selling products, taking web design courses and workshops, and so on.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Resources and Tools<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Resources<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/guide-to-ux-design-process-and-documentation\/\" target=\"_blank\" rel=\"noreferrer noopener\">The Guide to UX Design Process &amp; Documentation<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/design-trends-2020\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design Trends Collection<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.uxpin.com\/studio\/ebooks\/designops-guide\/\" target=\"_blank\" rel=\"noreferrer noopener\">DesignOps 101: Guide to Design Operations<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Courses<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.coursera.org\/professional-certificates\/google-ux-design\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Google UX Design<\/a> Professional Certificate<\/li>\n\n\n\n<li><a href=\"https:\/\/www.coursera.org\/specializations\/web-design\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Web Design for Everybody<\/a> by the University of Michigan<\/li>\n\n\n\n<li><a href=\"https:\/\/university.webflow.com\/courses\/ultimate-web-design-course\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Ultimate Web Design Course<\/a> by Webflow<\/li>\n\n\n\n<li><a href=\"https:\/\/www.udemy.com\/course\/fundamentals-of-uxpin\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Fundamentals of UXPin<\/a> on Udemy<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Books<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Don\u2019t Make Me Think by Steve Krug<\/li>\n\n\n\n<li>HTML and CSS by Jon Duckett<\/li>\n\n\n\n<li>The Elements of User Experience by Jesse James Garrett<\/li>\n\n\n\n<li>Laws of UX by Jon Yablonski<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Even if you\u2019re focused purely on the visual side of things, web design isn\u2019t just about making things pretty. A site has to work in real-world conditions: it needs to load fast, be responsive, and be accessible. Knowing the pillars helps you think beyond the surface and consider what makes a site functional. That also makes working with developers smoother you\u2019re speaking the same language, and you\u2019re both aiming for a seamless user experience.<\/p>\n\n\n\n<p>The perfect website balances purpose and functionality with beauty and simplicity. It\u2019s easy to navigate, works on any device, loads quickly, and is accessible to all users.<\/p>\n\n\n\n<p>At the end of the day, web design isn\u2019t about you, it&#8217;s about the people using your product.&nbsp;<\/p>\n\n\n\n<p>UXPin empowers teams to create seamless, interactive prototypes of websites and apps with realistic, fully functional components. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Try UXPin for free<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>So you wanna be a Web Designer huh? I mean why not? After all, everything is on the web \u2026 As of writing this article 100 Million+ companies have an online presence through their websites. But AI is here! Does that mean Web Design is dead? Not at all! AI is changing the game, yes.<\/p>\n","protected":false},"author":3,"featured_media":54617,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,7],"tags":[],"class_list":["post-54612","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-web-design"],"yoast_title":"","yoast_metadesc":"Learn essential design fundamentals to kickstart your journey as a professional web designer. (Resources Included).","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>7 Pillars of Web Design \u2013 A Beginner\u2019s Guide | UXPin<\/title>\n<meta name=\"description\" content=\"Learn essential design fundamentals to kickstart your journey as a professional web designer. (Resources Included).\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/pillars-of-web-design-beginner-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"7 Pillars of Web Design \u2013 A Beginner\u2019s Guide\" \/>\n<meta property=\"og:description\" content=\"Learn essential design fundamentals to kickstart your journey as a professional web designer. (Resources Included).\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/pillars-of-web-design-beginner-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-18T10:06:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-09T12:46:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Design-System-for-Developers.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"79 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/pillars-of-web-design-beginner-guide\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/pillars-of-web-design-beginner-guide\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"7 Pillars of Web Design \u2013 A Beginner\u2019s Guide\",\"datePublished\":\"2024-09-18T10:06:12+00:00\",\"dateModified\":\"2024-10-09T12:46:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/pillars-of-web-design-beginner-guide\\\/\"},\"wordCount\":5048,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/pillars-of-web-design-beginner-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/Design-System-for-Developers.png\",\"articleSection\":[\"Blog\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/pillars-of-web-design-beginner-guide\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/pillars-of-web-design-beginner-guide\\\/\",\"name\":\"7 Pillars of Web Design \u2013 A Beginner\u2019s Guide | UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/pillars-of-web-design-beginner-guide\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/pillars-of-web-design-beginner-guide\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/Design-System-for-Developers.png\",\"datePublished\":\"2024-09-18T10:06:12+00:00\",\"dateModified\":\"2024-10-09T12:46:27+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Learn essential design fundamentals to kickstart your journey as a professional web designer. (Resources Included).\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/pillars-of-web-design-beginner-guide\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/pillars-of-web-design-beginner-guide\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/pillars-of-web-design-beginner-guide\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/Design-System-for-Developers.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2024\\\/09\\\/Design-System-for-Developers.png\",\"width\":1200,\"height\":600,\"caption\":\"Design System for Developers\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/pillars-of-web-design-beginner-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"7 Pillars of Web Design \u2013 A Beginner\u2019s Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"7 Pillars of Web Design \u2013 A Beginner\u2019s Guide | UXPin","description":"Learn essential design fundamentals to kickstart your journey as a professional web designer. (Resources Included).","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/pillars-of-web-design-beginner-guide\/","og_locale":"en_US","og_type":"article","og_title":"7 Pillars of Web Design \u2013 A Beginner\u2019s Guide","og_description":"Learn essential design fundamentals to kickstart your journey as a professional web designer. (Resources Included).","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/pillars-of-web-design-beginner-guide\/","og_site_name":"Studio by UXPin","article_published_time":"2024-09-18T10:06:12+00:00","article_modified_time":"2024-10-09T12:46:27+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Design-System-for-Developers.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"79 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/pillars-of-web-design-beginner-guide\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/pillars-of-web-design-beginner-guide\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"7 Pillars of Web Design \u2013 A Beginner\u2019s Guide","datePublished":"2024-09-18T10:06:12+00:00","dateModified":"2024-10-09T12:46:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/pillars-of-web-design-beginner-guide\/"},"wordCount":5048,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/pillars-of-web-design-beginner-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Design-System-for-Developers.png","articleSection":["Blog","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/pillars-of-web-design-beginner-guide\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/pillars-of-web-design-beginner-guide\/","name":"7 Pillars of Web Design \u2013 A Beginner\u2019s Guide | UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/pillars-of-web-design-beginner-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/pillars-of-web-design-beginner-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Design-System-for-Developers.png","datePublished":"2024-09-18T10:06:12+00:00","dateModified":"2024-10-09T12:46:27+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Learn essential design fundamentals to kickstart your journey as a professional web designer. (Resources Included).","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/pillars-of-web-design-beginner-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/pillars-of-web-design-beginner-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/pillars-of-web-design-beginner-guide\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Design-System-for-Developers.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2024\/09\/Design-System-for-Developers.png","width":1200,"height":600,"caption":"Design System for Developers"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/pillars-of-web-design-beginner-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"7 Pillars of Web Design \u2013 A Beginner\u2019s Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/54612","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=54612"}],"version-history":[{"count":6,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/54612\/revisions"}],"predecessor-version":[{"id":54831,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/54612\/revisions\/54831"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/54617"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=54612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=54612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=54612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}