This content is password protected. To view it please enter your password below:

Password:

Your message is delivered successfully. We will be in touch shortly.

UI=User Interface

The layer where users interact with the machine.

UX=User Experience

How users feel when they are interacting with the UI.

Principles

1. Hierarchy
2. Contrast
3. Consistency

1. Hierarchy

• Size – Users notice larger elements more easily.
• Color – Bright colors typically attract more attention than muted ones.
• Contrast – Dramatically contrasted colors are more eye-catching.
• Alignment – Out-of-alignment elements stand out over aligned ones.
• Repetition – Repeating styles can suggest content is related.
• Proximity – Closely placed elements seem related.
• Whitespace – More space around elements draws the eye towards them.
• Texture and Style – Richer textures stand out over flat ones.

Example

This is a web page. Or you could call it a document. In the body of the page, all the text has the same size and style. To find what it’s about, you must read the lines to find the keywords. However, the pure texts are not interesting. When people view a web page, they don’t read the text. They scan the page fast. In this case, you need to highlight the important words to help your users find where they are and what they need.

This is the completed design of the page. In the header, I used yellow in the background and big font size on the title “PEARS”. The Italic-styled text below it explains what the title means. If the users want to know more, they can continue reading. Otherwise, they may scroll down. In each section, the big heading draw people’s attention telling them where they are and what it is about. With headings, we broke down the page content into different visual blocks. Every time a user moves from one section to another, he/she focus only on one thing. By browsing the heading text, he/she could read the information he/she needed.

2. Contrast

3. Consistency

• Color
• Style
• Typography

Last year, my university updated its CMS template. Most departments started to migrate their old website to the new template. At the same time, a new school, the School of Design, Architecture, and Art was being planned. The new school will include three current departments, Architecture, Landscape Architecture and Visual Arts. As a part of the merging, they wanted to rebuild the website. Previously, the Department of Visual Arts has one website; and the Department of Architecture and Landscape Architecture was sharing another one. In this project, we redesigned three websites and a portal website to connect them.

The design of the current website looked outdated.  The navigation was confusing. Sometimes, finding useful information through it was not easy for new audiences.

Very soon, I started my work and designed a new home page for the website.  When I started to implement the design on the CMS, I realize that my design might be too complex for it. The system predefined a style, and all the users cannot change it but follow it. I assume that the template was designed by the IT staff, without consulting a designer. Given the system styles, it is challenging to build a high-quality website. To implement my design on this CMS, I met some challenges. Among them are center-aligning headings, inserting videos to the header backgrounds, preventing blurring of texts in images.

The first thing I did is to request the features needed in my design. Since the IT department is managing the CMS, they allow users to request new features to them. If approved, they could be added to the system. We contacted that department and submitted the five features we wanted, which include text alignment, video background on headers, mouse hover effects, etc.  However, they rejected all of our requests with a consideration of accessibility and mobile compatibility. So, we have to use what they provided.

Our department hired an advertising company to produce a promotional video. The outcome is fantastic. So, the school wants to insert the video, or just short footage of the video, into the home page header, which is not supported. The system only supports image format to be inserted into the header, such as jpg, gif, png, and SVG. Immediately I realized that we could convert the mp4 file to a .gif file. I ran an experiment. I imported the video to Adobe Premiere and made a short clip, then saved it as a gif image. After compressing the gif from 120MB to 6MB, I finally inserted a video into the header and made it work. However, in a later system update, the IT department disabled gif as a header background. So, we have to look for other solutions. Actually, we can embed gif image to an SVG then insert it into the header and that was what I did. In my XD file, I imported the gif image and converted it to SVG format. It worked well on our home page; and the loading time was reasonable.

Except that, there were more applications of SVG in this project.

SVG stands for Scalable Vector Graphics. It is widely used in vector graphics, such as icons or charts. The most significant benefit of this format is scalability. Since it never gets blurred, the developers can use it in any size with just one file. If they want to use bitmapped images like PNG or jpeg, they probably have to export multiple files with different sizes to reduce loading time and preventing the pictures from getting pixelated.