Design Laws Due to my target audience being mostly middle-older aged men, the interface should be simple, and easy to use, with a reliance on standardised UI design that is recognisable in functionality. According to Open Replay on Jacob’s Law for UI, “Users anticipate an interface to adhere to established conventions”“Users generally anticipate new interfaces to adhere to the same standards and patterns as other interfaces they are accustomed to.” The usability of both the website and the app should have an element of fun to it, to make the UX pleasant and memorable. [Image: Jakob’s Law. Batri, A. Medium.com] How Will My Design Acquire Feedback? [Krasovskaya, (2023) D. UX Tweak ] Stakeholders UI The stakeholder interface should be different from what users will see, as stakeholders will want to view certain data on website and app usage, in order to be able to pander to customer needs, such as what they feel is missing, and what they want to see, e.g media. Call to Action 1.)Decide which menu items to add based off of user research 2.) Design the IA with a flow diagram to test how it works 3.)Get feedback on the IA and reiterate design 4.)Design wireframes for UI using design principles Harvard References Batri, A. (2022) Jakobs Law for UX design. Available Online:https://arpit-batri.medium.com/jakobs-law-in-ux-design-dc88554a024b [Accessed 08/03/2024] Etegbeke, J (2023) Fundamentals of User Interface (UI) Design. [Blog post] Available Online:https://blog.openreplay.com/fundamentals-of-ui-design/#:~:text=Principles%20of%20UI%20Design&text=Contrast%3A%20Creating%20visual%20contrast%20between,visually%20consistent%20and%20organized%20interface. [Accessed 08/032024] Krasovskaya, D. (2023) UX Tweak. User Feedback Examples. Available Online: https://www.uxtweak.com/user-feedback/examples/ [Accessed 08/03/2024]
Author: reffoldkeal2023
Requirements Gathering and Analysis
User Personas User Research- Reddit I asked two Bonsai communities on Reddit: “What features would you wish to see in your user experience with a website/app for a Bonsai tree festival?” All Usernames have been changed by me due to GDPR reasons. User Comment My Mum Her response was that she would want to see a schedule for all the events and their dates and locations. Reddit User: MountBonsai “I would want to see trees most of all!Not just a huge page full of tree pics, but something organised by species or maybe Bonsai class.Scheduling of events, ticketing, award winners, etc would also be great.” Reddit User: FunkyBonsai “Pics of treesA schedule of events (demonstrations, lectures, workshops, etc.) if anyPics of treesA way to sign up for events, if anyPics of treesA section on the art of Bonsai, history, general practices, etc.Pics of trees” Reddit User: WillowBonsai “You’ll need a booking, reservations and ticketing. A photo gallery of previous years exhibits. The winners and categories of previous years. I’d use a CMS to make life easy, lmk if you want another dev/de.” Reddit User RedBonsai “Progress pics of the same tree over the years are super interesting and helpful.” Reddit User GigaBonsai “Discussion boards and virtual workshops. I don’t know anything about Web design but that’s what I feel like this sub is missing.” A User suggested that the website should have a Bonsai History page where users can find out a little bit about the history of the art of Bonsai Trees. I think this can help solve the user problem space of “what?”, when it comes to Bonsai. Forms and Statistics Analysis For the research of the companion app to the website I used Google Forms to create a questionnaire for my classmates to fill out; as well as posting it onto the Bonsai SubReddits on Reddit. As can be seen by the percentages above, that most popular choices for app functionality where: It can be seen that 83% of Users agreed that Ticket Purchase, Schedule of Events, and About us and History, were the most sought after pages for user convenience and functionality. In addition to this, 75% of Users felt that they wanted a Ticket Wallet Feature, Home Page, and Bonsai Gallery for the Companion App. Also, 66% of users chose the same preference for colour scheme for the App (Dark and Light Greens with Off-White Background), therefore going forward i think this is the best choice for the UI for the website AND the App to be as aesthetically pleasing to the customers as possible. Harvard References L. Grenier (2022) How To Create A Simple, Accurate User Persona. [Blog Post] HotJar. 18 August. Available Online: https://www.hotjar.com/blog/user-personas/ [Accessed 26/02/2024] Reddit (N.D) r/Bonsai Community. Available Online: https://www.reddit.com/r/bonsaicommunity/ [Accessed 08/03/2024] Reddit (N.D) r/Bonsai. Available online: https://www.reddit.com/r/Bonsai/ [Accessed 08/03/2024]
Defining The UX
The Festival Summary The Tool Shed Is a Bonsai festival which aims to raise awareness about the harmful effects of Global Warming and Deforestation, through a two night festival which allows for camping, and other festival events such as demonstrations, a market, competitions, taster sessions, star gazing, environment talks, and guided walks. Tool Shed aims to use this festival to help the global crisis of global warming by donating the profits of the festival to charities that work to protect the environment. Problem Space and Usability Goals Based on my own user research,the demographic for this type of festival is predominantly males of an older generation, which means some may lack computer experience. According to Educative, there are six main usability goals in interactive design: [Image: Educative. Usability Goals] The Difference Between the Website and App The Website should work as an advertisement to navigate Users to download the App, and purchase tickets to the event, as well as introducing the topic, and solving user questions, such as what the User can expect from the event. The App should feel like a security item in which to store the tickets, and to hold all the information you might need at the Festival, in the convenience of a pocket or a handbag. Harvard References Alvan, A. (N.D) What are usability goals in interactive design? Available online: https://www.educative.io/answers/what-are-usability-goals-in-interactive-design [Accessed 07/03/2024]
Cover Designs
This is my first cover page poster advertisement for the book “The Singularity”. I have kept to the typographical standards with hand drawn typography, and have followed the standardised colour scheme from the rest of my project. I used hand drawn typography for the slogan “calling all robots” “your time is now”, because if the book were real, it’s narrative would show compassion for the sentient AI, as the book is an exploration of ethics pertaining to the advancement of Artificial Intelligence, and the event in which AI would become so advanced that it became aware of its existence, called “The Singularity”. I wanted to draw upon that compassion by addressing the viewer as the AI or robot. I also thought that it was a fun, and punchy heading which would draw attention from passers by, with the bold font. I also incorporated the metal sketch book binders that came through with the picture, and placed that at the top, as I feel it gives the poster a hand drawn/created effect, and mimics that of drawing in a sketchbook. Also by using greys and black in the background, I feel it draws attention to the book cover, as the cover does have some colour to it, and so it stands out against the tonal colours surrounding it; the author’s name is at the bottom of the poster, and also shown on the book, so the author is well credited, and a feature on the poster itself. The second poster I created is for the Hikikomori book cover, and I wanted to create a feeling of being trapped behind bars, using lines coming down from the top of the poster. I also wanted to give the viewer the feeling of being watched, or of being the spider hanging off the ceiling, watching the narrative unravel. A lot of the assets on this poster are from the importing process of uploading hand drawn typography and drawings, as the ‘convert image’ process. I used leftover speckles from the process and put them in the background of the poster to create a splatter effect, as though someone has walked all over the page in muddy boots. Furthermore, as in the first poster, The author’s name does appear twice, like a mirroring, and I feel this draws attention to the author and lets the viewers know who has written this book, so they can go and google the name and find out about the book, and other works also. I wanted the general vibe of this poster to be misery, since that’s part of the abject topic of the book, the misery of being confined for too long, and so i think all these accents, such as the mud splatters, and bars, show repression and perhaps even self-oppression, and a touch of misanthropy, allowing the boots to treat mud all over the poster, all over one’s self, and i wanted this to encompass the main characters feelings of being left behind, or walked all over, by an unforgiving society. I have followed the typographical standards colour scheme again, of black, white, and greys, and I think this is eye-catching, and is recognisable as the brand I have created; both posters also contain the Ventricle logo so that the viewers know that the book is associated with the awards given out by Ventricle, as i feel this credits the author as having written a good horror book. Overall I am very pleased with these cover posters, as I think they do their job at being eye-catching, following typographical standards, asserting a recognisable colour scheme, and brand, as well as a consistent conceptual message that aligns with my project topic of choice.
Online Editorial Information Pages
Older Layout I Chose not to use. I decided to do two awards for my ‘books’, one for lesser awards ‘innovation at the typewriter’, and another one for a major award ‘carotid artery’. I named the major award carotid artery because it is the artery that carries blood to the brain, and it fell in line with the conceptual theme of my project, which is to celebrate the symbiosis of art, specifically abject horror in books. My editorial pages evolved two different styles, but they are both standardised and have corresponding colour schemes of black and white; the first is for the innovation at the typewriter awards, which has plain black banners at the top and bottom of the page, and other standardised accents such as logo placements and slogan typography “ventricle”. The second style of page follows the same colour scheme, and use of logo and slogan typography, however I used to casted shadows that came along with my hand drawn typography. I separated the typography from these shadows once they were vectorised, and used these as the banners because I think that it had some really awesome looking shapes, and added texture to the carotid artery page, and also to the transgressions in art explanations. Prior to these pages, I had attempted to create a layout for the innovation at the typewriter book awards, but I disliked the look of having a block colour in the background, it made it look like a bad website/blog from the early 2000’s, and so I had to start again from scratch. I am proud of what I came up with, and also changed the aspect ratio from A4 to a website canvas, which looked more professional. The blog has three pages for innovation at the typewriter, and one major award page, ‘carotid artery’, followed by two informative pages which explain my motive, concept, and the definition of what i have chosen as my topic ‘abject art’ as a propellant for human social-development. However, I think that because wordpress only allows embedded images to go a certain size, it could be a little hard to read the text on my editorial pages, which is a worry. In addition to this, I chose a medium quality to export these pages so they would fit on the wordpress site, and I worry this has degraded the quality of text also. I feel the pages would be more appropriate as an actual website so that the text and layout can be seen and read in the way it was intended. Overall I am very pleased with my work, and I think it has a clear and concise colour scheme (black, white, and grey),, as well as standardised features that prevail throughout, (the logo, and typography standards). The typography works well together, and, if not on wordpress, would be much more easy to read in a website setting. I would like to resolve this issue in future so that my work is more legible on wordpress. In addition, I also think that the transgressions in art pages are very informative, and have quotes and references from interesting artists who align with my project values. All Harvard references can be found on this page. Harvard References Burgess,A. (2000) A Clockwork Orange, London: Penguin Books Ltd. Küster, U. (2011) Louise Bourgeois, Ulf Küster, Ostfildern,Hatje Cantz Verlag. Lesso,R. (2023) The Collector, Why Did Tracy Emin’s Bed Cause Such A Sensation? [Blog Post] 3 January, Available Online: https://www.thecollector.com/why-did-tracey-emins-bed-cause-such-a-sensation/ [Accessed 19/12/2023] Murakami,R. (2006) In The Miso Soup, London, Bloomsbury Publishing Plc.
Conceptual Editorial Masthead Design
My conceptual logo for this assignment is for a “book review/award” website, that promotes and reviews books which explore dark and abject concepts, from social politics, to feminism, mental health, and the environment. The concept behind the logo was born from the word “Ventricle”, which are components of the heart which pump blood around the body; I wanted it to be a metaphor for the way in which art plays out in society, and its relationship to us. We work to earn a living and to keep occupied, but when we get home, we unwind with art, tv shows, films, comics, books, paintings, music. Art is something that makes us human, and we are the only species on Earth which partake in ‘the bardic function’ through media. “ Fiske and Hartley (2005) argued television “functions as a social ritual” because we all gather around the screen to reinforce our beliefs and practices. They compared this custom to the way medieval audiences gathered around the talented bards to hear their stories and songs about heroic deeds, courtly romances, and mythological tales. That is why they coined the term “bardic function” to describe television’s role in the transmission of language and culture.” (Fiske, J. & Hartley, J. (2003 [1978])) I liken this ability to tell stories from the past and create stories of the future, as our lifeblood; If we only went to work, and came home to do more work, we would be extremely unhappy, and our mental health would suffer greatly. So from this I created this conceptual logo which represents the relativity of work with art and literature as “yin yang”. The logo has a black and white shaded contrast with the ying yang shape incorporated into the shape of a human heart to convey these ideas. As i am creating a blog which reviews books of an abject nature, i also wanted to use this heart to show that the exploration of transgressions in art is fundamental to the development of the human race; to the development of socio-politics, feminism, animal treatment, mental health and the human condition, the environment, and anything else which might be considered taboo and regarded as “non normative’ discussion topics. In this way, art can be seen as something that keeps us going, and keeps us alive, as well as vital in exploring our nature and condition as people, as the heart is an organ which keeps us alive. Therefore I designed a logo which incorporates the heart, and yin and yang, as a homage and metaphor to our dependency on art for our intellectual development. The design process of my logo was to hand draw a simplified version of a human heart, and to clean up the lines. I then took a photograph and pasted it into Adobe Illustrator; then I used trace image 3 colours, and recoloured the heart, before drawing the typography and repeating the same steps, or trace image, and using create outlines, to make a vector logo. I did decide to keep some of the natural shadow gradients that went through with tracing the image, as I felt it gave the logo some texture, and a dark grungy kind of style which is what I wanted for my website as it pertains to horror and abjection. Sketches and Notes Harvard References Fiske, J. & Hartley, J. (2003 [1978]): “Reading Television”. [Blog Post] ]Media Studies. Available Online:https://media-studies.com/bardic-function/ [Accessed 11/12/2023]
Typographical Graphic Standards
Here are my typographical standards for my Development Blog for Ventricle. In the first box I have included some hand drawn alphabets, lowercase and uppercase, in my own font that I use when I am drawing. I decided that it would be perfect for this assignment because it is quite a sharp and gritty looking font, which is the aesthetic which I wanted for my horror book blog. I drew them in pencil, and took a photograph of the alphabets, which I uploaded in illustrator and used trace image, and create outlines, to make them vectors. I then recoloured the lower case alphabet to make it a bit more uniform, but left upper case as I liked the different shades on the letters, and the texture it creates. The typography I chose is Bernard MT Condensed at 36 pt for subheadings, because it stands out and is very bold, and therefore when paired with my other typographical choices, it creates hierarchy on my website, and can be used to draw attention to certain topics, for example the type of award category for the books i am using, or the winning book titles. For body copy I chose Myriad Variable Concept at 18-21 pt. I decided to give a size range on this one as sometimes if there is a lot of text on the web page, the body copy will need to be 18pt rather than 21pt, as it needs to fit on the page and still be readable. I also felt that this font looks nice against Bernard MT Condensed and Century Schoolbook, but it is still distinguishable, and adds to the hierarchy/importance of information in my blog. Finally, for subtext, i chose Century Schoolbook at 14pt, and i chose a serif font because it looks a little more formal than the other two fonts, and therefore can be used for this such as subtext, and notes underneath pictures to show who “wrote” the books winning the awards, and also for things such as added information on a topic, or at the bottom of the page, underneath body copy, and this, again, adds to the trickle of information in levels of importance. I also think that it looks nice with the other font choices and is easy to read even though it is being used at 14pt. Finally the last section of my typographical standards includes my colour theme swatches, which are black, white, and light grey. I chose these colours because they represent the colour themes of yin and yang, which aligns with the conceptual theme of my logo and blog. I allowed for the grey because it is used in the shading of my logo and could be used for things such as typography colour for quotes, and maybe banners and icons, if the standards were to be used long term. The black and white together is an obvious choice, and a classic colour combination that looks really clean together, and also allows for typography to be readable; the tonal colours are also appropriate as the blog is for horror book reviews, and i think if i had used lots of bright colours, it would not have fit with the conceptual theme of my work. Overall I think that these typographical standards work well, and when used together with one another, should create a brand and style which stays standardised, the typography, logo, and corresponding colour swatches, all pertain to my blog and “Ventricle” brand. I found the process of finding typography to compliment each other quite tedious and difficult, as most of the fonts look deeply unattractive when put next to one another, so the fonts and pt sizes are the fonts and sizes i think look good together along side my hand drawn font. It took me a couple of times to redo this typography box till I got some fonts that I felt looked good together.
Self-Promotional Image Poster
With this promotional poster, I wanted to show my most important and favourite aspect of my personality, that is,my sense of humour. I created a poster which mimics those pamphlets that get posted through your door against your will, advertisements for things you’ll maybe never use, or for food shops. In this sense, I wanted to become the product, and I also thought it would be a good way to exhibit my use of composition, typographical hierarchy, and use of good colour. I have very dry, ironic humour, and so I wanted to show that with this poster. I turned the “introducing” typography horizontal along the side as though it’s for a cheap leaflet or pamphlet trying to get your attention for this “product” that’s being sold. I also wanted to convey a sense of irony towards the packaging of things such as toys or dolls in a new shiny box, but of course it’s just me being advertised. The text has a hierarchy of bigger text to smaller text, and with a couple of different types of pink colours which go together very well, which leads the viewer to read from either top left and down, or from side right, then up, and down to the bottom, depending on which of the two grabs the reader’s attention first, either “introducing”, or “all new”. At the bottom I also wanted to put a barcode, juxtaposing my human life, nihilistically, with that of a plastic doll, or an object trying to be sold; there is also a price tag in the top hand corner. I changed the usual bright yellow of price stickers, to a bright pink, to match the colour scheme of the poster. I also used a dollar sign because I feel like this type of thing makes you think of a big yellow sticker with a dollar sign on it, advertising something silly. Though it is played out, i think the pink colour scheme recycles an old concept into something new that represents me and my personality. With this promotional poster, I wanted to show my most important and favourite aspect of my personality, that is,my sense of humour. I created a poster which mimics those pamphlets that get posted through your door against your will, advertisements for things you’ll maybe never use, or for food shops. In this sense, I wanted to become the product, and I also thought it would be a good way to exhibit my use of composition, typographical hierarchy, and use of good colour. I have very dry, ironic humour, and so I wanted to show that with this poster. I turned the “introducing” typography horizontal along the side as though it’s for a cheap leaflet or pamphlet trying to get your attention for this “product” that’s being sold. I also wanted to convey a sense of irony towards the packaging of things such as toys or dolls in a new shiny box, but of course it’s just me being advertised. The text has a hierarchy of bigger text to smaller text, and with a couple of different types of pink colours which go together very well, which leads the viewer to read from either top left and down, or from side right, then up, and down to the bottom, depending on which of the two grabs the reader’s attention first, either “introducing”, or “all new”. At the bottom I also wanted to put a barcode, juxtaposing my human life, nihilistically, with that of a plastic doll, or an object trying to be sold; there is also a price tag in the top hand corner. I changed the usual bright yellow of price stickers, to a bright pink, to match the colour scheme of the poster. I also used a dollar sign because i feel like this type of thing makes you think of a big yellow sticker with a dollar sign on it, advertising something cheap. Though it is played out, I think the pink colour scheme recycles an old concept into something new that represents me and my personality.
Adobe Photoshop Self Portrait
This is my first photoshop self portrait. I used the magnetic lasso tool to select my face from a picture, and then I used the paint bucket tool to change the colours of the shading of my face, and colours of my hair. I also layered the image on top of a circle shape to make it look more complete. I have very limited photoshop skills at this point so I did the best I could. I chose neon/fluorescent colours for a futuristic style of portrait, because I love to play video games, and I love technology, and I embrace the development of technology in society, such as the development of AI, VR, and AR. I think it’s something that could bring forth some really amazing progression to science, medicine, and technology, through the power of machine learning. I kind of wanted to make this portrait look like an AI, or an AI character from a video game, to show that I support the integration of AI, and technology in today’s society. I am excited for technology to keep developing at the rate that it has recently, and I feel lucky that it’s something I will get to witness in my lifetime. I am not good with communicating, or understanding people, but I spend a lot of time on my computer playing games, and being on the internet, and I feel like this is something that has raised me, and shaped me into who I am, so I feel a certain comfort with technology, that i have never felt from people. I chose a conceptual colour theme to connote colours such as those seen in Hong Kong’s famous city lights at night, e.g, rich neon purples, greens, and pinks, as I think this is something which is often used as inspiration for futuristic video games. I also think it makes the portrait look abstract and futuristic. This portrait is a radical change in approach from the first one, because i uploaded a photograph of a pencil sketch i did of my face, and then i used the paint bucket tool to change the colours of my face and my hair into pastel “kawaii” colours, but it did come out looking a little more bright and fluorescent than i would have liked. I wanted it to have an interesting and illustrative quality to it so I did draw it by hand, and I like how it looks illustrative but also a little bit like how cell shaded game characters look at the same time. My concept for this portrait was to just be myself and to enjoy having free creative reign over my portrait, and to express myself, whilst learning how features of photoshop work, i.e clipping masks, shapes, changing colours. I wanted to have a clipping mask so that I could put my portrait inside of a shape, and I picked the cherry blossom, because I love trees and nature; My favourites are cherry blossoms, and all kinds of pine trees, so I chose the blossom shape. Some of my fondest memories are of camping with my mum and being around nature, and it’s something that I’m glad was taught to me, because I love the trees and the flowers, and all the different colours of the countryside. Feeling out of depth with people is a common theme in my life, so I find nature to help me to feel a little less weird and out of place, knowing that I always have a place with the trees and the sky. My thought process for this design was that the blossom shape is from my favourite tree and could represent my love of nature, and has a nice composition, as well as helping to break up the intense colouring of the portrait, and allows for some depth because of the layer mask.
Adobe Illustrator Self Portrait
This is my first ever illustrator portrait, and so as I was getting to grips with the process, this is the portrait that happened during that, and so it is experimental, and has an abstract quality to it which looks interesting. In keeping the black outlines on this portrait, it makes it look like a cell shaded character, which are used in certain video games, and I have always liked games so I decided to keep the outlines. In addition, because of the incongruence of the face shape and length, it looks like a caricature of myself made up from broken shapes fitting together like a mosaic, which has a picasso like effect, which also makes this portrait interesting to look at, and i also like art, so this is relevant to conveying my personality. Furthermore, my favourite colour is pink, and so i changed the colour of the top i was wearing to match with a colour theme which i felt represented myself, and in the background i also added some simple coloured shapes, of love hearts and stars, as i love the “kawaii”, “fairy keii”, Japanese aesthetic. As a teenager i would wear rococo style dresses with petticoats, lace edging and big bows, so my love of pink today has been a certain refinement of who i was as a teenager; it has come along with me, although i have toned it down; i think through the pink colours i want to convey how fashion, and colour, has allowed me to explore who i am, and my individuality, and has evolved into who i am today. I have kept the aesthetic of the portrait in line with this conceptual colour theme, and this reflects through my colour, and background choices. However the portrait is clearly not perfect, and perhaps not professional, and so although I do like it, I think that this skill needs more practice and I would like to create more neat looking portraits, that bare more likeness, in the future. In this portrait i hadi started to understand the process a bit better. It is less abstract and has a lot more detail in the colours and shadows used. I believe this is an example of a radical change in my work, and the differences include more detail, and a different style which doesn’t use the black outlines on the shapes used to create the face, although it is not fully realism, I think it is closer to it than the first portrait. As the target audience is “the employer”, I think this portrait would be more professional looking, as well as still retaining some of my personality. I wanted to stick with a Halloween conceptual colour theme because this was taken at a Halloween party, and it is my favourite holiday of the year; this reflects dimensions of my personality because I like to embrace the darker parts of my interests such as horror books, films, and art. Furthermore, I love to do my makeup, and I feel that my face is a canvas which allows me to express myself each day; even when I don’t feel like I can get out of bed, I always end up taking joy in painting my face before I go outside. It is an art form, and I tried to convey that by breaking down the blending into block colours.. It takes me up to 1.5 hours to do a full face of this style of makeup, and i did not, in fact, “wake up like this”, i put in time and effort into this art form and i think that in showing it in a more broken down way, it reflects my personality and my dedication to an art form that i love very much.. It gives me strength when I don’t have it, and shows that I am a resilient girl. Finally, I added a geometric background, in Halloween purple shades to create an aesthetic colour theme, and to make it look more professional.