top of page
Writer's pictureNora Carr

Visual Design For UI

When designing a user interface (UI) the first and most important step is to create an inventory of the type, images, and kinds of content you will be featuring. This is done for projects small and large and is important because it offers a framework to work off of and allows one to visually see where they are in their thought process and project in general. As the project progresses this framework will continue to expand and change. The term “interface inventory” was created and become popularized by Brad Frost. He summarizes that interface inventory is “similar to a content inventory, only instead of sifting through and categorizing content, you’re taking stock and categorizing the components making up your website [or product]. An interface inventory is a comprehensive collection of the bits and pieces that make up your interface.

When it comes to interface inventory, one must first take screen shots of all the content that has been created as this allows you to spot any differences or inconsistencies which must then be fixed. It is important to consider every component that is used within the user interface. Some components include typography which can be found in headings and subheadings. Another common component is images which include logos and images. Forms are also components and can be found in select menus and text inputs. After all components have been accounted for the next step is to categorize everything so that it is easily presentable. This is ultimately where the team aspect of things come in as you go through everything together.

According to Andy Clarke we must design “systems and not pages”. Instead of focusing on the pages alone one should instead focus on the creation of the system and why those pages are being built in the first place. ‘Atomic Design’ is a methodology that focuses on five different levels which are atoms, molecules, organisms, templates, and pages. By focusing on the most basic level of the building blocks of design, we can then design and build anything.

Thankfully as designers we have many tools that are at our disposal. These include UI kits! UI kits are “systematically designed sets of user interface components”. These kits can vary from various forms of social media screens, to basic Apple and Android features, and e-commerce apps among many others. When creating my three design comps for my app redesign I was able to use three different UI kits. They were fully accessible to the public and free.

In UI design it is important to remember that there are many ways something can be done. One person may go from A to B one way while the person next to them go about it a completely different way. The same can be said for interactions, transitions, and animations. For example, I can immediately think of three different ways a screen may go from to another– swiping left to right, swiping up, or swiping right to left. The challenge then becomes finding what works and what doesn’t.

1 view0 comments

Recent Posts

See All

Prototype 2

https://invis.io/VW10TPPADCQ4 carr_artifacts11Download The second prototype my partner and I created was a mobile app for Ability Media...

コメント


bottom of page