STYLE GUIDE / Counter-clockwise from top left: One version of the new logo. The graphic identity is loosely based on the periodic table but the logo is kept very simple to allow for the valorization of the photographic image throughout the review. / The font styles used on web and print / The font hierarchy shown within an article / An example of a full-screen cover image used for each issue / The abbreviation system used for the logo and menu / The grid system for various elements throughout the site and the branding.
ANCHOR SYSTEM / While reading an article in the main column, the right column automatically scrolls to show the image cited in the text. Dynamic footnotes are also available in the right column.
DOWNLOADABLE PDFS / I additionally designed a template for a PDF version of the articles that is based on the article page of the website. Each article is available for download directly from its page.
BRAINSTORMING / In the exploration process, as product manager I emphasized the ideation process and focused my designers and developers on a hollistic approach to the product design and implementation. We worked together from beginning to end and I was able to cultivate design ideas from my developers and technical ideas from my designers. We started out by exploring the theoretical bridges and divides between the arts and sciences, in order to formulate a visual response to the mission of the journal.
ORIENTATIONS / Based on our user research and visual benchmarking, we presented the client with three “orientations” to choose from before starting the production process. We surveyed a selection of professors and students to determine the most coherent branding and user-friendly interface for the online journal. The three orientations were based on scientific theories:
a) Fibonnaci numbers
b) linear & columnal frameworks
c) the periodic table. Our client ended up choosing this orientation, but we incorporated elements of each of the others into the final design: the full-screen layout for the lecture page from (a) and the linear anchor system for the articles from (b).
SITEMAP / We then dug deeper into our user research, creating use cases and personas to inform the necessary pages. Once the sitemap was created we then continued prototyping, testing, and producing refined iterations of each page.