saragolakthesis

[saragolakthesis]

Exhibition Sketch (Refined) 

[saragolakthesis]

Project Description (Refined)

Dystopia examines the blurring boundaries between the physical and digital environments. The goal is to encourage a lifestyle that is balanced between the two realities. This notion is the core of the call-to-action campaign, Setting Digital Boundaries, where I invite you to take a look at your own digital habits and take charge of your digital presence. A dystopian model is used to portray a society that is highly dependent on digital technology and borders a state of dehumanization. As much as we are appreciative of online openness, many of us do not realize that our data is out there in the world. For example, we are confronted with the dangers of sharing too much information on social networks. By familiarizing yourself with the concept of digital citizen, you will be able to protect your personal data, such as preventing a digital trail.  

Setting Digital Boundaries campaign encompasses a video, poster, sticker and a website that provides more information on data privacy and guidance on obtaining a digital citizenship identity.  

[saragolakthesis]

*Temporary Domain Link* (will be dystopiaonline.ca)

Website // Final Output // One-page Scroll, Interactive 

We Are Digital Citizens: Set Digital Boundaries

Conceptual Direction Process

The third major project is a website that is created to provide you with essential information that you need to be informed of as a user of technology. It acts as a guide for you to use towards obtaining a digital citizenship identity. The goal is to encourage you to understand the responsibilities of using the internet in a safe and appropraite manner. To create an engaging experience for the learning process, I decided to create a parallax website that is interactive and easy to navigate through. A way-finding system is created in order to enhance your experience through the use of a consistent colour palette and digital interface icons. The colour yellow is used to show an object that is clickable or currently being interacted with. Blue is used as a reference to the logo and the theme of technology (blue is often associated with the digital platform). In terms of content, the website includes tips and facts and in-depth research information on certain topics in reference to the 9 elements of digital citizenship. These topics are meant to answer questions you may have and teach you something you may have not known before. The elements are also referenced in the film output of my thesis through icons and “Did you know” statements.  

Research Sources:

(This includes graphic icon sources used on the website, process book cover and in the short film)

AnchorFree. “The Ultimate Guide to Protecting Your Privacy & Identity Online". Who is Watching and Tracking You?. 2018. Web. 12 April 2018.

Blakeman Steve. “LinkedIn”. The 5 Golden Rules of 'Netiquette'​ that you Need to Know. 2017. Web. 5 April 2018.

British Columbia. “Distractions While Driving - Cell Phones and Other Devices”. Rules and Penalties. 2016. Web. 6 April 2018.

Brown Bruce. “Digital Trends”. Cops Can’t get Drivers to put Phones Down. 2016. Web. 6 April 2018.

Canadian Civil Liberties Association. “Privacy 101". Consumer Tracking and Surveillance: Who is Watching You?. 2016. Web. 12 April 2018.

Carver Courtney. “Be More With Less”. When Information Becomes Clutter and Noise. 2015. Web. 8 April 2018.

Cossais Cyndi. “BRM Capability". F2F vs. Digital Communication: Pros, Cons, and When to Use Each. 2017. Web. 10 April 2018.

Cresnar Gregor. “FlatIcon”. Multimedia Collection. 2018. Web. 5 April 2018.

Curlew Abigail. “Rabble". Social Media is Amazing at Manufacturing our Consent and It's not Ok. 2016. Web. 10 April 2018.

Eli Shaprio. “FAQ". What is Digital Citizenship?. 2018. Web. 5 April 2018.

Flatow Ira. “Tips for Protecting Privacy Online". Talk of the Nation: Science Friday. 2006. Web. 12 April 2018.

Get Safe Online. “Safe Internet Use". The Risks. 2018. Web. 12 April 2018.

Golden Krishna. “Quartz”. How to Stop Looking at Your Phone Every Five Seconds. 2015. Web. 8 April 2018.

Gouvernement du Québec. “Behaviours – Distractions”. What The Law Says. 2018. Web. 7 April 2018.

Hall Alena. “Healthy Living”. Eighteen Things You Miss By Constantly Staring At Your Smartphone. 2017. Web. 8 April 2018.

ICBC. “Road Safety”. Distracted driving. 2018. Web. 6 April 2018.

Jensen Thor. “PCMag”. 11 Reasons to Stop Looking at Your Phone. 2017. Web. 8 April 2018.

Kazmeyer Milton. “Techwalla". Dangers of Online Communication. 2018. Web. 10 April 2018.

Lima. “5 Tips to Protect Your Privacy Online". Protect the Messages You Send Over. 2017. Web. 12 April 2018.

