Process of using and drawing illustrations for visual enhancement of the CORE website.
The website needs visually exciting content that is inclusive, within budget and is informative.
After researching stock photography, quoting a photoshoot, we decided that illustrations would be the best solution for adding visual content to the website. Our clients were a part of a mental health organization focused on improving treatment methods for PTSD in veteran populations.
Research and Creating Illustration Rules
We looked at a lot of other websites to get ideas about how to incorporate illustrations into the site. We also got ideas about the style we wanted to create. What we decided was that if we drew less-human-like characters, we would avoid the issue of needing to represent every type of person. We wanted to create illustrations that were friendly, helpful, had emotions, but were gender, race, and age neutral. We also realized we needed to make the illustrations simple so that we could quickly create multiple illustrations just by tweaking a few components.
Sketches and the Illustration process
I first started with sketches and the creative director gave me feedback, and then we showed the client our idea. They loved the sample drawings, and we just kept creating. My process was to come up with as many ideas as possible to illustrate the topics. I would sketch on my iPad, bring the designs into AI, do a little cleaning and then add to our “base” illustration characters. The creative director and I worked closely, and she was great at giving feedback pushing my drawings. It was a solid team effort to produce the best possible designs. In total, the website has over 90 illustrations!
Final designs for CORE website.
Final designs with examples of nestled with text. Using illustrations can more fully illustrate the concepts then photos.
Before (left) and After (right) designs. How we transformed boring chart and used illustration and interaction to use illustrations to visually reflect the information in the text.
Case Study Illustrations
For one of the training topics, we wanted to illustrate case study. We decided that more people-like illustrations would convey the content the best. For the people-like illustrations, we worked closely with the client to pick appropriate skin tones and genders for the drawings. Having the drawings digital enabled us to make many samples for the clients to review. We wanted to be extremely cognizant and represent as many people as possible. We also know we are not perfect, and if the client does give feedback, we can quickly change colors and drawings as needed. Not so easy if we did a photoshoot.
A final illustration for the case study section (left). Integration of therapy method called Chain Analysis with illustrations of of the event to more fulling explain the situation and break up the long text block.
Website launched in fall of 2017.please visit https://core-exchange.org/ Please use the below login credentials. This helps keep the data clean. Email Address: email@example.com Password: coreaccess
I worked with an amazing web design studio, Punctum Design http://punctumdesign.com/
adding visual enhancement to the website.
Our clients were a part of a mental health organization focused on improving treatment methods for PTSD in veteran populations. We were tasked with redesigning their PTSD training website for non-VA therapists.
Creative Director: Katie Bernacchi
UX Designer and Illustrator: Courtney Beyer
Website Engineer: Mike Smith
Copy Editor: Jennifer Kindred