{"id":177,"date":"2017-05-20T10:42:13","date_gmt":"2017-05-20T10:42:13","guid":{"rendered":"https:\/\/www.codeandco.ae\/blog\/?p=177"},"modified":"2024-04-06T06:53:15","modified_gmt":"2024-04-06T06:53:15","slug":"ux-design-web-design","status":"publish","type":"post","link":"https:\/\/www.codeandco.ae\/blog\/ux-design-web-design","title":{"rendered":"Where UX design starts in web design? (Hint &#8211; It\u2019s not what you think)"},"content":{"rendered":"<p>Where UX design starts? Of course, at the implementation level of web design! Wrong. It starts much earlier than you have ever expected. If you are in the domain of<span style=\"color: #000000;\"><strong> <a style=\"color: #000000;\" href=\"https:\/\/www.codeandco.ae\/cms-development\">web designing<\/a><\/strong><\/span>, you would know that user experience has to be thought out way before even drawing the design on a piece of paper.<\/p>\n<p>Jesse James Garrett, a celebrated writer, and interface developer have given a framework of <span style=\"color: #000000;\"><strong><a style=\"color: #000000;\" href=\"https:\/\/codeandco.ae\/customized-website-development.php\">UX design<\/a><\/strong><\/span> (from start to finish). Let\u2019s have a closer look at the framework.<\/p>\n<p><strong>Framework of UX design<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-178\" src=\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/UX-framework.jpg\" alt=\"UX framework\" width=\"469\" height=\"626\" srcset=\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/UX-framework.jpg 469w, https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/UX-framework-225x300.jpg 225w\" sizes=\"auto, (max-width: 469px) 100vw, 469px\" \/><\/p>\n<p>No matter what website you build for whatever industry, using this framework would certainly help. It\u2019s like an outline to the website designers who have just been starting out.<\/p>\n<ul>\n<li><strong>Strategy: <\/strong>Here user experience starts. At a strategy level, the business understands what sort of user experience they want to create for their target segment. And here the business decides what kind of value\/services they want to offer to its users.<\/li>\n<\/ul>\n<ul>\n<li><strong>Scope: <\/strong>This is the second point of the five point Once the strategy is in place, everything remains vague to the team. Scope clears the air and puts requirements in place. The scope will decide the resource constraints, what user experience would be affordable for the business, what services they can offer within the budgetary constraints, what features of the website should be included and more.<\/li>\n<\/ul>\n<ul>\n<li><strong>Structure: <\/strong>Once the requirements are in place, it\u2019s time to give all the pieces a solid structure. At this stage, the designers would decide how to put the entire piece into a coherent structure and go further.<\/li>\n<\/ul>\n<ul>\n<li><strong>Skeleton: <\/strong>This is the fourth stage. At this stage, the components of the website are built so that the users can use the website.<\/li>\n<\/ul>\n<ul>\n<li><strong>Surface: <\/strong>The surface is the final product (the website which is live). This would be the website where the users would start to use it and get all the benefits of using the site.<\/li>\n<\/ul>\n<p>So this is the framework of user experience. In practicality, it\u2019s much more vast and detailed.<\/p>\n<p><strong>The concept of design squiggle<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-184\" src=\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/Design-Squiggle-First-Last-1.jpg\" alt=\"Design Squiggle - First &amp; Last 1\" width=\"620\" height=\"400\" srcset=\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/Design-Squiggle-First-Last-1.jpg 620w, https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/Design-Squiggle-First-Last-1-300x194.jpg 300w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/p>\n<p>From the above framework, we can understand where the user experience actually starts. But we need to dig deep and get specific.<\/p>\n<p>So, in this section, let\u2019s have a look at a different concept called \u201cdesign squiggle\u201d through which we would be able to understand where the user experience actually starts off. According to this concept, before launching the website, the designers, business owners, evangelists sit together and decide about how to go from \u201cuncertainty\u201d to \u201cfocus\u201d stage of a business. The \u201cfocus\u201d stage is where the design would be implemented and the business would be launched.<\/p>\n<p>Between \u201cuncertainty\u201d and \u201cfocus\u201d, there are three steps \u2013<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-185\" src=\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/Design-Squiggle-3-steps-1.jpg\" alt=\"Design Squiggle - 3 steps 1\" width=\"620\" height=\"400\" srcset=\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/Design-Squiggle-3-steps-1.jpg 620w, https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/Design-Squiggle-3-steps-1-300x194.jpg 300w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/p>\n<ul>\n<li><strong>Research: <\/strong>In the research we would get the idea about how we can transform ideas into \u201cprototypes\u201d. What types of models should we invest into and how the whole thing will work! In this research phase, the designers need to get informed about how to give the maximum benefits (usability) to the users. Here user experience starts in any project.<\/li>\n<\/ul>\n<ul>\n<li><strong>Prototype: <\/strong>Once the research is done and decided upon what would be offered as user experience, it\u2019s time to build a prototype which will help the designers understand if what they are looking for and what they are implementing is in sync. In \u201cprototype\u201d stage, the business owner is asked to look into the \u201cmodel design\u201d that has been created. And then business owner mentions the changes (if any) at this stage. And then prototype building goes on for a while until the business owner gives the green signal.<\/li>\n<\/ul>\n<ul>\n<li><strong>Design: <\/strong>Once the \u201cprototype\u201d is being confirmed, the designer implements what is being asked by the business owner! At this stage design is implemented and the business is being launched (if the internal team is being working on the designs).<\/li>\n<\/ul>\n<p>Understanding this is important as user experience is one of the most important things of building website and business. If the users don\u2019t find the website usable; or if the surface becomes too hard for them to use; then the website won\u2019t be able to convert users into customers for business.<\/p>\n<p><strong>Why you need to define the user experience before anything else?<\/strong><\/p>\n<p>Here\u2019s a quote that would help you see what we are trying to articulate \u2013<\/p>\n<p><em>\u201cCan something exist before it is being built? Yes, of course. Actually nothing can be built until it is finished beforehand.\u201d<\/em><\/p>\n<p>This is a saying of a remarkable business philosopher Jim Rohn. But here\u2019s the context that would be useful. Without first knowing the exact user experience for your users, it would be impossible for you to create a website that would convert.<\/p>\n<p>Dan Brown, co-founder of Eight Shapes mentions that user experience is not an end of the means. Rather it\u2019s a process, an on-going effort and it begins to make sense once you are clear on what you would like to accomplish.<\/p>\n<p><strong>Where UX ends? (or does it end ever?)<\/strong><\/p>\n<p>User experience is one area of web designing which never ends. Once you implement the first design, you need to take the feedback from the users about how user-friendly the design really is. If it\u2019s extra-ordinary, you would stick to it.<\/p>\n<p>However, in most cases, it needs two to three rounds of re-implementation which makes things right. Users are the king. And your job as <span style=\"text-decoration: underline;\"><span style=\"color: #993300;\"><a style=\"color: #993300; text-decoration: underline;\" href=\"https:\/\/www.codeandco.ae\/\">website designer<\/a><\/span><\/span> or business owner is to make them feel top of the world. If not, they will find another website which would create better experience for them.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Where UX design starts? Of course, at the implementation level of web design! Wrong. It starts much earlier than you have ever expected. If you are in the domain of web designing, you would know that user experience has to be thought out way before even drawing the design on a piece of paper. Jesse &hellip; <a href=\"https:\/\/www.codeandco.ae\/blog\/ux-design-web-design\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Where UX design starts in web design? (Hint &#8211; It\u2019s not what you think)<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":181,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-177","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design"],"acf":[],"yoast_head":"\n<title>Where UX Design Starts in Web Design?<\/title>\n<meta name=\"description\" content=\"If you are in the domain of web design, you would know that user experience (UX )has to be thought out way before even drawing the design.\" \/>\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.codeandco.ae\/blog\/ux-design-web-design\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Where UX Design Starts in Web Design?\" \/>\n<meta property=\"og:description\" content=\"If you are in the domain of web design, you would know that user experience (UX )has to be thought out way before even drawing the design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codeandco.ae\/blog\/ux-design-web-design\" \/>\n<meta property=\"og:site_name\" content=\"Code and Co\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-20T10:42:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-06T06:53:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/ux-788002_640-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"613\" \/>\n\t<meta property=\"og:image:height\" content=\"459\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"code\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"code\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.codeandco.ae\/blog\/ux-design-web-design\",\"url\":\"https:\/\/www.codeandco.ae\/blog\/ux-design-web-design\",\"name\":\"Where UX Design Starts in Web Design?\",\"isPartOf\":{\"@id\":\"https:\/\/www.codeandco.ae\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.codeandco.ae\/blog\/ux-design-web-design#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.codeandco.ae\/blog\/ux-design-web-design#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/ux-788002_640-1.jpg\",\"datePublished\":\"2017-05-20T10:42:13+00:00\",\"dateModified\":\"2024-04-06T06:53:15+00:00\",\"author\":{\"@id\":\"https:\/\/www.codeandco.ae\/blog\/#\/schema\/person\/683686c2aea027386872ffc5cf6859a0\"},\"description\":\"If you are in the domain of web design, you would know that user experience (UX )has to be thought out way before even drawing the design.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.codeandco.ae\/blog\/ux-design-web-design#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.codeandco.ae\/blog\/ux-design-web-design\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codeandco.ae\/blog\/ux-design-web-design#primaryimage\",\"url\":\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/ux-788002_640-1.jpg\",\"contentUrl\":\"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/ux-788002_640-1.jpg\",\"width\":613,\"height\":459},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.codeandco.ae\/blog\/ux-design-web-design#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.codeandco.ae\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Where UX design starts in web design? (Hint &#8211; It\u2019s not what you think)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.codeandco.ae\/blog\/#website\",\"url\":\"https:\/\/www.codeandco.ae\/blog\/\",\"name\":\"Code and Co\",\"description\":\"Digital Strategy, Design and Innovation - Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.codeandco.ae\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.codeandco.ae\/blog\/#\/schema\/person\/683686c2aea027386872ffc5cf6859a0\",\"name\":\"code\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.codeandco.ae\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3d455e50d1511f12024d19b513feddd2fd972b216114af9ea14fb61524bb82fe?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3d455e50d1511f12024d19b513feddd2fd972b216114af9ea14fb61524bb82fe?s=96&d=mm&r=g\",\"caption\":\"code\"},\"url\":\"https:\/\/www.codeandco.ae\/blog\/author\/code\"}]}<\/script>\n","yoast_head_json":{"title":"Where UX Design Starts in Web Design?","description":"If you are in the domain of web design, you would know that user experience (UX )has to be thought out way before even drawing the design.","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.codeandco.ae\/blog\/ux-design-web-design","og_locale":"en_US","og_type":"article","og_title":"Where UX Design Starts in Web Design?","og_description":"If you are in the domain of web design, you would know that user experience (UX )has to be thought out way before even drawing the design.","og_url":"https:\/\/www.codeandco.ae\/blog\/ux-design-web-design","og_site_name":"Code and Co","article_published_time":"2017-05-20T10:42:13+00:00","article_modified_time":"2024-04-06T06:53:15+00:00","og_image":[{"width":613,"height":459,"url":"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/ux-788002_640-1.jpg","type":"image\/jpeg"}],"author":"code","twitter_card":"summary_large_image","twitter_misc":{"Written by":"code","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.codeandco.ae\/blog\/ux-design-web-design","url":"https:\/\/www.codeandco.ae\/blog\/ux-design-web-design","name":"Where UX Design Starts in Web Design?","isPartOf":{"@id":"https:\/\/www.codeandco.ae\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codeandco.ae\/blog\/ux-design-web-design#primaryimage"},"image":{"@id":"https:\/\/www.codeandco.ae\/blog\/ux-design-web-design#primaryimage"},"thumbnailUrl":"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/ux-788002_640-1.jpg","datePublished":"2017-05-20T10:42:13+00:00","dateModified":"2024-04-06T06:53:15+00:00","author":{"@id":"https:\/\/www.codeandco.ae\/blog\/#\/schema\/person\/683686c2aea027386872ffc5cf6859a0"},"description":"If you are in the domain of web design, you would know that user experience (UX )has to be thought out way before even drawing the design.","breadcrumb":{"@id":"https:\/\/www.codeandco.ae\/blog\/ux-design-web-design#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codeandco.ae\/blog\/ux-design-web-design"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codeandco.ae\/blog\/ux-design-web-design#primaryimage","url":"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/ux-788002_640-1.jpg","contentUrl":"https:\/\/www.codeandco.ae\/blog\/wp-content\/uploads\/2017\/05\/ux-788002_640-1.jpg","width":613,"height":459},{"@type":"BreadcrumbList","@id":"https:\/\/www.codeandco.ae\/blog\/ux-design-web-design#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codeandco.ae\/blog"},{"@type":"ListItem","position":2,"name":"Where UX design starts in web design? (Hint &#8211; It\u2019s not what you think)"}]},{"@type":"WebSite","@id":"https:\/\/www.codeandco.ae\/blog\/#website","url":"https:\/\/www.codeandco.ae\/blog\/","name":"Code and Co","description":"Digital Strategy, Design and Innovation - Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codeandco.ae\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.codeandco.ae\/blog\/#\/schema\/person\/683686c2aea027386872ffc5cf6859a0","name":"code","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codeandco.ae\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3d455e50d1511f12024d19b513feddd2fd972b216114af9ea14fb61524bb82fe?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3d455e50d1511f12024d19b513feddd2fd972b216114af9ea14fb61524bb82fe?s=96&d=mm&r=g","caption":"code"},"url":"https:\/\/www.codeandco.ae\/blog\/author\/code"}]}},"_links":{"self":[{"href":"https:\/\/www.codeandco.ae\/blog\/wp-json\/wp\/v2\/posts\/177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codeandco.ae\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codeandco.ae\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codeandco.ae\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codeandco.ae\/blog\/wp-json\/wp\/v2\/comments?post=177"}],"version-history":[{"count":11,"href":"https:\/\/www.codeandco.ae\/blog\/wp-json\/wp\/v2\/posts\/177\/revisions"}],"predecessor-version":[{"id":622,"href":"https:\/\/www.codeandco.ae\/blog\/wp-json\/wp\/v2\/posts\/177\/revisions\/622"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codeandco.ae\/blog\/wp-json\/wp\/v2\/media\/181"}],"wp:attachment":[{"href":"https:\/\/www.codeandco.ae\/blog\/wp-json\/wp\/v2\/media?parent=177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codeandco.ae\/blog\/wp-json\/wp\/v2\/categories?post=177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codeandco.ae\/blog\/wp-json\/wp\/v2\/tags?post=177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}