Luckerson Victor. “Financial Privacy". 7 Surprising Things Lurking In Online ‘Terms of Service’ Agreements. 2012. Web. 10 April 2018.

Matthews Kayla. “MakeUseOf”. How Binge-Watching Is Damaging Your Health. 2017. Web. 7 April 2018.

Office of the Privacy Commissioner of Canada. “Guidelines for Online Consent". Introduction to Privacy 101. 2013. Web. 10 April 2018.

Parrish Shane. “Medium”. Most of What You’re Going to Read Today is Pointless. 2015. Web. 8 April 2018.

Pesta Abigail. “Are You Being Tracked Online?". Learn Who’s Following Your Online Habits and What You Can Do About it. 2018. Web. 12 April 2018.

Ponzi Christopher. “Hight Existence". Technology and Us: How to Balance Our Addiction to Living Life on the Small Screen. 2013. Web. 9 April 2018.

Rehabs. “Internet Addiction”. Understanding the Disorder. 2018. Web. 7 April 2018.

Ribble Mike. “Digital Citizenship in Schools”. The Nine Elements of Digital Citizenship. 2015. Ebook. 5 April 2018.

Rosen Christine. “The Wall Street Journal”. Are Smartphones Turning Us Into Bad Samaritans?. 2013. Web. 9 April 2018.

Sirota Susan. “Pedia Trust". Five Tips To Balance Technology Use in Your Family. 2015. Web. 9 April 2018.

Soltan Liz. “Digital Responsibility”. Safety Tips to Avoid Texting while Driving. 2016. Web. 6 April 2018.

The Center. “Internet & Digital Addiction Doesn’t Define Youf”. Whole-person Care. 2018. Web. 7 April 2018.

Yates Autumn. “HighYa”. The Golden Rules of Digital Etiquette. 2016. Web. 5 April 2018.

[saragolakthesis]

Website // Iterations // One-page Scroll

Process Notes:

Background colour: Issue of disconnection from the rest of the site. The palette should stick to a consistent system of blue and yellow. This way, all project components of the thesis will become a visual system that is recognized by its palette and digital style. 

Icons: A problem arose that the icons do not reflect the same feel as those in the video when animated as a glitch. A solution was to frame the icons in a shape that users are familiar with online. For instance, apps or the yellow caution symbol used so far in the other projects. I eventually decided to use an app box outline to bring back the identification scanner box seen on the poster component. Looking at social media and other services, many of their logos and visuals are seen contained in a box as it connects to the idea of a button. This is also seen used in way finding systems that can be found in areas such as the Union station. Their navigation signs have either and outline of a square, or filled in, often with the colour yellow. Yellow is an effective colour to use to grab people’s attention and awareness.

Context: The website was initially going to show my process work and background to the overall idea of dystopia. However, while creating the website, I believed a more effective and interesting solution for the website would be to create something that is useful for the viewer and help them through the call-to-action campaign. Thus, not only am I encouraging the viewer to act, but I am also helping you through the process of making a change in your daily life. As the whole purpose of my thesis is to create a balance between the digital and physical, sort of like the idea with Yin and Yang, providing my viewers with educative knowledge will give my project more value and functionality.  

[saragolakthesis]

Short Film // Final Output

Digital Daily 

Music by: Dark Chrome by Oxidation

This is the final version of the video component process. Changes that were made include:

- ‘Did you know’ captions are rephrased 

- Ordering of the checkbox icon as an introduction to the film

- Pop-ups are now more scattered and unpredictable 

- Icons are replaced with new and modified designs 

- Outro to credits and logo

[saragolakthesis]

Lenticular Poster // Final Output // Size: 36 x 54inch

Set Digital Boundaries

Final version of the poster component process. Changes that were made to the work include:

- Working barcode

- Raised figure, allowing the hoodie to be more in frame

- Final logo design positioned beneath barcode

[saragolakthesis]

Campaign Sticker (& Magnet) // Final Output // Size: 2 1/3 x 3 5/8 inch

Set Digital Boundaries

Conceptual Direction Process

The smaller project component is a sticker that is created for the call-to-action campaign, Set Digital Boundaries. The goal of the design is to act as a reminder for users to stay true to their digital citizenship identity. These stickers can be applied anywhere, but its main purpose is to be applied to devices that you use everyday, such as cellphones or you computer. This way, the message will be a constant visual reminder for users to re-think their daily lifestyle and reflect whether or not they are following the digital citizenship guide. The use of the alert icon is also an effective visual to draw attention to the message being conveyed. 

