{"id":23673,"date":"2016-03-25T16:54:05","date_gmt":"2016-03-25T20:54:05","guid":{"rendered":"http:\/\/www.andysowards.com\/blog\/?p=23673"},"modified":"2023-03-15T18:50:08","modified_gmt":"2023-03-15T22:50:08","slug":"uiux-then-and-now","status":"publish","type":"post","link":"https:\/\/www.andysowards.com\/blog\/2016\/uiux-then-and-now\/","title":{"rendered":"UI\/UX Then and Now"},"content":{"rendered":"

Constant evolution – look around you in the world of technology and you\u2019ll see it everywhere. Nothing stays the same for very long, nothing is static. It\u2019s one of the things that we love most about the Internet, because there is constantly something new and improved to discover and to be excited about.<\/p>\n

The downside to all of this is that this constant change leads to a collective short term memory. People become instantly accustomed to and entrenched in the current way that they get around the Web and forget completely that there was previously a different interface. Even when there is a pushback of frustration among users at expected or unexpected updates, they are nonetheless most likely to stick around as long as the changes aren\u2019t too terribly drastic and then to become just as entrenched in the new processes as they were in the old ones.<\/p>\n

User Interface\/User Experience Design (UI\/UX) fuels the constant improvements of technology. Since the goal is to mold to the needs of users, designers are continually looking for the perfect interface.<\/p>\n

UI\/UX then vs. now – four comparisons<\/h2>\n

It\u2019s often easier to understand something by showing examples rather than by digging through long and winding explanations. UI\/UX is a perfect example of that. These aspects of Web design<\/a> are all about what it feels like to navigate a website.<\/p>\n

Let\u2019s break down the old versions of a few sample sites so that we can appreciate the improvements that we\u2019ve seen in UI\/UX over the last several years.<\/p>\n

OE Enterprises<\/h2>\n

\"uiux-then-and-now-0\"<\/p>\n

Then – Fall 2011<\/a><\/h3>\n

Now – Spring 2016<\/h3>\n

The first thing to notice here is that the old website is actually really similar to the new one, at least in basic layout. Both sites include a simple tiled format, with each relying heavily on a field of graphics to highlight various information. Both also feature menus that dropdown when the user scrolls over them.<\/p>\n

The biggest difference here really isn\u2019t in functionality but in aesthetic. The layout is similar, the content is similar, but the look and feel of the website is wholly different. Large form icons and clear images now flank a scrolling set of testimonials. The work of the company is clearly communicated immediately, so that anyone who might happen to surf along and find it knows what they\u2019re all about.
\nAn integral part of UI\/UX design evolution has been the introduction of actionable steps into Web design. Users are constantly invited to interact in meaningful ways. We can see that showcased here where there are additions of donate, login and social media interaction opportunities right on the front page.<\/p>\n

EpicStream<\/h2>\n

\"uiux-then-and-now-2\"<\/p>\n

Then – Summer 2014<\/a><\/h3>\n

Now – Spring 2016<\/h3>\n

EpicStream offers another glimpse into the transformative power of UI\/UX design. As in the last example, we can see here that the basic layout of the old version and the new version are strikingly similar. It\u2019s the little things here that change and make the user interface infinitely more pleasurable<\/a>.<\/p>\n

The first thing to notice is that the pictures are in larger format. They are bolder, clearer and more concise. The website showcases a similar amount of information in a very similar form, but is much more clear and simplistic, with cleaner lines. Fonts have been simplified as well, becoming more readable and thereby user friendly. Even the logo is sleeker and easier to decode.<\/p>\n

Animation was part of the original site, but with the upgrade we find that there is more useful animation – notice the loading bars that let users know what to expect as the slides scroll past. Speaking of scrolling, it\u2019s important to note that we\u2019ve transitioned from a page format to an endless scroll format – a definite trend in UI\/UX design. Why? Because it\u2019s easier to use and is much more mobile friendly. The card format is easier to decode than the stacked format, allowing for bolder and more readable images.<\/p>\n

Finally, let\u2019s take note of the floating social media box on the bottom right that appears in the new version of EpicStream. In the older version, users had to scroll all the way back up to the top in order to engage in social media as they surfed down the page – now that information and offer to interact is right there with them. Ease of interface and opportunity to interact is again a key to UI\/UX.<\/p>\n

Imaginovation<\/h2>\n

\"uiux-then-and-now-1\"<\/p>\n

Then – Winter 2014<\/a><\/h3>\n

Now – Spring 2016<\/h3>\n

This site is interesting because both the old and the new versions rely heavily on visuals such as animation and video in order to hook the user. With the ongoing development of UI\/UX design, we see a clearer purpose for the animation as well as greater user control of it in the later version. Bolder colors are a big part of the redesign, which has also moved to incorporate the now ubiquitous hamburger menu.<\/p>\n

The dramatic reduction of text here from the old version to the new version is a key change that\u2019s come with the development of UI\/UX design. Websites now must rely on images, icons, video and animation in order to offer users a simpler and more accessible experience.<\/p>\n

We see again and again the simplification of design with UI\/UX. That\u2019s on display here at Imaginovation, where the header image is wonderfully streamlined to a simple logo with a bold background. Though simple, the design offers users multiple pathways to access information – either through scrolling to uncover it or by clicking through to the hamburger menu.<\/p>\n

Helping Horse Therapeutic Horse Riding Program<\/h2>\n

\"uiux-then-and-now-3\"<\/p>\n

Really back then – Winter 2001<\/a><\/h3>\n

Then – Winter 2010<\/a><\/h3>\n

Now – Spring 2016<\/h3>\n

This last one is really fun, because we can see the evolution over more than a decade of user centered development. The original 2001 site is incredibly simplistic, offering users the bare bones information in a format that is sparse on just about everything. The later update offers some improvements, with a great deal of navigation opportunity for users as well as a dramatic increase in the number of images that can draw a user in.<\/p>\n

We see other hallmarks of UI\/UX design on that first revisions as well, including invitations for users to interact that have popped up all over in the form of logins, donate buttons and social media. However the dramatic changes come on the next revision, which completely changes the site to be much more image driven and thereby compelling.<\/p>\n

On the latest version, we see bolder contrasting colors and a streamlined version of the logo that\u2019s much more readable. The scrolling images showcase the heart of the experience associated with this company. An updated card style format, large icons, incorporation of video and the addition of the hamburger menu all make this newest version easier to navigate and simpler to understand, all while effectively communicating the mission of the organization immediately to the user.<\/p>\n

Why compare?<\/h2>\n

It\u2019s so important that Web designers know and understand where old modes of interaction online came from. Moving forward isn\u2019t possible if we keep making the mistakes of the past, and we can\u2019t learn from them unless we know what was happening. That\u2019s why it\u2019s important to look back at what designs looked like once upon a time. Just as users tend to have short memories when it comes to user interaction, so too can designers fall into that same trap. Comparing UI\/UX designs of the past with the websites that have evolved from them allows us to see where we\u2019ve come from so that we can effectively determine where we\u2019re going.<\/p>\n","protected":false},"excerpt":{"rendered":"

Constant evolution – look around you in the world of technology and you\u2019ll see it everywhere. Nothing stays the same for very long, nothing is static. It\u2019s one of the<\/p>\n","protected":false},"author":218,"featured_media":23679,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[24,4206,4584,35,5633,107],"tags":[400,178,289,115,272,2152,2153,5644,1073,5890,848,3024,2148,677],"yoast_head":"\nUI\/UX Then and Now<\/title>\n<meta name=\"description\" content=\"Constant evolution - look around you in the world of technology and you\u2019ll see it everywhere. Nothing stays the same for very long, nothing is static.\" \/>\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.andysowards.com\/blog\/2016\/uiux-then-and-now\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UI\/UX Then and Now\" \/>\n<meta property=\"og:description\" content=\"Constant evolution - look around you in the world of technology and you\u2019ll see it everywhere. Nothing stays the same for very long, nothing is static.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.andysowards.com\/blog\/2016\/uiux-then-and-now\/\" \/>\n<meta property=\"og:site_name\" content=\"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/andysowardsfan\" \/>\n<meta property=\"article:published_time\" content=\"2016-03-25T20:54:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-15T22:50:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.andysowards.com\/blog\/assets\/ui-ux-then-and-now-anime-epic-stream-design.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1007\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Michael Georgiou\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@andysowards\" \/>\n<meta name=\"twitter:site\" content=\"@andysowards\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Georgiou\" \/>\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:\/\/www.andysowards.com\/blog\/2016\/uiux-then-and-now\/\",\"url\":\"https:\/\/www.andysowards.com\/blog\/2016\/uiux-then-and-now\/\",\"name\":\"UI\/UX Then and Now\",\"isPartOf\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2016\/uiux-then-and-now\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2016\/uiux-then-and-now\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/ui-ux-then-and-now-anime-epic-stream-design.png\",\"datePublished\":\"2016-03-25T20:54:05+00:00\",\"dateModified\":\"2023-03-15T22:50:08+00:00\",\"author\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/40eaa8f79d136409879e9a0a4142a9e4\"},\"description\":\"Constant evolution - look around you in the world of technology and you\u2019ll see it everywhere. Nothing stays the same for very long, nothing is static.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.andysowards.com\/blog\/2016\/uiux-then-and-now\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.andysowards.com\/blog\/2016\/uiux-then-and-now\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2016\/uiux-then-and-now\/#primaryimage\",\"url\":\"https:\/\/www.andysowards.com\/blog\/assets\/ui-ux-then-and-now-anime-epic-stream-design.png\",\"contentUrl\":\"https:\/\/www.andysowards.com\/blog\/assets\/ui-ux-then-and-now-anime-epic-stream-design.png\",\"width\":1007,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/2016\/uiux-then-and-now\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.andysowards.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UI\/UX Then and Now\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#website\",\"url\":\"https:\/\/www.andysowards.com\/blog\/\",\"name\":\"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards\",\"description\":\"Design Inspiration & Business Resources for Creatives\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.andysowards.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/40eaa8f79d136409879e9a0a4142a9e4\",\"name\":\"Michael Georgiou\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f6b2d5b34c009862e94d61c2bbe8d0f1?s=96&r=pg\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f6b2d5b34c009862e94d61c2bbe8d0f1?s=96&r=pg\",\"caption\":\"Michael Georgiou\"},\"description\":\"Michael Georgiou is the CMO and Co-founder of Imaginovation, a full service, turn-key digital solutions company serving Raleigh, NC and Charlotte, NC. He's a dynamic business professional with proven success in creative strategy, online branding, project management and communication projects.\",\"url\":\"https:\/\/www.andysowards.com\/blog\/author\/michaelgeorgiou2\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UI\/UX Then and Now","description":"Constant evolution - look around you in the world of technology and you\u2019ll see it everywhere. Nothing stays the same for very long, nothing is static.","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.andysowards.com\/blog\/2016\/uiux-then-and-now\/","og_locale":"en_US","og_type":"article","og_title":"UI\/UX Then and Now","og_description":"Constant evolution - look around you in the world of technology and you\u2019ll see it everywhere. Nothing stays the same for very long, nothing is static.","og_url":"https:\/\/www.andysowards.com\/blog\/2016\/uiux-then-and-now\/","og_site_name":"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards","article_publisher":"http:\/\/facebook.com\/andysowardsfan","article_published_time":"2016-03-25T20:54:05+00:00","article_modified_time":"2023-03-15T22:50:08+00:00","og_image":[{"width":1007,"height":540,"url":"https:\/\/www.andysowards.com\/blog\/assets\/ui-ux-then-and-now-anime-epic-stream-design.png","type":"image\/png"}],"author":"Michael Georgiou","twitter_card":"summary_large_image","twitter_creator":"@andysowards","twitter_site":"@andysowards","twitter_misc":{"Written by":"Michael Georgiou","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.andysowards.com\/blog\/2016\/uiux-then-and-now\/","url":"https:\/\/www.andysowards.com\/blog\/2016\/uiux-then-and-now\/","name":"UI\/UX Then and Now","isPartOf":{"@id":"https:\/\/www.andysowards.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.andysowards.com\/blog\/2016\/uiux-then-and-now\/#primaryimage"},"image":{"@id":"https:\/\/www.andysowards.com\/blog\/2016\/uiux-then-and-now\/#primaryimage"},"thumbnailUrl":"https:\/\/www.andysowards.com\/blog\/assets\/ui-ux-then-and-now-anime-epic-stream-design.png","datePublished":"2016-03-25T20:54:05+00:00","dateModified":"2023-03-15T22:50:08+00:00","author":{"@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/40eaa8f79d136409879e9a0a4142a9e4"},"description":"Constant evolution - look around you in the world of technology and you\u2019ll see it everywhere. Nothing stays the same for very long, nothing is static.","breadcrumb":{"@id":"https:\/\/www.andysowards.com\/blog\/2016\/uiux-then-and-now\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.andysowards.com\/blog\/2016\/uiux-then-and-now\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/2016\/uiux-then-and-now\/#primaryimage","url":"https:\/\/www.andysowards.com\/blog\/assets\/ui-ux-then-and-now-anime-epic-stream-design.png","contentUrl":"https:\/\/www.andysowards.com\/blog\/assets\/ui-ux-then-and-now-anime-epic-stream-design.png","width":1007,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/www.andysowards.com\/blog\/2016\/uiux-then-and-now\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.andysowards.com\/blog\/"},{"@type":"ListItem","position":2,"name":"UI\/UX Then and Now"}]},{"@type":"WebSite","@id":"https:\/\/www.andysowards.com\/blog\/#website","url":"https:\/\/www.andysowards.com\/blog\/","name":"Daily Business Resources for Entrepreneurs, Web Designers, & Creatives by Andy Sowards","description":"Design Inspiration & Business Resources for Creatives","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.andysowards.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/40eaa8f79d136409879e9a0a4142a9e4","name":"Michael Georgiou","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.andysowards.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f6b2d5b34c009862e94d61c2bbe8d0f1?s=96&r=pg","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f6b2d5b34c009862e94d61c2bbe8d0f1?s=96&r=pg","caption":"Michael Georgiou"},"description":"Michael Georgiou is the CMO and Co-founder of Imaginovation, a full service, turn-key digital solutions company serving Raleigh, NC and Charlotte, NC. He's a dynamic business professional with proven success in creative strategy, online branding, project management and communication projects.","url":"https:\/\/www.andysowards.com\/blog\/author\/michaelgeorgiou2\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/23673"}],"collection":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/users\/218"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/comments?post=23673"}],"version-history":[{"count":4,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/23673\/revisions"}],"predecessor-version":[{"id":45381,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/posts\/23673\/revisions\/45381"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media\/23679"}],"wp:attachment":[{"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/media?parent=23673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/categories?post=23673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andysowards.com\/blog\/wp-json\/wp\/v2\/tags?post=23673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}