{"id":10692,"date":"2022-01-17T15:58:22","date_gmt":"2022-01-17T23:58:22","guid":{"rendered":"https:\/\/www.avery.com\/blog\/?p=10692"},"modified":"2022-01-18T08:50:54","modified_gmt":"2022-01-18T16:50:54","slug":"how-to-design-a-website","status":"publish","type":"post","link":"https:\/\/www.avery.com\/blog\/how-to-design-a-website\/","title":{"rendered":"How To Design a Website for a Great User Experience"},"content":{"rendered":"\n<ul class=\"wp-block-yoast-seo-related-links\"><li><a href=\"\/blog\/tips-for-selling-online\/\" target=\"_blank\" rel=\"noreferrer noopener\">Selling Online &amp; Building an Ecommerce Store<\/a><\/li><li><a href=\"\/blog\/how-to-turn-website-visits-into-customers\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Turn Website Visits Into Customers<\/a><\/li><li><a href=\"https:\/\/www.avery.com\/blog\/how-to-pick-the-right-font-for-your-labels\/\">How to Pick the Right Font for Your Labels<\/a><\/li><li><a href=\"https:\/\/www.avery.com\/blog\/how-to-make-your-own-product-labels\/\">How To Make Your Own Product Labels<\/a><\/li><\/ul>\n\n\n\n<p>Do you need to design a new website and don\u2019t know where to start? It can certainly be a daunting process getting started and knowing what to tackle first. Whether it be a website for your small business or a task-based app, this overview was written by our Avery Creative Manager and Designer, who will take you through steps to help you understand how to design a website for a great user experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Define Your Vision<\/strong><\/h2>\n\n\n\n<p>Before you start exploring colors and images for your website or app, it\u2019s important to understand what you are trying to create. In a couple of sentences describe the vision of your website or app, then ask yourself the following questions:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Who is my target audience or end-user?<\/li><li>What problem am I trying to solve for them?<\/li><li>What am I hoping to achieve?<\/li><li>How will I know if my website or app will be a success?<\/li><\/ul>\n\n\n\n<p>Once you have answered these questions, you\u2019ll have a better understanding of your vision and the experience you\u2019re trying to create. A great website design is user-centric and encompasses <a href=\"https:\/\/www.nngroup.com\/videos\/sympathy-vs-empathy-ux\/\" target=\"_blank\" rel=\"noreferrer noopener\">empathy<\/a>. When you understand your users\u2019 needs and frustrations you can use that to create an ideal experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Before You Begin<\/strong><\/h2>\n\n\n\n<p>Whether you are designing the website yourself or hiring someone, understanding the user experience development process is key to bringing your vision together. Think of this as the brainstorming phase of your website or app which will be the foundation. <\/p>\n\n\n\n<p>The user experience (UX) is how a user interacts with and experiences a product, system, or service. This includes a person&#8217;s perceptions of ease of use and efficiency. Overall, its objective is to design a system that offers a great experience to its users.<\/p>\n\n\n\n<p>In UX design you typically go through a discovery phase, design phase, and validation phase.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/img.avery.com\/f_auto,c_scale,w_700\/web\/blog\/blog-websitedesign-methodology\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/img.avery.com\/f_auto,c_scale,w_700\/web\/blog\/blog-websitedesign-methodology\" alt=\"Discover, design and validate are the three main steps in designing a website\"\/><\/a><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\" id=\"h-discovery-phase-methodology\"><strong>Discovery Phase Methodology<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li>Identify goals and objectives<\/li><li>Identify the target audience<\/li><li>Conduct research<\/li><li>Document personal experiences (i.e. user interviews)<\/li><li>Create a persona<\/li><\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Design Phase Methodology<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li>Outline key features<\/li><li>Create a sitemap and user flow<\/li><li>Create a wireframe<\/li><li>Identify visual design elements such as color palette and fonts<\/li><li>Develop content<\/li><li>Build look &amp; feel<\/li><\/ul>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Validate Phase Methodology<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li>Conduct user testing<\/li><li>Provide surveys and questionnaires<\/li><li>Gather feedback<\/li><li>Implement feedback<\/li><\/ul>\n\n\n\n<p>When going through the process you might encounter some challenges. When working under deadlines think about the best way to work within a specific time frame. Will you have enough resources to produce this website or app? You might consider conducting enough research to avoid any pitfalls or rework. If you are taking a phased approach, think of gathering enough people to test with to gain the feedback needed for the next iteration. Once you have gone through the understanding of how the design process works overall, you are ready to take the next step.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Discovery Phase<\/strong><\/h2>\n\n\n\n<p>Knowing who your target audience is is the first step to creating a successful experience. Who are the people you will be marketing to? Why would they use your website or app?<\/p>\n\n\n\n<p>As part of the discovery phase, you\u2019ll want to start by creating user groups. For example, you might want to have a primary user group and a secondary user group. Let\u2019s say you are creating an app to sell candles. Then your primary user group might be candle enthusiasts who frequently use candles. Your secondary group might be people who are new to candles. <\/p>\n\n\n\n<p>You can use the following template to define some attributes for each user group:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>User group profile: The name of the user group<\/li><li>Primary goals: The main goal of the user group, i.e., to sell candles <\/li><li>User Roles:  The group&#8217;s personality, i.e., are they busy business owners or hobbyists?<\/li><li>User Demographics: Age, gender, family status, region<\/li><li>Experience: The users&#8217; education and how well they use technology, i.e, are they knowledgeable in the subject matter or beginners?<\/li><li>Organizational attributes: The size of company, the department the user works for or the job type<\/li><\/ul>\n\n\n\n<p>Once you create your user groups, you\u2019ll want to conduct more research and gather personal experiences from real people. You can do this by <a href=\"https:\/\/www.youtube.com\/watch?v=5tVbFfGDQCk\" target=\"_blank\" rel=\"noreferrer noopener\">conducting user interviews <\/a>with which you can create your personas. Personas are fictitious people that represent real users to help identify the motivations, frustrations, and goals that drive their online behavior. <\/p>\n\n\n\n<p>Designers create personas to understand and build empathy for the user to create a better user experience for them. Below is an example of a persona created for a task-based app for plant lovers.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/img.avery.com\/f_auto,c_scale,w_700\/web\/blog\/blog-websitedesign-persona\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/img.avery.com\/f_auto,c_scale,w_700\/web\/blog\/blog-websitedesign-persona\" alt=\"a persona for task-based app created by a graphic designer\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Design Phase<\/strong><\/h2>\n\n\n\n<p>Your research and interviews should provide you with rich information you can use to identify key features for your website or app. It might be better to not try to implement a ton of features right off the bat. From what you gathered during the discovery phase from your research and user interviews, write out the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>What are the similarities?<\/li><li>What are differences?<\/li><li>What features are my users are looking for?<\/li><\/ul>\n\n\n\n<p>Knowing the answers to these questions, then you can outline the top features your website must have so you can get it up and running faster.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Sitemap and User Flow<\/strong><\/h5>\n\n\n\n<p>It\u2019s important to understand how your user will interact with your website. At this point, you can start laying out your sitemap and user flow. <\/p>\n\n\n\n<p>A sitemap is a list of pages on a website or app. Think of it as a map telling you how to get from point A to point B. There are many different <a href=\"https:\/\/xd.adobe.com\/ideas\/process\/information-architecture\/visual-sitemap-examples-website-designs\/\" target=\"_blank\" rel=\"noreferrer noopener\">sitemap<\/a> examples depending on the type of site or app you\u2019re creating. Defining what\u2019s in your sitemap will help you understand what\u2019s really needed for it to launch.<\/p>\n\n\n\n<p>You can layout your sitemap in many ways such as sketching on paper, using a design program or online app or even putting something together in <a href=\"https:\/\/www.microsoft.com\/en-us\/microsoft-365\/powerpoint\" target=\"_blank\" rel=\"noreferrer noopener\">PowerPoint<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/img.avery.com\/f_auto,c_scale,w_800\/web\/blog\/blog-websitedesign-sitemap\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/img.avery.com\/f_auto,c_scale,w_800\/web\/blog\/blog-websitedesign-sitemap\" alt=\"A sitemap will help you plan out the entire website experience\" width=\"630\" height=\"334\"\/><\/a><\/figure>\n\n\n\n<p>The user flow is the path taken by users on a website or app to complete a task. Doing this task will put you in your users\u2019 shoes to see how they might navigate during their experience on your site. It will also help ensure there are no dead-end paths or errors which might lead to users leaving your site completely.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/img.avery.com\/f_auto,c_scale,w_700\/web\/blog\/blog-websitedesign-userflow\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/img.avery.com\/f_auto,c_scale,w_700\/web\/blog\/blog-websitedesign-userflow\" alt=\"The user flow is important to help you guide users through your site\"\/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Wireframes<\/strong><\/h5>\n\n\n\n<p>A wireframe is a drawing of your website or app\u2019s pages. It\u2019s best to not add color at this point so you can focus on the functionality rather than the aesthetics. In essence, wireframes consist of simple lines and shapes that represent the \u201cskeleton\u201d of your website or app. <\/p>\n\n\n\n<p>You can draw wireframes by hand or put them together on the computer. Good wireframes use design patterns that communicate the structure to the user in a short amount of time.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/img.avery.com\/f_auto,c_scale,w_700\/web\/blog\/blog-websitedesign-wireframe\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/img.avery.com\/f_auto,c_scale,w_700\/web\/blog\/blog-websitedesign-wireframe\" alt=\"Use wireframes when designing your website\"\/><\/a><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Visual Design<\/strong><\/h5>\n\n\n\n<p>In this phase, you are ready to bring all your research, mapping, and wireframes to life visually to produce a good user interface. If you are not designing your website or app yourself, think about hiring a web or <a href=\"https:\/\/xd.adobe.com\/ideas\/principles\/web-design\/role-visual-design-user-experience\/\" target=\"_blank\" rel=\"noreferrer noopener\">visual designer<\/a> and possibly a developer. <\/p>\n\n\n\n<p>The user interface (UI) is the way a person interacts with a device like a computer, tablet, smartphone, or other similar items. This can include display screens, keyboards, a mouse, menus, and icons. It is also the way through which a user interacts with a website or app.<\/p>\n\n\n\n<p>First, you\u2019ll want to identify a <a href=\"https:\/\/color.adobe.com\/create\/color-wheel\" target=\"_blank\" rel=\"noreferrer noopener\">color palette<\/a> to use for your website. Pick colors that set the mood for what you are creating and that also relate to the audiences you are talking to.  Also, make sure you are picking web-safe colors that are in <a href=\"https:\/\/en.wikipedia.org\/wiki\/RGB_color_model\" target=\"_blank\" rel=\"noreferrer noopener\">RGB<\/a>.<\/p>\n\n\n\n<p>Next, you need to pick fonts for your website or app. Keep in mind when choosing fonts that you pick a web font. If you pick a unique font, most users will not have that on their computers. When a user doesn\u2019t have a font on their computer it will default to the<a href=\"https:\/\/www.w3schools.com\/cssref\/css_websafe_fonts.asp\" target=\"_blank\" rel=\"noreferrer noopener\"> web-safe font<\/a>.  You can explore web fonts on sites like <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google Fonts<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/img.avery.com\/f_auto,c_scale,w_700\/web\/blog\/blog-websitedesign-colorfonts\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/img.avery.com\/f_auto,c_scale,w_700\/web\/blog\/blog-websitedesign-colorfonts\" alt=\"Color palette to help design your own website\"\/><\/a><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Content Development<\/strong><\/h5>\n\n\n\n<p>Think of what images resonate with your audience the most and <a href=\"\/blog\/how-to-make-a-logo-for-your-business\/\" target=\"_blank\" rel=\"noreferrer noopener\">design a logo<\/a> that best represents your brand. If you are selling products check out <a href=\"\/blog\/tips-for-effective-inexpensive-product-photography\/\" target=\"_blank\" rel=\"noreferrer noopener\">Product Photography Tips<\/a> to help produce the ideal photos for your website. <\/p>\n\n\n\n<p>Your website or app will also need copy. Consider hiring a <a href=\"http:\/\/www.fiverr.com\" target=\"_blank\" rel=\"noreferrer noopener\">freelance copywriter <\/a>that specializes in <a href=\"https:\/\/moz.com\/beginners-guide-to-seo\/why-search-engine-marketing-is-necessary\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>SEO<\/strong><\/a> so your website will gain more traffic and have better visibility when people are searching for your product on the web.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Buildout<\/h5>\n\n\n\n<p>Now that you have your color palettes, fonts, and content, you can start putting together the overall look and feel. Designing a website look and feel will serve two purposes. First, it will brand your product as unique, helping you stand out from the competition. Second, it increases ease of use through visually pleasing images, color use, and consistency of design. <\/p>\n\n\n\n<p>If you are building a website yourself, there are many great website builders like <a href=\"https:\/\/www.wix.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Wix<\/a> to help you. If you are building an online store, check out <a href=\"\/blog\/tips-for-selling-online\/\" target=\"_blank\" rel=\"noreferrer noopener\">Selling Online &amp; Building an Ecommerce Store<\/a> for more tips and tricks to help build up your site.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/img.avery.com\/f_auto,c_scale,w_700\/web\/blog\/blog-websitedesign-wixexample\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/img.avery.com\/f_auto,c_scale,w_700\/web\/blog\/blog-websitedesign-wixexample\" alt=\"\"\/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Validation Phase<\/strong><\/h2>\n\n\n\n<p>Once you feel your site is ready to go, it&#8217;s time to make sure it really is through user testing, surveys, questionnaires, and feedback to help you find errors or things that could be improved. <\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>User Testin<\/strong>g<\/h5>\n\n\n\n<p>Going through <a href=\"https:\/\/www.nngroup.com\/videos\/user-testing-jakob-nielsen\/\" target=\"_blank\" rel=\"noreferrer noopener\">user <\/a>testing helps validate your entire user experience. During this phase, you want to ensure your website or app is usable in the real world. You might want to keep in mind these 10 usability principles as you are going through this phase:<\/p>\n\n\n\n<ol class=\"wp-block-list\" type=\"1\"><li>Make the system status visible<\/li><li>Match the user\u2019s world<\/li><li>Give the user control and freedom<\/li><li>Be consistent and adhere to standards<\/li><li>Prevent errors before they start<\/li><li>Use recognition over recall<\/li><li>Allow for flexibility and efficiency<\/li><li>Use aesthetics and minimalist design<\/li><li>Help users recognize, diagnose and recover from errors<\/li><li>Provide help and documentation<\/li><\/ol>\n\n\n\n<p>You can read more on <a href=\"https:\/\/www.nngroup.com\/articles\/ten-usability-heuristics\/\" target=\"_blank\" rel=\"noreferrer noopener\">Jakob Nielsen&#8217;s 10 general principles<\/a> for interaction design. They are called &#8220;heuristics&#8221; because they are broad rules of thumb and not specific usability guidelines. Also, ensure your website or app meets <a href=\"https:\/\/www.w3.org\/WAI\/fundamentals\/accessibility-principles\/#standards\" target=\"_blank\" rel=\"noreferrer noopener\">accessibility standards<\/a> for people with disabilities.<\/p>\n\n\n\n<p>When conducting user testing, get users who would actually buy your product. Check out all there is to know about usability testing <a href=\"https:\/\/www.nngroup.com\/articles\/usability-testing-101\/\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<p> If you are conducting the user testing yourself, <a href=\"https:\/\/docs.google.com\/document\/d\/1_5Qu2JR9QE5LE6cK4eq9yJs-nXv2rlWWifcjacaiWdI\/edit\" target=\"_blank\" rel=\"noreferrer noopener\">download this template from GitLab<\/a> to guide you through the interview process. Doing user testing with even one or two people is always better than none.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Surveys &amp; Questionnaires<\/strong><\/h5>\n\n\n\n<p>Another great way to validate your user experience is by using surveys and questionnaires. Think of adding this at the end of your user test interviews. Surveys and questionnaires are useful if you are looking for a more quantitative form of feedback. You can provide a score of how usable your website or app is by using the <a href=\"https:\/\/www.usability.gov\/how-to-and-tools\/methods\/system-usability-scale.html\" target=\"_blank\" rel=\"noreferrer noopener\">System Usability Scale (SUS). <\/a>&nbsp;<\/p>\n\n\n\n<h5 class=\"wp-block-heading\"><strong>Gather Feedback &amp; Implement<\/strong><\/h5>\n\n\n\n<p>Your end-user is your number one priority. Make sure you gather all the feedback from your users and make the necessary changes to your website or app experience. Doing this can help lead to a more successful launch and avoid bigger problems down the road.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Ready, Set, Launch!<\/strong><\/h2>\n\n\n\n<p>Once you\u2019ve gone through all the phases of the UX process you are ready to launch. Note that there are many variations in the process depending on circumstances such as timing, budget, and resources. However, going through the UX process will better help ensure you are setting yourself up to provide the best user experience to your audience. <\/p>\n\n\n\n<p>When you are thinking of adding more to your website or app, or just refining, going through the cycle of defining, designing, developing, and deploying is a good rule of thumb. Keeping in mind a user-centric model will help your website or app gain the attraction and success you desire and will lead to users coming back time and time again.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you need to design a new website and don\u2019t know where to start? It can certainly be a daunting process getting started and knowing what to tackle first. Whether it be a website for your small business or a task-based app, this overview was written by our Avery Creative Manager and Designer, who will [&hellip;]<\/p>\n","protected":false},"author":24,"featured_media":10694,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[4076,4075],"tags":[4054,3668],"class_list":["post-10692","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-branding","category-small-business","tag-ecommerce","tag-graphic-design"],"blocksy_meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How To Design a Website for a Great User Experience<\/title>\n<meta name=\"description\" content=\"See how to design a website for a great user experience with tips and tricks from the Avery Creative Manager.\" \/>\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.avery.com\/blog\/how-to-design-a-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Design a Website for a Great User Experience\" \/>\n<meta property=\"og:description\" content=\"See how to design a website for a great user experience with tips and tricks from the Avery Creative Manager.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.avery.com\/blog\/how-to-design-a-website\/\" \/>\n<meta property=\"og:site_name\" content=\"Avery Blog\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/avery\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-17T23:58:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-18T16:50:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/avery-products-corp\/images\/w_2560,h_968,c_scale\/f_auto,q_auto\/v1753474559\/blog-hero-websitedesign-3000x1134-1\/blog-hero-websitedesign-3000x1134-1.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"968\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Summer Marker\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Summer Marker\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/how-to-design-a-website\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/how-to-design-a-website\\\/\"},\"author\":{\"name\":\"Summer Marker\",\"@id\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/#\\\/schema\\\/person\\\/c40c502123f466cd15838da555f87a60\"},\"headline\":\"How To Design a Website for a Great User Experience\",\"datePublished\":\"2022-01-17T23:58:22+00:00\",\"dateModified\":\"2022-01-18T16:50:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/how-to-design-a-website\\\/\"},\"wordCount\":2028,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/how-to-design-a-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/res.cloudinary.com\\\/avery-products-corp\\\/images\\\/w_2560,h_968,c_scale\\\/f_auto,q_auto\\\/v1753474559\\\/blog-hero-websitedesign-3000x1134-1\\\/blog-hero-websitedesign-3000x1134-1.jpg?_i=AA\",\"keywords\":[\"Ecommerce\",\"Graphic Design\"],\"articleSection\":[\"Branding\",\"Small Business\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.avery.com\\\/blog\\\/how-to-design-a-website\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/how-to-design-a-website\\\/\",\"url\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/how-to-design-a-website\\\/\",\"name\":\"How To Design a Website for a Great User Experience\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/how-to-design-a-website\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/how-to-design-a-website\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/res.cloudinary.com\\\/avery-products-corp\\\/images\\\/w_2560,h_968,c_scale\\\/f_auto,q_auto\\\/v1753474559\\\/blog-hero-websitedesign-3000x1134-1\\\/blog-hero-websitedesign-3000x1134-1.jpg?_i=AA\",\"datePublished\":\"2022-01-17T23:58:22+00:00\",\"dateModified\":\"2022-01-18T16:50:54+00:00\",\"description\":\"See how to design a website for a great user experience with tips and tricks from the Avery Creative Manager.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/how-to-design-a-website\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.avery.com\\\/blog\\\/how-to-design-a-website\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/how-to-design-a-website\\\/#primaryimage\",\"url\":\"https:\\\/\\\/res.cloudinary.com\\\/avery-products-corp\\\/images\\\/w_2560,h_968,c_scale\\\/f_auto,q_auto\\\/v1753474559\\\/blog-hero-websitedesign-3000x1134-1\\\/blog-hero-websitedesign-3000x1134-1.jpg?_i=AA\",\"contentUrl\":\"https:\\\/\\\/res.cloudinary.com\\\/avery-products-corp\\\/images\\\/w_2560,h_968,c_scale\\\/f_auto,q_auto\\\/v1753474559\\\/blog-hero-websitedesign-3000x1134-1\\\/blog-hero-websitedesign-3000x1134-1.jpg?_i=AA\",\"width\":2560,\"height\":968,\"caption\":\"how to design a website for a great user experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/how-to-design-a-website\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Design a Website for a Great User Experience\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/\",\"name\":\"Avery Blog\",\"description\":\"Tips, Tutorials &amp; Ideas for Makers and Organizers\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/#organization\",\"name\":\"Avery Products\",\"url\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/res.cloudinary.com\\\/avery-products-corp\\\/images\\\/f_auto,q_auto\\\/v1753475539\\\/cropped-avery-logo-white-rgb-square-1\\\/cropped-avery-logo-white-rgb-square-1.png?_i=AA\",\"contentUrl\":\"https:\\\/\\\/res.cloudinary.com\\\/avery-products-corp\\\/images\\\/f_auto,q_auto\\\/v1753475539\\\/cropped-avery-logo-white-rgb-square-1\\\/cropped-avery-logo-white-rgb-square-1.png?_i=AA\",\"width\":512,\"height\":512,\"caption\":\"Avery Products\"},\"image\":{\"@id\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"http:\\\/\\\/facebook.com\\\/avery\",\"https:\\\/\\\/x.com\\\/Averyproducts\",\"http:\\\/\\\/instagram.com\\\/avery\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/avery-products-corporation\\\/\",\"https:\\\/\\\/www.pinterest.com\\\/avery\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCg3Y4MPb-uK94D0iEc2u1_A\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/#\\\/schema\\\/person\\\/c40c502123f466cd15838da555f87a60\",\"name\":\"Summer Marker\",\"description\":\"As a designer, I strive for creative knowledge, insight and experiences to help me further expand and delve deeper into all parts of my career. I am driven towards productive and challenging environments where I always make it a goal to become a valuable asset to any given team. Working together with others has always been fulfilling and provides me with perspective on how differing roles connect together to bring a project to life. From my experiences, I believe an ideal environment is one surrounded by professional, passionate and positive people who seek innovation and excellence in every aspect to help their company flourish and emerge successfully.\",\"url\":\"https:\\\/\\\/www.avery.com\\\/blog\\\/author\\\/smarker\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How To Design a Website for a Great User Experience","description":"See how to design a website for a great user experience with tips and tricks from the Avery Creative Manager.","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.avery.com\/blog\/how-to-design-a-website\/","og_locale":"en_US","og_type":"article","og_title":"How To Design a Website for a Great User Experience","og_description":"See how to design a website for a great user experience with tips and tricks from the Avery Creative Manager.","og_url":"https:\/\/www.avery.com\/blog\/how-to-design-a-website\/","og_site_name":"Avery Blog","article_publisher":"http:\/\/facebook.com\/avery","article_published_time":"2022-01-17T23:58:22+00:00","article_modified_time":"2022-01-18T16:50:54+00:00","og_image":[{"width":2560,"height":968,"url":"https:\/\/res.cloudinary.com\/avery-products-corp\/images\/w_2560,h_968,c_scale\/f_auto,q_auto\/v1753474559\/blog-hero-websitedesign-3000x1134-1\/blog-hero-websitedesign-3000x1134-1.jpg?_i=AA","type":"image\/jpeg"}],"author":"Summer Marker","twitter_misc":{"Written by":"Summer Marker","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.avery.com\/blog\/how-to-design-a-website\/#article","isPartOf":{"@id":"https:\/\/www.avery.com\/blog\/how-to-design-a-website\/"},"author":{"name":"Summer Marker","@id":"https:\/\/www.avery.com\/blog\/#\/schema\/person\/c40c502123f466cd15838da555f87a60"},"headline":"How To Design a Website for a Great User Experience","datePublished":"2022-01-17T23:58:22+00:00","dateModified":"2022-01-18T16:50:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.avery.com\/blog\/how-to-design-a-website\/"},"wordCount":2028,"commentCount":0,"publisher":{"@id":"https:\/\/www.avery.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.avery.com\/blog\/how-to-design-a-website\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/avery-products-corp\/images\/w_2560,h_968,c_scale\/f_auto,q_auto\/v1753474559\/blog-hero-websitedesign-3000x1134-1\/blog-hero-websitedesign-3000x1134-1.jpg?_i=AA","keywords":["Ecommerce","Graphic Design"],"articleSection":["Branding","Small Business"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.avery.com\/blog\/how-to-design-a-website\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.avery.com\/blog\/how-to-design-a-website\/","url":"https:\/\/www.avery.com\/blog\/how-to-design-a-website\/","name":"How To Design a Website for a Great User Experience","isPartOf":{"@id":"https:\/\/www.avery.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.avery.com\/blog\/how-to-design-a-website\/#primaryimage"},"image":{"@id":"https:\/\/www.avery.com\/blog\/how-to-design-a-website\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/avery-products-corp\/images\/w_2560,h_968,c_scale\/f_auto,q_auto\/v1753474559\/blog-hero-websitedesign-3000x1134-1\/blog-hero-websitedesign-3000x1134-1.jpg?_i=AA","datePublished":"2022-01-17T23:58:22+00:00","dateModified":"2022-01-18T16:50:54+00:00","description":"See how to design a website for a great user experience with tips and tricks from the Avery Creative Manager.","breadcrumb":{"@id":"https:\/\/www.avery.com\/blog\/how-to-design-a-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.avery.com\/blog\/how-to-design-a-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.avery.com\/blog\/how-to-design-a-website\/#primaryimage","url":"https:\/\/res.cloudinary.com\/avery-products-corp\/images\/w_2560,h_968,c_scale\/f_auto,q_auto\/v1753474559\/blog-hero-websitedesign-3000x1134-1\/blog-hero-websitedesign-3000x1134-1.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/avery-products-corp\/images\/w_2560,h_968,c_scale\/f_auto,q_auto\/v1753474559\/blog-hero-websitedesign-3000x1134-1\/blog-hero-websitedesign-3000x1134-1.jpg?_i=AA","width":2560,"height":968,"caption":"how to design a website for a great user experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.avery.com\/blog\/how-to-design-a-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.avery.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Design a Website for a Great User Experience"}]},{"@type":"WebSite","@id":"https:\/\/www.avery.com\/blog\/#website","url":"https:\/\/www.avery.com\/blog\/","name":"Avery Blog","description":"Tips, Tutorials &amp; Ideas for Makers and Organizers","publisher":{"@id":"https:\/\/www.avery.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.avery.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.avery.com\/blog\/#organization","name":"Avery Products","url":"https:\/\/www.avery.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.avery.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/avery-products-corp\/images\/f_auto,q_auto\/v1753475539\/cropped-avery-logo-white-rgb-square-1\/cropped-avery-logo-white-rgb-square-1.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/avery-products-corp\/images\/f_auto,q_auto\/v1753475539\/cropped-avery-logo-white-rgb-square-1\/cropped-avery-logo-white-rgb-square-1.png?_i=AA","width":512,"height":512,"caption":"Avery Products"},"image":{"@id":"https:\/\/www.avery.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["http:\/\/facebook.com\/avery","https:\/\/x.com\/Averyproducts","http:\/\/instagram.com\/avery","https:\/\/www.linkedin.com\/company\/avery-products-corporation\/","https:\/\/www.pinterest.com\/avery","https:\/\/www.youtube.com\/channel\/UCg3Y4MPb-uK94D0iEc2u1_A"]},{"@type":"Person","@id":"https:\/\/www.avery.com\/blog\/#\/schema\/person\/c40c502123f466cd15838da555f87a60","name":"Summer Marker","description":"As a designer, I strive for creative knowledge, insight and experiences to help me further expand and delve deeper into all parts of my career. I am driven towards productive and challenging environments where I always make it a goal to become a valuable asset to any given team. Working together with others has always been fulfilling and provides me with perspective on how differing roles connect together to bring a project to life. From my experiences, I believe an ideal environment is one surrounded by professional, passionate and positive people who seek innovation and excellence in every aspect to help their company flourish and emerge successfully.","url":"https:\/\/www.avery.com\/blog\/author\/smarker\/"}]}},"_links":{"self":[{"href":"https:\/\/www.avery.com\/blog\/wp-json\/wp\/v2\/posts\/10692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.avery.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.avery.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.avery.com\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/www.avery.com\/blog\/wp-json\/wp\/v2\/comments?post=10692"}],"version-history":[{"count":24,"href":"https:\/\/www.avery.com\/blog\/wp-json\/wp\/v2\/posts\/10692\/revisions"}],"predecessor-version":[{"id":10731,"href":"https:\/\/www.avery.com\/blog\/wp-json\/wp\/v2\/posts\/10692\/revisions\/10731"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.avery.com\/blog\/wp-json\/wp\/v2\/media\/10694"}],"wp:attachment":[{"href":"https:\/\/www.avery.com\/blog\/wp-json\/wp\/v2\/media?parent=10692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.avery.com\/blog\/wp-json\/wp\/v2\/categories?post=10692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.avery.com\/blog\/wp-json\/wp\/v2\/tags?post=10692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}