*Bonus* 

As a fun addition to the concept, I included a magnet option for the sticker so that you can apply it even in your car or on your fridge if you would like to have it all around you than just on your devices!

[saragolakthesis]

Campaign Sticker // Iterations 

Process Notes:

Background: Issue of screen lines not visible as the background colour is too dark. I experimented with different hues and values of blue in order bring out the same texture seen in the video and poster components.

Composition: In the first image, there was an issue of disconnection where the elements did not function as one unit. As a solution, the orientation of the sticker was changed from vertical to horizontal, thus better utilizing space and creating a more effective hierarchal system. 

Button: The button element seen on the poster was re-introduced, as the website url in this case would make sense in a shape that we associate as something clickable. 

Caution Icon: The yellow alert icon was also changed from a “?” to “!” as it relates more effetively to grabbing someone’s attention to read something.

[saragolakthesis]

Dystopia Logo // Final Output 

DYSTOPIA

Conceptual Direction Process

One of the smaller components for the project is developing a logo identity for ‘Dystopia’. The identity is designed by using the notion of a glitch effect, thus applying the way it creates disorder and separation. A separation line is used, cutting the letters in half on different levels. By doing this, the logo is given a more un-predictable and chaotic appearance in contrast to a straight slash. It also enhances movement throughout the letters, thus adding to the italicized typeface. The font chosen for the logo (Berthold Akzidenz Grotesk) is modified to be narrower with a higher cap height to create a sense of ‘towering over’ and unease. This technique was inspired by propaganda posters that use tall fonts to create a sense of authority amounts its readers. Moreover, the logo is separated carefully to avoid unreadability. It also plays a trick on visual references, such as creating an exclamation mark out of the capital ‘I’. This way, the word ‘stop’ in dystopia is emphasized as a foreshadowing of preventing the dystopian outlook on future technology. 

[saragolakthesis]

Dystopia Logo // Iterations

Chosen Font: Berthold Akzidenz Grotesk 

Process Notes:

- Use two variations of the blue colour for light and dark backgrounds.

- Solid type is more effective than an outline or a gradient. 

- Using line breaks on a horizontal axis, each letter has a line running through it at a different level to the other. This adds movement to the logo and prevents the eye from moving completely above or below. 

[saragolakthesis]

Winter 2ND TERM NOTES

Random Thoughts (Process)

Website content ideas:

- News - Narrative - Tips / tricks / gifs / animation / interactive - Submersive experience (visual and text) - A journey through the digital world (its not just a book, its an experience) - Scrolling website that tells a story; strong narrative experience to communicate with the user - Website have Ai voices? Speaking to you? - One Page HTML template suited for a long-scrolling Landing Page - Parallax environment

“A narrative is any story or account that presents connected events. Your website is a narrative: the way a user traverses through a site's pages is the story that gets built for them. There are lots of ways to create a narrative, but the best experiences are natural ones.” More examples of interactive websites: https://onepagelove.com

Concept:

- Not overly formal > take through journey (educate through a casual and entertaining approach) - Not following normal conventions of a website to stand out - Atmosphere: cinematic, draw viewer into the narrative / establishing a different world / environment that is engaging... - Aim = to create an experience  - Voiceover / audio track!?? - User is aware where they are on the page with the nav colour indication, no external links in terms of website content - Experience it in a fixed order (can switch between sections automatically) - Element of mystery, not knowing what is next instead of labeling navigation with 'tips' and so on... - Make the user interested to see “whats next” - Gif video in background with poster?  - About dystopian view / how to be a digital citizen / digital lifestyle not practise - Dystopian view highlighting theme of privacy - If we are to truly be a digital culture, we need to get better at making the distinction between physical and digital - Digital Citizenship: 1. What is it? (good and bad difference) 2. Why is it important? 3. How do I become one?   - At the end: Become a member and get the latest news/articles on the topic... newsletter / subscribe - About finding an identity  - Guide / activity / card game? reveal when hover over a message - Hover over pop up glitch images / flicker images

Campaign Sticker Feedback:

- Use website not hashtag (about educating, not to get them retweeting it) - Square or Horizontal? - Large typography and tracking is important for small-scale designs

Exhibit Space - Glue poster on flat board / magnet and double-sided tape in order to avoid wall damage and easily take poster off / 45 degree folds mounted. - Table against wall due to lack of space  - Visual instructions of how to view the poster

[saragolakthesis]

The three sections of research and relevant work below are the foundation of my website design portion of Dystopia

[saragolakthesis]

 Nasa: Prospect 

