Designing Social Networks

In this module led by Ewan Steel, the ultimate goal was to design a very niche social network (small scale or large scale), revolving around certain topic, domain or interest.

In a team with Dean Taylor and Rich Cahill, we went through a brainstorming and landed at printmaking. Rich already had some experience with it, I am still interested in it since the printmaking workshop in DJCAD just draws me in to make some stuff there.

In the beginning we created three social network concepts, one of which was the “Print Workshop Keyhole” – a social network allowing people to interact within a print workshop, as well as for the public to see what’s happening there.

Our first rough concept
Our first rough concept

After talking our concept through, we decided for a name “Inka” – combination of the printmaker’s blood – Ink, and Inca tribe (no obvious relation there). We moved to the prototyping part. Rich made amazing wireframes which served as a base for the website.

Rich's wireframes
Rich’s wireframes

Inka Branding

I decided to go for capturing the naturalness of the ink splats (water-dilluted ink), shooting them by DSLR from perpendicular angle at improvised photo studio at DJCAD. The logo is variable in both color and shape, creating 4 moods for the entire website – every time, the accent color in the whole website will correspond to the one of the logo. I’ve ended going for 4 colours, all primary (red, green, blue) + secondary orange, all hues very saturated (little bit of postprocessing). The ink was dilluted just a little bit, to preserve the thickness and glossiness.

Inka logo thumb
Attempt 1 – Ink too dilluted, boring drops because of low speed on impact

After the first attempt, I dilluted the ink less and captured something that I was really happy with. I incorporated that into a logotype, using Apercu typeface.

Inka logo with four colour variations
Inka logo with four colour variations (magnify to see them)

Typeface of choice here is Source Sans Pro, very basic, clean typeface with a bold weight to use in this case, highly legible. I didn’t want to attract attention to the type itself, but I am bored by helvetica and I appreciate that Source Sans is little bit more novel (compare the terminals of lowercase a for example)


Inka webdesign

Rich has started with the webdesign which he passed onto me to develop it further, and I really enjoyed that. His initial direction with pure black, white & red was just perfect. Soon, quite neat design was looking at me from the Photoshop. All playing by the rules of the grid 🙂

Inka design in photoshop, under development.
Inka design in photoshop, under development.

The prototype

I was tasked to create a prototype of the social network concept website. I tried to do my best, preserving responsivity, smart interactions, good graphic design translated into means of HTML and CSS. I quickly moved from photoshop to coding and did all the design adjustments there immediately. A nicely looking prototype was soon in the browser – take a look at it if you like 🙂

This prototype is changing the colour schemes of the design if you press number keys 1,2,3,4. It also uses cookies to manage your session and uses local storage to store a comment for an art (the elephant lino) – this was done for the prototype presentation.

Click to view the actual coded prototype. Use keys 1,2,3,4 to change colours 🙂

The End

And that was it. Actually, it wasn’t. We then went with Dean to the DCA itself, to present these guys what we did. We received very warm response from Elaine Shemilt, printmaking artist working in the DCA Dundee. This project was an amazing experience with great classmates on who I can truly rely. I really enjoyed it and secretly wish to do some more stuff with them both in the future 🙂

Final state of the wall at my desk – stuff happened here!
Final state of the wall at my desk – stuff happened here!