Cover credit: pinar yoldas's fool's fowl (2013, modified with Georg Fischer's jpg-glitch tool)
During the Spring of 2017, artist and educator Heather Dewey-Hagborg, who at the time was a Something in Residence (SIR) at ITP, reached out to students to support her in development of Refresh, a biennial at the intersection of Art, Technology and Science. During this time we developed the brand assets and started working on a crowdfunding campaign. After that, during the summer, I carried on to make the brand guidelines docs, redesigned the website and made the event’s dossier.
![](http://pilargomezruiz.com/wp-content/uploads/2018/01/refresh-2-300x225.png)
Materials, tools and tech used
Sketch, Illustrator, InDesign HTML, CSS, jQuery
![refresh-logo refresh-logo](http://pilargomezruiz.com/wp-content/uploads/elementor/thumbs/refresh-logo-1-nkq5iqviz7njeuc3ot9kjpsc4jm1wzsvikie8zrfso.png)
Shared credit
Kar Rosen, Dorothy Chi Hung Lam & Yutong Zhang designed several branding assets. Here’s an extract from our proof of concept presentation to Heather. The final logo (above) was designed by Dorothy with a motif made by Kar.
![](http://pilargomezruiz.com/wp-content/uploads/2018/01/forms-1024x512.png)
Brand guidelines
After Heather and her team chose a logo and a color palette, I went on to design a document with the brand guidelines. Here are some excerpts:
![1_brand-guidelines](http://pilargomezruiz.com/wp-content/uploads/2018/01/1_brand-guidelines.png)
![2_brand-guidelines](http://pilargomezruiz.com/wp-content/uploads/2018/01/2_brand-guidelines.png)
![3_brand-guidelines](http://pilargomezruiz.com/wp-content/uploads/2018/01/3_brand-guidelines.png)
![4_brand-guidelines](http://pilargomezruiz.com/wp-content/uploads/2018/01/4_brand-guidelines.png)
![5_brand-guidelines](http://pilargomezruiz.com/wp-content/uploads/2018/01/5_brand-guidelines.png)
![6_brand-guidelines](http://pilargomezruiz.com/wp-content/uploads/2018/01/6_brand-guidelines.png)
![7_brand-guidelines](http://pilargomezruiz.com/wp-content/uploads/2018/01/7_brand-guidelines.png)
Web design
This was the first time that I used HTML, CSS and a bit of jQuery for a real-life thing. I tried to comply with HTML semantic markup’s best practices and divided the CSS neatly into sections, with an index, so as to make it easier for other collaborators to modify the site. The site is hosted on a private Github repository, but below are some screenshots.
![Captura de pantalla 2018-01-21 a las 22.44.12](http://pilargomezruiz.com/wp-content/uploads/2018/01/Captura-de-pantalla-2018-01-21-a-las-22.44.12.png)
![Captura de pantalla 2018-01-21 a las 22.44.19](http://pilargomezruiz.com/wp-content/uploads/2018/01/Captura-de-pantalla-2018-01-21-a-las-22.44.19.png)
![Captura de pantalla 2018-01-21 a las 22.44.26](http://pilargomezruiz.com/wp-content/uploads/2018/01/Captura-de-pantalla-2018-01-21-a-las-22.44.26.png)
![Captura de pantalla 2018-01-21 a las 22.44.33](http://pilargomezruiz.com/wp-content/uploads/2018/01/Captura-de-pantalla-2018-01-21-a-las-22.44.33.png)
![Captura de pantalla 2018-01-21 a las 22.44.40](http://pilargomezruiz.com/wp-content/uploads/2018/01/Captura-de-pantalla-2018-01-21-a-las-22.44.40.png)
![Captura de pantalla 2018-01-21 a las 22.44.50](http://pilargomezruiz.com/wp-content/uploads/2018/01/Captura-de-pantalla-2018-01-21-a-las-22.44.50.png)
![Captura de pantalla 2018-01-21 a las 22.45.09](http://pilargomezruiz.com/wp-content/uploads/2018/01/Captura-de-pantalla-2018-01-21-a-las-22.45.09.png)
Mockups for responsive site
Here are some mockups I presented to Heather’s team for a new responsive landing page (coding pending).
![](http://pilargomezruiz.com/wp-content/uploads/2018/01/mockups-857x1024.png)
Dossier
Here are excerpt of the event dossier that I also designed using the brand assets:
![](http://pilargomezruiz.com/wp-content/uploads/2018/01/dossier-1024x512.png)