Connelly, Gehling, LaBrie, Palmer, Solomon, Hover  // Interactive Website

Goal

NASA Prospect was created by a group of student designers at the University of South Dakota in collaboration with NASA and the Humans in Space Art program. The goal of the website is to create a unique experience in telling an illustrative story. It features two characters, a robot and an astronaut who venture into space and begin their adventure. Through the idea of dreams and imagination, the website acts as an engaging children’s book that brings these ideas to life. Not only is it engaging through motion graphics, but it also provides readers an audio option that consists of sounds effects in order to enhance the experience of the story even further. 

Intended Audience

Children 

Learned

The project uses both audio and animation to create a website that is relevant as many things are becoming digital now. Children are using sources such as audiobooks and youtube in order to watch their favourite shows or to find new stories to read. The group of students realized that everything is accessed online and used this modern lifestyle to create something more. They pushed the limits of web design and created a digital novel for the audience that is free and effective. As the user scrolls down, the background of the sections shifts between different times of the day, while the figure change positions and poses. The overall style consists of a friendly colour palette with type large enough to read from a distance. In addition, hierarchy is consistent and both the narration and speaker are clearly distinct. It is thus, easy to read and navigate as all you do is continuously scroll down a single page. Also, the majority of the website consists of a dark background, allowing the eyes to rest for long reading sessions, in contrast to using bright white or colourful backgrounds that tend to strain the eye after a while. 

[saragolakthesis]

The Boat 

Nam Le & Matt Huynh // Interactive Website

Goal

‘The Boat’ focuses on an engaging experience for users by using the parallax technique. The theme of the website is based on the Vietnam War and its purpose is to transition the story from a static novel to an interactive graphic novel. 

Intended Audience

Adults

Learned

The project utilizes motion graphics effectively and creates an immersive experience into the story. It provides the user with full control when navigating through the website, making each chapter easily accessible by a click of a button. Anywhere the mouse hovers in the foreground, the graphics would animate whilst other graphics continually play in the background. What makes the website different from any other, is the idea that the perspective of the images shift while scrolling, guiding the viewer’s eye across the entire screen. Even with all the animated graphics, the content is still easy to read and is well-contrasted from background content. I also enjoyed the sketch style of the website as it reminds us of a physical book through the paper-like texture. I learned about the importance of engagement while keeping in mind about other elements on the page in order to create a unified and functional design. 

[saragolakthesis]

Digital Citizenship in Schools: Nine Elements All Students Should Know

Mike Ribble // Aug 2015 // Ebook

Summary

Ribble breaks down the concept of digital citizenship by proposing nine different elements. These nine elements are digital access, digital commerce, digital communication, digital literacy, digital etiquette, digital law, digital rights & responsibilities, digital health & wellness, and digital security. Through these elements, Ribble defines digital citizenship as, “the norms of appropriate, responsible behavior with regard to technology use”. The reading focuses on students and a classroom setting in which these elements can be applied in order to educate younger users for the future. As technology is rapidly growing, Ribble realizes that digital citizenship needs to be addressed in which is simple and easy to understand, acting as a guide to follow and promoting responsible use of technology. 

Relevance

This piece of research is relevant to my project as it provides the foundation of my thesis. By referencing Ribble’s simplification of digital citizenship, I am able to create my own guidebook using a similar template. However, I would like to add more ‘elements’ to my project that are not addressed by Ribble and define some of the themes through a different approach and understanding. In addition, the target audience of the book are young students, however I would like to broaden the scope of my readers and provide more thought-provoking information that will keep the interest of older audiences. Meaning, not only stating what is commonly known, but using shocking and up-to-date information about technology. Moreover, the graphics used in the book have also influenced my designs, using online interface icons to further enhance the topic and feel of the theme.  

[saragolakthesis]

‘DYSTOPIA’ Logo Iterations // Preliminary // Sticker Concept 

Chosen Font: Berthold Akzidenz Grotesk (V1)

Process Notes:

I have explored different types of fonts including: Bold / condensed / tall = power, overwhelming, watching over you, towering Condensed = confined Disconnected, chaotic, less order Reviewed movie posters on the topic for inspiration on type use Paying attention to the treatment of the letter ‘O’ and ‘S’ specifically, including other letters such as the ‘D’ and the amount of space in the counter. Some were too small or narrow, won't work well when resized smaller.                              

The ‘O’ in V3 represents the scanning facial recognition frame, but the bulkiness and limited space is not effectively portraying what it is in the logo.

