{"id":27427,"date":"2022-12-12T11:08:30","date_gmt":"2022-12-12T11:08:30","guid":{"rendered":"https:\/\/siit.co\/guestposts\/?p=27427"},"modified":"2022-12-12T11:08:30","modified_gmt":"2022-12-12T11:08:30","slug":"website-design-guidelines-you-need-to-know","status":"publish","type":"post","link":"https:\/\/siit.co\/guestposts\/website-design-guidelines-you-need-to-know\/","title":{"rendered":"Website Design Guidelines you need to know"},"content":{"rendered":"
    \n
  1. \n

    Simplicity<\/h2>\n<\/li>\n<\/ol>\n

    The look of a website is certainly important, but most people don’t visit a website to judge how elegant the design is. Take action or search for specific information.<\/p>\n

    As such, unnecessary design elements (that is, those that serve no functional purpose) are overwhelming and only make it difficult for visitors to achieve what they want to achieve.<\/p>\n

    Simplicity is your best friend in terms of usability and his UX. Nothing is too simple when you have all the page elements you need. This principle can be applied in many ways, including:<\/p>\n

    Colors: Generally not used. The Handbook of Computer-Human Interaction recommends using up to 5 (plus or minus 2) different colors in your design.<\/p>\n

    Font: The font you choose should be legible. Again, keep text color to a minimum and always make sure it contrasts with the background color. A general recommendation is to use up to 3 different fonts in up to 3 different sizes.<\/p>\n

    Graphics: Use graphics only when they help the user complete a task or perform a specific function (don’t add such graphics).<\/p>\n

      \n
    1. \n

      Visual Hierarchy<\/h2>\n<\/li>\n<\/ol>\n

      Closely related to the principle of simplicity, visual hierarchy means arranging and organizing website elements in such a way that visitors are naturally drawn to the most important elements first. To do.<\/p>\n

      When it comes to usability and optimizing her UX, the goal is to get visitors to take the desired action, but remember to do it in a way that feels natural and enjoyable. By adjusting the position, color, or size of certain elements, you can configure your website so that visitors are directed to those elements first.<\/p>\n

      In the Spotify example below, you can see that the main headline “Get 3 Months Premium Free” is at the top of the visual hierarchy along with its size and page position. Focus on their mission first and foremost. This is followed by a call to action “Get 3 Months Free” CTA. Users can click this her CTA or browse the menu items above to see more actions.<\/p>\n

        \n
      1. \n

        Navigability Planning for intuitive navigation<\/h2>\n<\/li>\n<\/ol>\n

        website is very important for your visitors to find what they are looking for. Ideally, visitors should land on your page and not have to think about where to click next. The transition from point A to point B should be as smooth as possible.<\/p>\n

        Here are some tips for optimizing your site’s navigation.<\/p>\n

        Keep the main navigation structure simple (place it as high on the page as possible).<\/p>\n

        Include navigation in the footer of your website.<\/p>\n

        Consider using breadcrumbs on all pages (except the home page) to help users remember navigation paths.<\/p>\n

        Add a search bar to the top of your site to allow visitors to search by keyword<\/p>\n

        Don’t provide too many navigation options per page. Simplicity again!<\/p>\n

        Include links in your copy of page and make it clear where those links lead.<\/p>\n

        Don’t let users dig too deep. Try creating a simple wireframe map of all the pages of your site, arranged like a pyramid. The home page is at the top and each linked page of the previous page is the next level. In most cases, it’s best to keep maps no more than three levels deep. For example, take a look at HubSpot’s sitemap.<\/p>\n

        One more tip: Once you’ve decided on the main (top) navigation for your site, be consistent. Navigation labels and locations should remain the same on each page.<\/p>\n

          \n
        1. \n

          Consistency<\/h2>\n<\/li>\n<\/ol>\n

          Apart from maintaining consistency in navigation, the overall look of the site should be similar on all pages of the site. Backgrounds, color schemes, fonts, and even tone of writing are all areas where consistency positively impacts usability and UX.<\/p>\n

          This does not mean that all pages should follow the same layout. Instead, create different layouts for specific types of pages (landing pages, information pages, etc.).<\/p>\n

          ). Using these layouts consistently helps visitors understand the type of information they are likely to find on a particular page.<\/p>\n

          In the example below you can see that Airbnb uses the same layout for all their Help pages. This is common practice. Imagine what it would be like from the visitor’s point of view if each “help” page had its own layout. Many will shrug their shoulders.<\/p>\n

            \n
          1. \n

            Responsiveness<\/h2>\n<\/li>\n<\/ol>\n

            According to Statista, 48% of page views worldwide come from mobile devices such as smartphones and tablets. According to our research, he 93% of users abandoned her website because it did not display properly on their device.<\/p>\n

            Bottom line: Her website must be compatible with the variety of devices her visitors use to provide a truly great user experience. In the tech world, this is called responsive design<\/a><\/strong>.<\/p>\n

            Responsive design means investing in a highly flexible website structure. A responsive website automatically resizes and reorganizes content to fit the size of the device the visitor is currently using. You can do this by using his mobile-friendly HTML templates or by building a dedicated mobile site.<\/p>\n

            Ultimately, having a great experience on different devices is more important than looking the same on different devices.<\/p>\n

            In addition to being mobile-friendly, it’s worth testing your website for cross-browser compatibility<\/p>\n

            Most of the time, you’ve viewed websites in only one web browser, such as Google Chrome, Safari, or Firefox.<\/p>\n

            Next, open the page in each of these browsers and evaluate how the elements will look. Ideally, there shouldn’t be much of a difference in presentation, but you’ll never know until you see it in person.<\/p>\n

              \n
            1. \n

              Accessibility<\/h2>\n<\/li>\n<\/ol>\n

              The goal of web accessibility is to make websites usable by everyone, including people with disabilities and limitations that affect their browsing experience. As a website designer, it’s your job to keep these users in mind in your UX planning.<\/p>\n

              Like responsiveness, accessibility applies to his entire website (structure, page format, visual elements, and both written and visual content). Developed by the Web Accessibility Initiative and the World Wide Web Consortium, the Web Content Accessibility Guidelines (WCAG) set guidelines for web accessibility. Broadly speaking, these guidelines state that websites should:<\/p>\n

              Operational: Website functionality should be enabled in a number of ways.<\/p>\n

              Understandable: All content and alerts can be easily understood.<\/p>\n

              Robust: Your website is usable across different assistive technologies, devices, and browsers.<\/p>\n

              For a deeper dive into this topic, see our Ultimate Guide to Web Accessibility.<\/p>\n

                \n
              1. \n

                Conventionality<\/h2>\n<\/li>\n<\/ol>\n

                A big challenge in web design is balancing originality with your expectations<\/p>\n

                Most of us are internet savvy users and have certain conventions that we have grown accustomed to over time.<\/p>\n

                Place the main navigation at the top (or left) of the page.<\/p>\n

                Place the logo in the top left (or center) of the page.<\/p>\n

                Make your logo clickable to keep visitors coming back to your home page.<\/p>\n

                Some shortcuts and buttons change color or appearance when moused over.<\/p>\n

                Use of the shopping cart icon on e-commerce sites<\/a><\/strong>. The icon also has a license plate that indicates the number of items in the cart.<\/p>\n

                Make sure the image slider has a button that the user can click to manually rotate the slide.<\/p>\n

                Some throw it out the window for its uniqueness, but it’s wrong. There is still plenty of room for creativity within the conventions of the web.<\/p>\n

                Let’s take a quick look at another area of \u200b\u200bdesign: architecture. Building regulations have been introduced in order to create a space where people can live with peace of mind. Architects do not complain or violate these codes as they ensure the safety and comfort of their guests, aside from legal implications. No matter how dazzling the building may look, if you trip on uneven stairs or get stuck in a fire, it might be time to head outside.<\/p>\n

                Similarly, you can create unforgettable experiences while meeting user expectations<\/p>\n

                Failing to meet users’ expectations can make your site uncomfortable or even frustrating.<\/p>\n

                  \n
                1. \n

                  Credibility<\/h2>\n<\/li>\n<\/ol>\n

                  Following web, conventions creates credibility in your website. In other words, it increases the trust your website conveys. Reliability is also very important when trying to create a website that offers the best possible user experience.<\/p>\n

                  One of the best ways to build credibility is to speak clearly and honestly about the products and services you are selling. Don’t let your visitors search dozens of pages to find out what you’re doing. Be open on your home page and devote some space to explaining the value behind what you do.<\/p>\n

                  Another credibility tip: Have a pricing page that also links to your home page. I will prepare Clearly list your prices on your website rather than forcing people to contact you to learn more about prices. This increases the company’s credibility and reputation.<\/p>\n

                    \n
                  1. \n

                    User Orientation<\/h2>\n<\/li>\n<\/ol>\n

                    Ultimately, usability and user experience depending on the preferences of the end-her user. After all, if you’re not designing for them, who are you designing for? The final key to is conducting user testing, gathering feedback, and implementing changes based on what is learned.<\/p>\n

                    don’t bother testing usability yourself<\/p>\n

                    Because you’ve already spent so much time designing it, it has its own biases built into the equation. Get testers who have never seen your site before, just like first-time visitors.<\/p>\n

                     <\/p>\n","protected":false},"excerpt":{"rendered":"

                    Simplicity The look of a website is certainly important, but most people don’t visit a website to judge how elegant the design is. Take action…<\/p>\n","protected":false},"author":1886,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[557],"tags":[6656],"class_list":["post-27427","post","type-post","status-publish","format-standard","hentry","category-info-tech","tag-website-design"],"yoast_head":"\nWebsite Design Guidelines you need to know - SIIT - Tech Guest Posts<\/title>\n<meta name=\"description\" content=\"Website design guidelines include 1. Simplicity 2. Visual Hierarchy 3. Conventionality 4. Responsiveness 5. Accessibility\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/siit.co\/guestposts\/website-design-guidelines-you-need-to-know\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Website Design Guidelines you need to know - SIIT - Tech Guest Posts\" \/>\n<meta property=\"og:description\" content=\"Website design guidelines include 1. Simplicity 2. Visual Hierarchy 3. Conventionality 4. Responsiveness 5. Accessibility\" \/>\n<meta property=\"og:url\" content=\"https:\/\/siit.co\/guestposts\/website-design-guidelines-you-need-to-know\/\" \/>\n<meta property=\"og:site_name\" content=\"SIIT - Tech Guest Posts\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-12T11:08:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/siit.co\/guestposts\/wp-content\/uploads\/2022\/12\/website-design-guide.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"651\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Surftware.com\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Surftware.com\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/siit.co\/guestposts\/website-design-guidelines-you-need-to-know\/\",\"url\":\"https:\/\/siit.co\/guestposts\/website-design-guidelines-you-need-to-know\/\",\"name\":\"Website Design Guidelines you need to know - SIIT - Tech Guest Posts\",\"isPartOf\":{\"@id\":\"https:\/\/siit.co\/guestposts\/#website\"},\"datePublished\":\"2022-12-12T11:08:30+00:00\",\"author\":{\"@id\":\"https:\/\/siit.co\/guestposts\/#\/schema\/person\/79b17dcea0253c068689f10b543dde35\"},\"description\":\"Website design guidelines include 1. Simplicity 2. Visual Hierarchy 3. Conventionality 4. Responsiveness 5. Accessibility\",\"breadcrumb\":{\"@id\":\"https:\/\/siit.co\/guestposts\/website-design-guidelines-you-need-to-know\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/siit.co\/guestposts\/website-design-guidelines-you-need-to-know\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/siit.co\/guestposts\/website-design-guidelines-you-need-to-know\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/siit.co\/guestposts\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Website Design Guidelines you need to know\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/siit.co\/guestposts\/#website\",\"url\":\"https:\/\/siit.co\/guestposts\/\",\"name\":\"SIIT - Tech Guest Posts\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/siit.co\/guestposts\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/siit.co\/guestposts\/#\/schema\/person\/79b17dcea0253c068689f10b543dde35\",\"name\":\"Surftware.com\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/siit.co\/guestposts\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/440572d19c29a8b7dae01b45a095c83a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/440572d19c29a8b7dae01b45a095c83a?s=96&d=mm&r=g\",\"caption\":\"Surftware.com\"},\"sameAs\":[\"https:\/\/www.surftware.com\/\"],\"url\":\"https:\/\/siit.co\/guestposts\/author\/surftware-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Website Design Guidelines you need to know - SIIT - Tech Guest Posts","description":"Website design guidelines include 1. Simplicity 2. Visual Hierarchy 3. Conventionality 4. Responsiveness 5. Accessibility","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:\/\/siit.co\/guestposts\/website-design-guidelines-you-need-to-know\/","og_locale":"en_US","og_type":"article","og_title":"Website Design Guidelines you need to know - SIIT - Tech Guest Posts","og_description":"Website design guidelines include 1. Simplicity 2. Visual Hierarchy 3. Conventionality 4. Responsiveness 5. Accessibility","og_url":"https:\/\/siit.co\/guestposts\/website-design-guidelines-you-need-to-know\/","og_site_name":"SIIT - Tech Guest Posts","article_published_time":"2022-12-12T11:08:30+00:00","og_image":[{"width":1080,"height":651,"url":"https:\/\/siit.co\/guestposts\/wp-content\/uploads\/2022\/12\/website-design-guide.jpeg","type":"image\/jpeg"}],"author":"Surftware.com","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Surftware.com","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/siit.co\/guestposts\/website-design-guidelines-you-need-to-know\/","url":"https:\/\/siit.co\/guestposts\/website-design-guidelines-you-need-to-know\/","name":"Website Design Guidelines you need to know - SIIT - Tech Guest Posts","isPartOf":{"@id":"https:\/\/siit.co\/guestposts\/#website"},"datePublished":"2022-12-12T11:08:30+00:00","author":{"@id":"https:\/\/siit.co\/guestposts\/#\/schema\/person\/79b17dcea0253c068689f10b543dde35"},"description":"Website design guidelines include 1. Simplicity 2. Visual Hierarchy 3. Conventionality 4. Responsiveness 5. Accessibility","breadcrumb":{"@id":"https:\/\/siit.co\/guestposts\/website-design-guidelines-you-need-to-know\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/siit.co\/guestposts\/website-design-guidelines-you-need-to-know\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/siit.co\/guestposts\/website-design-guidelines-you-need-to-know\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/siit.co\/guestposts\/"},{"@type":"ListItem","position":2,"name":"Website Design Guidelines you need to know"}]},{"@type":"WebSite","@id":"https:\/\/siit.co\/guestposts\/#website","url":"https:\/\/siit.co\/guestposts\/","name":"SIIT - Tech Guest Posts","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/siit.co\/guestposts\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/siit.co\/guestposts\/#\/schema\/person\/79b17dcea0253c068689f10b543dde35","name":"Surftware.com","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/siit.co\/guestposts\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/440572d19c29a8b7dae01b45a095c83a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/440572d19c29a8b7dae01b45a095c83a?s=96&d=mm&r=g","caption":"Surftware.com"},"sameAs":["https:\/\/www.surftware.com\/"],"url":"https:\/\/siit.co\/guestposts\/author\/surftware-com\/"}]}},"_links":{"self":[{"href":"https:\/\/siit.co\/guestposts\/wp-json\/wp\/v2\/posts\/27427","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/siit.co\/guestposts\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/siit.co\/guestposts\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/siit.co\/guestposts\/wp-json\/wp\/v2\/users\/1886"}],"replies":[{"embeddable":true,"href":"https:\/\/siit.co\/guestposts\/wp-json\/wp\/v2\/comments?post=27427"}],"version-history":[{"count":0,"href":"https:\/\/siit.co\/guestposts\/wp-json\/wp\/v2\/posts\/27427\/revisions"}],"wp:attachment":[{"href":"https:\/\/siit.co\/guestposts\/wp-json\/wp\/v2\/media?parent=27427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/siit.co\/guestposts\/wp-json\/wp\/v2\/categories?post=27427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/siit.co\/guestposts\/wp-json\/wp\/v2\/tags?post=27427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}