{"id":229,"date":"2024-01-23T18:18:21","date_gmt":"2024-01-23T18:18:21","guid":{"rendered":"https:\/\/www.nua-ux.design\/maggie-duca\/blog\/?p=229"},"modified":"2024-01-23T18:18:21","modified_gmt":"2024-01-23T18:18:21","slug":"in-a-punk-mood","status":"publish","type":"post","link":"https:\/\/www.nua-ux.design\/maggie-duca\/blog\/y2\/experience-website\/in-a-punk-mood\/","title":{"rendered":"In A Punk Mood"},"content":{"rendered":"\n

\\ Experience Website \\<\/p>\n\n\n\n

<\/div>\n\n\n\n

To create the experience of a punk event I looked at online magazines and physical magazines as examples of visual design. I settled on punk visuals as the science websites and mathematical imagery were not that engaging. They didn’t communicate well the event itself.<\/p>\n\n\n\n

<\/div>\n\n\n\n
PUNK MAGAZINES<\/h5>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

Most online magazines looked not quite what I expected them to. They were sleek and well-curated, the punk being only in the content and not much in the visuals. The only one that stood out was Punk Rocker<\/a> because it was the most chaotic website you could encounter. Maybe that’s punk. Or maybe just mad. I did not want my website to turn neither of those things; sleek and neat, nor complete and utter chaos which is a headache to navigate.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

For branding inspiration I looked at physical magazines from the library. I took note of the typefaces and type hierarchy, of colour usage and photographs, as well as any other visuals which communicate the idea of punk.<\/p>\n\n\n\n

<\/div>\n\n\n\n
UI BRANDING<\/h5>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

The challenge of this UI was to combine the linear and calculated science part with the loud and bright punk part. To express the character of punk I chose bright colours. But to have them work on screen I tested them using a contrast checker<\/a>.<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

For the logo I leaned into the science part. Eventually, inspired by the periodic table, and the representation of scandium “Sc” and phosphorus “P”, I created the logo for science + punks.<\/p>\n\n\n\n

<\/div>\n\n\n\n

miro link: Project 3 \/ Experience Website \/ Maggie<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

\\ Experience Website \\ To create the experience of a punk event I looked at online magazines and physical magazines as examples of visual design. I settled on punk visuals as the science websites and mathematical imagery were not that engaging. They didn’t communicate well the event itself. PUNK MAGAZINES Most online magazines looked not […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"_links":{"self":[{"href":"https:\/\/www.nua-ux.design\/maggie-duca\/blog\/wp-json\/wp\/v2\/posts\/229"}],"collection":[{"href":"https:\/\/www.nua-ux.design\/maggie-duca\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nua-ux.design\/maggie-duca\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/maggie-duca\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/maggie-duca\/blog\/wp-json\/wp\/v2\/comments?post=229"}],"version-history":[{"count":18,"href":"https:\/\/www.nua-ux.design\/maggie-duca\/blog\/wp-json\/wp\/v2\/posts\/229\/revisions"}],"predecessor-version":[{"id":260,"href":"https:\/\/www.nua-ux.design\/maggie-duca\/blog\/wp-json\/wp\/v2\/posts\/229\/revisions\/260"}],"wp:attachment":[{"href":"https:\/\/www.nua-ux.design\/maggie-duca\/blog\/wp-json\/wp\/v2\/media?parent=229"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nua-ux.design\/maggie-duca\/blog\/wp-json\/wp\/v2\/categories?post=229"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nua-ux.design\/maggie-duca\/blog\/wp-json\/wp\/v2\/tags?post=229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}