Visual Design

Anticipating the Visual Design expectations of the user.

The Visual Designer delves deeper into the fine details of the user experience through visual representation of the product. IDX - Interactive Design Experience is a major component of the Visual Designers responsibility.

As a Visual Designer, I take the information that the UX Designers have obtained which provides insight to the user. The deliverables provided by the UI Designer provides me a starter point of the generalize layout design. Anticipating the user's expectations of initial visual expectation, along with anticipating the user's visual expectation of the systems response ensures an optimal user experience.

Using my knowledge in coding, I can assist in the transition from flat design to product development by supplying HTML(5) and CSS coding to the development team.

Visual Design

Loading Screens

Engaging the user during system processing.

When the system is processing information, engaging the user can be achieved through the use of loading screens. The style of the loading screen should be consistent with the look and feel of the website or mobile application. Loading screens can be translucent, allowing the user a peak at what the system in loading or they can be opaque.

There are several methods of creating a loading screen. They can be done in Photoshop using a gif, or with coding. The samples I am showing include both.


Geometric Shape

Translucent loading screen.

This loading screen encapsulates the material design style of the mobile app. The user is provided visual status of the system's progress. This is done through the system messaging shown in the bar area as well as physically viewing the progress through the translucent screen.

Geometric shape loading screen.

Coded Transition Screen

Opaque loading screen.

CSS3 animation can be implemented into the loading screen, providing the user a visual introduction to the app, during wait time.

Carillu and her friends, all love playing with numbers!

Do you like to play with numbers?

Let's Play a Game

Click on each friend to find their favorite divisible numbers.

Picture of Carillu and her friends.

2

3

4

5

6

7

TIP Box

Mockup Design

Creating designs to assist in the transition from flat design to product design.

Visual Designers provide a real life representation of the product design. This assists in the development team in having a visual reference to the end product result.

In many instances, my skills in HTML(5) and CSS are utilized by my ability to provide the development team with HTML5 and CSS to specific components of the system. This allows the development team to focus on more complex coding.

RVC Home Page

Click on image to expand.

RVC Navigation

Click on image to expand.

RVC Referee Page 1

Click on image to expand.

RVC Referee page 2

Click on image to expand.

RVC Membership

Click on image to expand.

RVC Member Confirmation

Click on image to expand.

RVC Dashboard

Click on image to expand.

WEX Black Board

Designing the system the user will engage with.

Blackboards provide a quick reference to the design and development team. Each component is shown along with the font choice and color scheme codes.

When I am asked to create the Visual Design for a product, in many cases there is a need to assist in the development of the product identity. All of my blackboards will contain the company name, color scheme, font and all the UI designs needed to the website or app creation.

When I am working in a team environment and my role is UX, UI, IA and HCI I provide the developers with a complete file that allows them to code the website or application. My complete UI package will be a zip file which contains wireframes, prototype, mockup, fonts, UI designs, images, copy (if provided for mockup) and black board. This provides all the necessary items that a developer will need to code the website or application.

  • Blackboard Design
  • Mockup Design
  • Prototype Design
  • Images in exact size for input into code
  • Icons
  • Color Palette code in LESS
  • Font File
  • Video Files
  • Animation Files or Coding
Visual Design for WEX prototype.

Click on image to expand.

User Storyboard

Seeing the User's Process

Storyboarding can provide greater insight to the user's experience by visually exploring the process they will take throughout their engagement with the system or application.

This storyboard shows a sample of the type of boards that I create to bring the user task to life.

Storyboard

Click on image to expand.