{"id":202,"date":"2020-04-21T19:17:00","date_gmt":"2020-04-21T19:17:00","guid":{"rendered":"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/?p=202"},"modified":"2020-04-25T19:00:44","modified_gmt":"2020-04-25T19:00:44","slug":"quear-music-festival","status":"publish","type":"post","link":"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/2020\/04\/21\/quear-music-festival\/","title":{"rendered":"Quear Music Festival"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p><em>Quear<\/em> is a music festival that represents the voices of the LGBTQ+ community. It is a yearly event that takes place on numerous days with many artists to explore. The purpose of the festival is to provide a place where people can relax and relate to the content that respects their sexualities and identities.<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"506\" src=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.28.03-PM-1024x506.png\" alt=\"\" data-id=\"203\" data-full-url=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.28.03-PM.png\" data-link=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/?attachment_id=203\" class=\"wp-image-203\" srcset=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.28.03-PM-1024x506.png 1024w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.28.03-PM-300x148.png 300w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.28.03-PM-768x379.png 768w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.28.03-PM-1536x758.png 1536w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.28.03-PM-2048x1011.png 2048w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.28.03-PM-945x467.png 945w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.28.03-PM-600x296.png 600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><\/ul><figcaption class=\"blocks-gallery-caption\">Poster Promotions for the Festival<\/figcaption><\/figure>\n\n\n\n<p>The posters feature the artist of the day and include soft gradient background that hints at either their sexuality or gender. This way its settle and is focused more on people and music but still celebrating the LGBTQ+ community. <\/p>\n\n\n\n<p>Taking this project as my foundation, I chose to expand and create a project around Quear Festival for my mentorship at Pound and Grain that Kateland closely helped me with. I decided to do an interactive expansion of a web, serving the purpose of familiarizing the user with the festival as well as an app that would be useful to plan out the day and connect with the community at the festival.<\/p>\n\n\n\n<p>I started with research and looking at other websites that use both web and mobile formats as well as festival webs such as VIMFF and SouthxSouthWest. I followed that step by creating project libraries for my reference.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Branding<\/h2>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"671\" src=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.17-PM-1024x671.png\" alt=\"\" data-id=\"204\" data-full-url=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.17-PM.png\" data-link=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/?attachment_id=204\" class=\"wp-image-204\" srcset=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.17-PM-1024x671.png 1024w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.17-PM-300x197.png 300w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.17-PM-768x504.png 768w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.17-PM-1536x1007.png 1536w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.17-PM-945x620.png 945w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.17-PM-600x393.png 600w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.17-PM.png 1580w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><\/ul><figcaption class=\"blocks-gallery-caption\"><br><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1019\" height=\"1024\" src=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.39.54-PM-1019x1024.png\" alt=\"\" class=\"wp-image-205\" srcset=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.39.54-PM-1019x1024.png 1019w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.39.54-PM-300x300.png 300w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.39.54-PM-150x150.png 150w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.39.54-PM-768x772.png 768w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.39.54-PM-945x950.png 945w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.39.54-PM-600x603.png 600w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.39.54-PM.png 1232w\" sizes=\"auto, (max-width: 1019px) 100vw, 1019px\" \/><figcaption>Art Direction<\/figcaption><\/figure>\n\n\n\n<p> After figuring out how I want my brand to feel I went ahead and started on the art direction and stile tile to further clarify things for myself.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"721\" src=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.42-PM-1024x721.png\" alt=\"\" class=\"wp-image-207\" srcset=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.42-PM-1024x721.png 1024w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.42-PM-300x211.png 300w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.42-PM-768x541.png 768w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.42-PM-945x665.png 945w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.42-PM-600x422.png 600w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.42-PM.png 1324w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Colour Palette<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"558\" src=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.55-PM-1024x558.png\" alt=\"\" class=\"wp-image-206\" srcset=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.55-PM-1024x558.png 1024w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.55-PM-300x163.png 300w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.55-PM-768x419.png 768w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.55-PM-1536x837.png 1536w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.55-PM-2048x1116.png 2048w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.55-PM-945x515.png 945w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.40.55-PM-600x327.png 600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Style Tile<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Information Architecture<\/h2>\n\n\n\n<p>When I figured out the look I started planing my pages with the use of <em>Information Architecture<\/em> which helps content planning before starting on the wireframes or any design thinking. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"612\" src=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.41.08-PM-1024x612.png\" alt=\"\" class=\"wp-image-208\" srcset=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.41.08-PM-1024x612.png 1024w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.41.08-PM-300x179.png 300w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.41.08-PM-768x459.png 768w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.41.08-PM-1536x918.png 1536w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.41.08-PM-2048x1225.png 2048w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.41.08-PM-945x565.png 945w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.41.08-PM-600x359.png 600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Information Architecture for main website pages.<\/figcaption><\/figure>\n\n\n\n<p>The top box representing the page and the boxes under explain for the content that needs to appear on the page. I went ahead and did detailed descriptions of each page as well as any secondary pages as shown below.<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"951\" src=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.46.55-PM-1024x951.png\" alt=\"\" data-id=\"209\" data-full-url=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.46.55-PM.png\" data-link=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/?attachment_id=209\" class=\"wp-image-209\" srcset=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.46.55-PM-1024x951.png 1024w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.46.55-PM-300x279.png 300w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.46.55-PM-768x713.png 768w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.46.55-PM-1536x1426.png 1536w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.46.55-PM-945x877.png 945w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.46.55-PM-600x557.png 600w, https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Screen-Shot-2020-04-23-at-12.46.55-PM.png 1566w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/li><\/ul><figcaption class=\"blocks-gallery-caption\">Example of a detailed content description for a specific page.<\/figcaption><\/figure>\n\n\n\n<p>This step further enhances the understanding of the content without beginning on design. When I was happy with the foundation and planning, I moved on to my wireframes making any changes that were necessary.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wireframes<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/wireframes-walkthrough.mov\"><\/video><\/figure>\n\n\n\n<p>This step helped me visualize what I wanted to create without adding colour or any particular design choices. If you look at the final design you will notice that a lot of changes have taken place since the wireframe stage but it is always a good start.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Polished Look<\/h2>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-content\/uploads\/sites\/1413\/2020\/04\/Final-walkthrough.mov\"><\/video><\/figure>\n\n\n\n<p>Thank you for your time and big thanks to Kateland who have taught me so much during my mentorship with her. I will be developing the mobile app during the summer and hope to include this project in my final portfolio next year.<\/p>\n\n\n\n<p>Interested in more of my work or illustration commissions? check out my Instagram <a href=\"https:\/\/www.instagram.com\/whada99\/?hl=en\">@whada99<\/a> and feel free to shoot me a message.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Quear is a music festival that represents the voices of the LGBTQ+ community. It is a yearly event that takes place on numerous days with many artists to explore. The purpose of the festival is to provide a place&#8230; <a class=\"more-link\" href=\"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/2020\/04\/21\/quear-music-festival\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1408,"featured_media":216,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[26,25,27],"class_list":["post-202","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-interactive-design","tag-queer","tag-web-design"],"_links":{"self":[{"href":"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-json\/wp\/v2\/posts\/202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-json\/wp\/v2\/users\/1408"}],"replies":[{"embeddable":true,"href":"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-json\/wp\/v2\/comments?post=202"}],"version-history":[{"count":1,"href":"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-json\/wp\/v2\/posts\/202\/revisions"}],"predecessor-version":[{"id":213,"href":"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-json\/wp\/v2\/posts\/202\/revisions\/213"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-json\/wp\/v2\/media\/216"}],"wp:attachment":[{"href":"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-json\/wp\/v2\/media?parent=202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-json\/wp\/v2\/categories?post=202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eportfolios.capilanou.ca\/annatsybulnyk\/wp-json\/wp\/v2\/tags?post=202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}