My approach to the logo is to keep a simple and minimalistic design, not butchering the use of complex technological fonts, but a clean sans-serif. I wish to express the digitization of the logo by making it condensed with a modern, futuristic appeal seen on movie posters related to the topic. In terms of composition, the first version is positioned in a way that emphasizes the word 'stop' along with 'IA' mentally inverting it to 'AI', challenging the viewer to interpret it as 'Stop AI', a design method to continue the 'element of surprise' so that it is not understood right away. Thus, further providing context to the project name 'Dystopia' that conveys mystery and exploration to an unknown view of the digital era. In terms of colour, I have tested out using the method used in the poster, of an image the was properly not positioned in scanning with the red and blue while also using the texture and glitch lines seen on the poster. I wished to continue the idea of 'the screen' by continuing the blue/red colour and glitchy aspect; however there are some issues in terms of inverting the logo on different backgrounds.

[saragolakthesis]

Lenticular Poster Project // Prototype // Size: 24 x 36inch

Set Digital Boundaries 

Conceptual Direction Process

My project for the winter 1st term is a call-to-action poster campaign titled, ‘Set Digital Boundaries’. The purpose of the design output is to raise awareness about the distinction between the digital and physical environment with a main focus on privacy and surveillance. Researching how surveillance interferes with a user’s online activity behind the scenes, I have come across a technological tool called ‘facial recognition’. The theme of the project thus shifted towards commenting on the use of biometric via everyday devices and how privacy is disregarded with the amount of information a user provides about themselves online. Therefore, the project is intended to convey an immediate message by using a dystopian perspective to further push the viewer to re-evaluate their own actions online, while portraying a possible future outcome if action is not taken. In the design, I have used elements associated with facial recognition such as the scanning frame and the loading results. I also used elements from the video project such as the idea of a button, pixelated typography and noise/glitch texture to connect the different components of the project into one cohesive system. A new component that I have introduced within the poster is the use of the color red in addition to the blue, yellow, b/w color palette that has already been established. The reason for this design choice is that the color red is often associated with glitching effects, but also adds another layer of depth to the dominant blue overlay.

As I began to tackle the physical component of my project, leaving off from a video output, I was faced with a design challenge of continuing the idea of motion via print. My first thoughts for a solution was creating a flipbook, a common method to creating motion graphics in print. I envisioned creating a series of posters using a flipbook as a tool to manipulate the image that the user stands in front of. However, through more research on motion print and the comments that I have received, I was able to discover a unique design technique called, “Lenticular Printing”. It is a fresh and innovative method in animating print by using perspective to shift and change image(s). There are two ways that the technique can be approached, one includes using a lenticular specialized paper lens that would create a flat output, capable of shifting more than two images. The other is a 3D physical mockup that is created by folding the paper in an accordion pattern. I have chosen to do the 3D approach for my project as I believed it would be most beneficial in producing an interactive piece within the physical space in which gives off a need to explore the depths of the hidden image. Overall, the technique allows the viewer to observe from different angles, seeing one image transition to another altered image. The result is a poster campaign that communicates a hidden message with the support of a secondary point-of-view to the issue being addressed.

In the output, there are two photographic images to be seen. One side of the two shows an image of an individual whose identity is concealed with the removal of the face. The hoodie that the individual is wearing in the photograph, frames the area of the face to suggest that there is perhaps something that is not being revealed to the viewer. The area of the face is further emphasized with the facial recognition interface, again suggesting that there is something within the hollow dark void. In addition, the typography that reads, “Searching…” is meant to convey that the system is attempting to find the user of the device and access their information. The image acts as a digital screen that would be seen on a phone, further implied with the vertical orientation of the layout. The second image within the poster shows an altered version by changing the overlaid elements on the photography itself. Here we see a caution symbol with a question mark positioned around the face area, expressing that the facial recognition scan was not successful in identifying the individual. The notion of call-to-action is brought into play with a tagline that reads, “Set Digital Boundaries”. This tagline is positioned on a button with a mouse curser ‘clicking’ the typography as a sort of link to learn more about the issue. Finally, I have incorporated a QR Code in replacement of a written website link that allowed for a more limited use of text-based information. The QR Code functions when a viewer scans the code with their phone, which they are then brought to the project’s website, dystopiaonline.ca to learn more about how to be a digital citizen. In relation, the QR Code is also in coherence with the overall glitch/pixelated effect as the code itself is created with pixelated shapes and also the entire form it takes goes with the squared frame for facial detection. In summary, throughout the process of achieving the final output, the design went through great modifications in the treatment of fragmented line glitches, color palette, symbols, and hierarchy of information for immediate impact.