What is the difference between UI & UX design?



You'll probably get a variety of different answers due to the fact that both UI and UX design have that distinct cross-disciplinary character that makes it hard to have a single, solid definition. Here's my perspective on it though. Some random thoughts on the process itself that would hopefully help you distinguish between the two.

UX Design 

UX architecture intelligently provides for the user's interactive experience via features and functionality of a software-based product or service. This is achieved through a UX process which includes user persona definition, user scenarios/task flows, primary and edge use cases, architecture hierarchy of content and user decision points, etc... The UX-er is known as the primary user-advocate on a team, thereby leading the efforts around understanding the user needs/desires along with balancing those of the business stakeholders. UX documentation informs (and is informed by) content and development requirements; UX informs creative. There is significant interplay between these core disciplines throughout the development process at large, but simply put: developers are building what UX is architecture, and creative provides the visual look-and-feel based on UX architecture and brand requirements.

 UI Design


UI (GUI) visual design is the graphical user interface of a software product/service. The GUI is the visual layer informed by the UX architecture, but based on branding/style guide and visual design principles. You can have a GUI without UX and UX without a GUI. The design of a GUI should be heavily informed and guided by the problems that were solved during UX process. UX design is rarely informed by the creative. (If it is, you're doing it incorrectly). GUI deliverables include mood boards, sketches, mockups, visual toolkits, final art assets and even CSS specs.

Comments

Post a Comment

Popular posts from this blog

How to install and configure Alphabetic Pagination WordPress Plugin?

Image
Alphabetic Pagination is a WordPress Plugin that helps the users to filter the post/pages and woocommerce products with Alphabet. Its easy to install and configure. You can display horizontally or vertically and Alphabets in lower/uppercase. Click here to download This article will help to install and configure Alphabetic Pagination on your WordPress website. 1. First login to your admin panel, go to the plugin section click on 'add new'.     admin panel -> plugins -> add new 2. Write Alphabetic Pagination in top-right search bar   3.  Click on install and then click on activate, as shown in the  figure(1) above. 4.  Go to settings section click on Alphabetic Pagination. You will see the admin section of Alphabetic Pagination. as shown in the figure(2) below. Now its time to configure simply: 1. Select the position of your page or post page where you want to show pagination, as show in the figure(2) above. 2. T...
Read more

How to Add Google Web Fonts in WordPress Themes the “Right” way

Adding Google Web Fonts in WordPress Themes We have mostly seen folks using the first two methods. The easiest way would be to open your theme’s style.css file and paste the fonts code that you got in the @import tab, like this: @import url(http://fonts.googleapis.com/css?family=Lora); @import url(http://fonts.googleapis.com/css?family=Oswald);     You can also combine multiple font requests into one.  Here is how you would do it:   @import url(http://fonts.googleapis.com/css?family=Lora|Oswald);   This method is super easy but it is not the best way add Google fonts to your WordPress site. Using @import method blocks parallel downloads, which means the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content. If you MUST use @import, then at least combine multiple requests into one.    You will most likely have to edit your header.php file, and paste the followi...
Read more

How to check if it is WooCommerce page?

function is_woocommerce_page () {         if(  function_exists ( "is_woocommerce" ) && is_woocommerce()){                 return true;         }         $wc_keys   =   array (                                         "woocommerce_shop_page_id" ,                                         "woocommerce_terms_page_id" ,              ...
Read more