angela frakes
black_square copy.png

Plastik

branding, website for art journal

Project Manager & UX Lead
Branding and website for academic journal
a.k.a. “A Balancing Act: Print/Web, Art/Science, Management/Design”

2017 / http://plastik.univ-paris1.fr

I managed a team of seven peers over a period of eight months to produce an end-to-end website and visual identity for an academic journal. Plastik explores the bridge between art and science, presenting writings on how artists respond to, utilize, and inform the sciences. Our graphic designers produced a well-researched visual identity based on the periodic table, with an emphasis on the images featured in most of the articles. Our UX team created a three-column interface that was reminiscent of the journal’s original paper design, with unique technical elements for the images and footnotes. Our developers then built a custom WordPress theme with a solid back-end and an anchor system for the images and footnotes.

product

product

  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.

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.

issues.jpg
plastik_article1.png
  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.

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.

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.

process

process

  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.

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: 

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

a) Fibonnaci numbers

 b) linear & columnal frameworks

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).

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.

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.