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.
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.
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.
CSS3 animation can be implemented into the loading screen, providing the user a visual introduction to the app, during wait time.
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.
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.
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.