WiGraph (Women in Graphics Reseach Outreach) is an organization that provides women researchers in computer graphics, a network to connect scholars with mentors,  encourage and discuss topics, and broaden the field for female academicians.

The goal of this project is to redesign their website, and improve how users search and experience WiGraph information before registering an event or subsribing.

The design of WiGraph should aim to engage users with organized visual and informative elements so users can quickly seek their desired information, however, repetitve components can confuse and hinder users’ visits.

I was brought onto the WiGraph team as the main designer and help guide the design process for our technical chair, Liane. My responsibilities include redesigning the website, creating a brand guide, finalizing a logo, and supporting Liane in various HTML/CSS items.

The timeline for this 4 week project initially spanned across four weeks with weekly sprints ending with progress check-ups.


Section 1︎︎︎ Logo/Branding︎︎︎ 1 week
Section 2︎︎︎ Website designing/coding support︎︎︎ 3 weeks


However, in realizing that Part 2 of the project would not make the deadline for the annual launch of the Berthouzoz Women In Research Lunch in late August, and part of the team being in various time zones due to COVID, I readjusted the timeline to implement room for feedback/guidance in between each sections.


Section 1︎︎︎ Logo︎︎︎ 1.5 weeks
Section 2︎︎︎ Branding Guide︎︎︎ 0.5 week
Section 3︎︎︎ Website designing/coding support︎︎︎ 10 weeks          ︎︎︎3D landing page graphic

I drafted the digital version WiGraph logo in Illustrator with the categories: monogram of Wigraph, a teapot, and a bunny; the latter two being an homage to generative graphics, the Utah teapot and the Stanford bunny. After numerous variations and discussions, the finalized logo came to be a W, I, and G monogram.

         

The challenging step in refining this monogram, was finding the right grid to align it to. I viewed the overall shape to be round in presenting the ‘G’, and to give the opening of the ‘G’ just enough negative space in:

1. the gap where the ends are close to meeting
2. the ‘i’ at the bottom of the G,

so when it is sized down or up across different mediums, it will still look proportionate.

Section 2: Branding Guide

After finishing the logo, I proceeded to piece the branding guide together. The sections I categorized within were: logo, color & typography, elements, and stationary.

The primary palette colors purple and yellow, originating from WiGRAPH’s Berthouzoz Women In Research Lunch founder, Floraine Berthouzoz, were selected by WiGRAPH as another posthumous honor to Berthouzoz when the organization first established.

As a way to continue commemorating Berthouzoz, I refined the colors into 3 hues: Jasmine, Meduium Purple, and KSU Purple, to be used as the main palette across all branding.

Fiery Rose, Yellow Orange, and Yellow Green Crayola, as the secondary palette, upholds the ideas of passion, determination, and growth; all of which, further defines WiGRAPH as place where women can empower not only themselves but each other. I also chose these colors with gender neutrality in mind. Though WiGRAPH is a group that is targeted at women in graphic research, people of all sexual orientations and job ocupations are welcome to join and network.

Proxima Nova Medium and Bold are the principal weights, with Blenny Bold as the secondary weight used to represent WiGRAPH.

Section 3: Website

The first tasks I completed in the redesign of the website were (1) identifying the problem areas to create a sitemap, (2) formulating a grid for my informations to live in, and (3) determining what my site elements are (buttons, icons, graphics, etc.) to use and place in the guide.

Repetition

︎︎︎spotlights information is on the homapage & separate page on the navigation

︎︎︎participate information on homepage has the same effect as asking people to‘get involved’


Navigation

︎︎︎should be pages named carefully to assist users in finding individual informations that are grouped together

︎︎︎provide indication for users to follow along when browsing (e.g. Event Nav >> Event Block >> Event Page)

︎︎︎should not have secondary information shedded to the bottom on a page


Graphics

︎︎︎and/or graphics research should be a key point in presenting an engaging visual


Hierarchy

︎︎︎should have information displayed appropriately by importance (e.g. change in size, color, boldness, leading)

After discovering the areas that needed some help, I created a sitemap to further evaluate the order of information information/pages, and to outline where those pages link to. How that information is presented, and where they link to for destinations are imporatant in a users’ exploration of the website, and is a key aspect in building the site’s structure.

A fitting grid for the WiGRAPH website would be a space that exhibits ‘graphics’ and ‘connection’. For the main grid, I presented a 1:2:5 ratio that designates an area for grpahics/pictures of award winners, events, and social gatherings next to any informations while being read.

Because WiGRAPH is an organization that readily offers networking opportunities for women graphics researchers and more, I wanted the main focus of exploring the website be a connection from the users (the researchers) to WiGRAPH (the graphics network).

Elements

2 Dimensional

3 Dimensional

I envisioned an animated graphic at the beginning of the project for the home, something that would inspire users to discover informations through other pages of the website. The landing page of WiGraph should also display an inviting aspect to networking with other graphic artists and researchers since WiGRAPH works to expand from 2D/3D to other graphic fields.


As the project continued with a readjusted timeline, I used the 10 week sprint to learn a 3D software and create a more suitable component. I performed trial and error during the summer quarantine period to grasp the knowledge on Blender. The objective I struggled the most with, was the lighting. Finding the correct shading and brightness on the studio camera, consumed considerably more time than making and placing each object in position. And as the sprint came to a close, I finished the graphic in time to be placed on the live redesigned version of the website.

Wireframe view


Solid view



Materials view

The Utah teapot is known as a test model in the 3D community, and an equal to the 3D version of a ‘Hello, World!’ program, a phrase used to demonstrate basic programming syntax.

The graphic itself is comprised of the teapot with small spheres/objects pouring out. The teapot represents WIGRAPH’s drive to offer new opportunities for women to discover as a collective in the reseach field, and as this model led the generative graphics industry, the homepage graphic should parallel that idea in leading users from the introduction page to WiGRAPH’s informations.

While the teapot containes the spheres and icons within, the act of pouring is what WiGRAPH sees to: expanding the field and allowing the opportunities to roll out.

These lo-fi/hi-fi wireframes are adapted and revised as WiGRAPH continued to add informations during the 10 week sprint.

 

As the sprints came to an end, all of the components I set out to achieve were happily completed. From creating the logo to topping the site off with my first time 3D graphic, was both facinating and enjoyable to make. Now that I have some knowledge of Blender, I’ve got much exploring to do to improve this skill.

Though the transferring of the design to a live website is an ongoing project for WiGRAPH’s team, I am glad to have had the opportunity to work with such amazing individuals (from all over the country and despite COVID/time difference) in pioneering a space for the womens’ graphics research outreach!