Cause; Heat going up, Core melts downward, hits water tanks- water vaporizes and expands, tanks contain 7000 cubic meters of water turned to steam instantly.
Explosion Factors: 2-4 megatons, everything within a 30km radius is completely destroyed, radioactive fuel from buildings 1-3 and the remains of 4 ejected over the 200km shockwave.
Impact:
no water supply, no livestock, no food farmed and a sharp spike in cancer rates and birth defects within the countries of; Ukraine, Latvia, Lithuania, Byelorussia, Poland, Czechoslovakia (Czechia), Romania, Hungary, East Germany
The entire population of Kiev and Minsk would be killed 52 million in Kiev and 10.04 million in Minsk during the year 1986.
Over 60 million more people would need to be evacuated over the regions of Ukraine & Byelorussia.
Event was spotted 48 hours before it occured.
Forced the divers (Alexi Ananenko, Valeri Bezpalov & Boris Boranov) to drain the water wthin the water tanks.
Alexei Ananenko is still working in the nuclear industry. He dislikes the sensationalism attached to himself. Valeri Bezpalov is alive and living in Russia. Boris Baranov died of heart failure in 2005.
None of them had any mutations passed on to children.
The Core would continue to melt down through the earth eventually into the groundwater below, rendering all the water supply into the Prypiat River- Water Supply for over 50 Million people as well as the food and livestock that would feed off the water supply. Poisoned from Kiev- Black Sea.
Solution: mine under the reactor and install a heat exchange pad using liquid nitrogen to cool down the core and stop the meltdown.
400 Miners used in total, over 100 died before they were 40 years old. Worked in conditions of 50+ degrees for 4-6 weeks, exposed to lethal amounts of radiation.
Mining Crew Chief- Andrei Glhukov
Andrei Glhukov Info-
Andrei Glhukov lead a group of around 400 miners to excavate a tunnel under the melting down reactor core, they were given six weeks to do the job, as after the six week period there would be a very real risk of the reactor melting all the way through the earth, into the tunnel and passing into the water table.
There was only a 50/40% chance of the core melting into the water table, however, the workers were not told this. They were told bare minimum, Glhukov did not even wait for additional protective gear to arrive before beginning work on the slow mining of the tunnel. The job was made even more dangerous by the fact that
Firefighters-
Vasily Ignetenko-
Conscripted Soldiers & Liquidators
A total of 750,00 liquidators were used within the total clean up of the Chernobyl Disaster.
600,000 used to Cleanup within the Chernobyl Exclusion zone. Various roles including; Excavators, Plant Cleanup Workers, Animal Control.
Particularly, Roof Cleaners 3828 men used to remove the graphite blocks on the highest level of the Chernobyl reactor 4 roof. Radiation levels were equal to 12,000 roentgen, in full lead-lined protective gear, spending 2 minutes on this roof would half your life expectancy, 3 minutes of exposure would reduce your life expectancy to only a few months.
2,000 roentgen- 1 hour exposure fatal
1,000 roentgen- 2 hour exposure fatal.
Roof cleaners were given 90 seconds to access the roof, shovel off as much graphite as possible, and they were forced to retreat from the roof and the next group did the same until the radiation level was low enough.
Total Chernobyl Exclusion zone- remains at 2,600 square kilometers, over 400 times more radiation was expelled than the nuclear explosion at Hiroshima. in total 300,000 people were evacuated and the residents were not allowed to leave the surrounding area until 32 hours after the explosion occurred.
Talk about where and when the exhibition is happening, attract visitors in and provide all the needed information, but tell the visiters that any potential questions can be answered internally within the exhibition.
Section 2: About Chernobyl
“Why Worry about something that isn’t going to happen?”
It not only sums up the thinking that went into the minds of the government, certain plant workers, pro-government scientists, and perhaps even some civilians before the explosion. Everyone believed that something on this scale was not possible, as such, it was refused to be belived by the govenment and officals at the time within the soviet union.
Its the absolute faith in the perception of your superiority, rightness, and institutional merit that causes tragedies like Chernobyl to happen. And when comparing it to non Soviet disasters like the Love Canal clean-up and the Great Recession, it appears that many people need a wake up call like this.
Write about how the explosion at Chernobyl happened?
Eager to get promotion -> incomplete safety test involving withdrawn safety measures -> initial positive-void coefficient flaw flare-up -> steam explosion.
Give the readers small amounts of facts to lure them in to the exhibition
Section 3: Hidden Heroes
Talk about the people involved, use large numbers to attract focus and make people want to learn more.
800,000 liquidators
15,000-50,000 roentgen of radiation
90,000 deaths
minutes of exposure can cause extreme radiation sickness, resulting in painful death.
Discuss the fact of why they are being hidden. How the Russian govenment still refuse to change the death count for the Chernobyl disaster.
Section 4: Past, Present, Future
Talk about the long factors leading up to Chernobyl, however focus on the longevity of the impact of Chernobyl but also about how it remains a glitch on the landscape that will eventually dissapear into nothing.
40,000 liquidators were diagonsied with cancer by 2008.
My plan for the aesthetics of the leaflet involve origami techniques so that once the leaflet is folded outwards it will create a large radiation hazard symbol.
While I do think that this technique is very relevant to my chosen exhibition topic, I do think that it is however very cliche, it does not carry the serious tone of imagery that I wish to convey, I think that the cliche of the outcome does make my exhibition seem much less serious and will therefore hurt my visual style overall. Due to this I will likely redesign how the leaflet looks, however the information that I plan to input onto the eight pages remains intersting and topical to what I want from a leaflet.
when first presented with the brief I was also given a large selection of themes that i could choose from. These themes were as follows:
Artisan
Author(ship)
Beyond Borders
Brutalist Architecture
Codification
Etymology
Glitch
Initial thoughts on the glitch theme there seems to be a large amount of potential. An interesting concept while attempting to avoid thinking of a too linear concept is a glitch in history, looking at the dictionary definition of the term glitch, it seems that “an event that is caused by something going wrong” fits the description of a large amount of historical events. events such as; world war one and disasters are commonly appearing in my mind.
Concepts: Glitch in History
A historical event that should not have happened, and will likely not happen again, something
significant enough for large amounts of information to be gathered about it but not too well
known to the point where any information given is already known to large portions of the audience.
Potentially explore a lesser known area of a well known event
Topic 1: Chernobyl Disaster
Recent T.V show realised so people are aware of the event and will many will now want to know more in
perhaps, a less cinematic and more informative manner.
Fits meaning of “glitch” without engaging too much with the cliches
After a short amount of research, I realised there Is large amounts of the event to design about, Much of the interesting information is heavily coated in advanced scientific vocabulary, WILL NEED TRANSLATING TO ATTRACT TO LARGE AUDIENCE. If done correctly it will yield large amounts of interesting information to design around, due to this reason, there is a clear opening for an artistic and communicative opportunity
communication will be key due to not only the different languages used, but also the fact that much of the information is still locked within a “nuclear physicist” language which will not attract people to explore
my work.
The event itself is interesting personally, giving me the motivation required to complete the workload and more.
Further Glitch criteria. How the event could only get that bad due to the exact time period, the exact country with
that exact reactor, even down to it having to be those exact staff on shift that night.
However explore the opinion that it had to happen within the soviet union as because technology was
advanced enough for machines to operate in heavy radiation. The soviets were potentially the only
collection of people willing to sacrifice that large amount of life to correct the error.
Potential to dip in and explore “Profiles” of those involved with the accident, as well as explore the actual
event itself as a whole. Provides me with more than enough information to complete the multiple sections
of the exhibition.
Opportunity to explore both english and Russian/Ukraine Typography, yielding many fresh design concepts.
Modify
Uniform
Widerlife
Further Research
Cause of Chernobyl-
The building was unerfunded and so the control rods were tipped with graphite.
The head staff in the room at the time (Dyatlov) was too focussed on completing a safety test
Exract of an article detailing some of the mechanical factors leading up to the explosion:
“One of the most crucial causes of the accident is the large positive void coefficient possessed by the nuclear reactor. One characteristic of the RBMK reactor is that it can have a positive void coefficient. This means that an increase in voids or steam bubbles is associated with a rise in core reactivity. Most other reactor designs have a negative coefficient, which means that the reactor responds to the formation of steam bubbles by decreasing heat output. This is because if the coolant contains lots of steam bubbles, fewer neutrons are slowed down. The faster neutrons are, in turn, less likely to cause fission of the uranium atoms, thus resulting in a lower power output. This is an example of negative feedback that is used to prevent the reactor’s heat output from reaching dangerously high levels. However, the RBMK reactor used had a positive coefficient, which means that the reactor becomes very unstable at low power levels, and vulnerable to dangerous rises in energy production levels. This was one of the reasons for the reactor explosion during the Chernobyl accident.
Another cause was a flaw in the design of control rods. Control rods are meant to control the multiplication factor k of the reactor. Since control rods absorb neutrons, a withdrawal of the rods causes an increase in k value, and vice versa. Of the control rods, 163 are inserted from the top of the reactor and are made of graphite. The rods were found to be 1.3 m shorter than stipulated, which is unacceptable. The upper portion of the rods, which acts to absorb neutrons and slow down the nuclear reaction, was filled with boron carbide. When the rods were inserted, the graphite part displaces some of the coolant, thus leading to an increase in fission rate. This is because graphite is a more powerful neutron moderator than light water, i.e., it absorbs less neutrons. This resulted in a dangerous increase in power output. Moreover, post-accident investigations determined that at the point of the accident, the number of rods in the reactor was equivalent to 8 control rods. However, according to international standards, a minimum of 15 such rods were required at all times. This flaw in the design and number of control rods was one of the important causes of the disaster as well.”
Begin thinking what question to ask in dissertation. Constellation term 1 used as dissertation trial run.
Link essay question heavily into graphics.
Contextualize and reference what you say, over coming up with 100% original ideas and arguments.
Assessment is formative.
Becoming more aware to the way in medium in which we live in,
Fish analogy (Mention on blog), interesting and extremely relevant.
1st part of analogy- not realizing the place you are at now, taking a moment to
Becoming aware to events going on in the world affects the way you judge and how you think/perceive the world.
E.G. if someone is never taught about the concept of cruelty, to them, life is sweet and innocent.
Being surrounded by people with the same viewpoint makes you forget opposing points.
The unconscious decisions of day to day life.
What does “here” and “now” mean to you
Depends on the situation, when I am inside the lecture room, only that is my here, but once I step outdoors the entire campus becomes my here.
Now depends on the impact and change of the fore-coming events. If something presents a dramatic enough change, Reflecting back I would consider them two different sets of time.
Our perceptions of time have an ethical dimension, an impact on human lives. Our attitudes of the here and now have more consequences to people more than ourselves.
Critical position is taking your thoughts and ideas do not happen in a vacuum, but within the context of other writers and theorists who may have opposing or similar views.
Our stories shape our sense of reality- Palimpsest
The impact culture has on your attitude to time.
In indi, same word for yesterday and tomorrow.
Italian reniessence0 introduction of linear perspective, allows the viewer to view the vanishing point, bringing them into the illusion of being in a particular position in correspondence to the event that is occurring within the art piece, Madonna painting for reference.
Look back at, more symbolic, less literal from clives constellation.
European art normally depicts a moment in time
Where Eastern art normally represents a continuous condition. An archetype,
Example of board could not include a linear perspective due to the present of an omnipresent observer, perhaps because in Indian culture a belief is that all things contain a consciousness. Painting in narrative and figurative containing multiple moments within it. Because there is multiple events in one painting, a linear perspective is not appropriate.
Explore Orientalism.
Carl Yung.
Link things into theory of general relativity.
Reading: The Living Present
Look at presentation slide
How do artworks invite us to contemplate on the aspect of time?
The television channel, BBC Two is presented as being well known for its diversity, with the need for a rebrand long overdue, it presented the challenge of matching up the principles of unity within branding and the need to still express the feeling of diversity that are present within the channels programmes.
The result was creating “The 2 Curve” implementing wild variety into a familiar shape. The end product of this rebrand would have had to been tested and perfected given not only the size of BBC Twos audience but also the previous problem of conflicting factors concerning the brands extreme variance and a need for unity under one brand. I think the final result reflects that very successfully. Not only are the animations aesthetically pleasing the watch coupled alongside the soothing audio clips, but it’s very clear from the start that there is clearly meant to be a curve that represents a two down the middle of the screen. This instant recognition of the curve then allows viewers to enjoy the animation that follows. I think this is why the visual “two” within the screen had to be so clear, so that viewers don’t spend the whole time trying to work out what they’re looking at. The reason for directly contrasting colours being used for either side of the screen support this point, having two shades of orange that almost match would make the curve far too difficult to recognise and so, would therefore diminish the overall impact of the animation. Without instantly recognising the curve, that key aspect of a unity under one brand is lost, and therefore the work is not deemed a success. However, the animations vary widely, different colours and textures are used as well as different audio clips, I believe this design decision has been made so that each animation loosely corresponds with the following program, whether that be taking the colour palette from the actual programme itself or simply attempting to recreate the lively and bubbly atmosphere of a baking programme within a short animation. Implementing this introduces visual metaphor into the work, effectively making the view more interested in the animation, as allowing the viewer to figure out the connection between the animation and the following programme allows not only the animation to feel more connected but also rewards the viewer slightly for thinking and being rewarded with this new information, all of this is achieved through purely imagery and sound, I feel due to the fact that this is made for a television channel, that it appears entirely appropriate. Overall the rebrand seems entirely successful with a very innovative solution to a particularly complex issue, creating a brand that is “unmistakably BBC Two”.
Amsterdam Sinfonietta
The branding for Amstedam Sinfonietta intersted me due to the striking appearnce of the transforming type as image elements. I think the descion to brand the work this way is to combine it with the very princioples that the client “Amsterdam Sinfonietta” strives for. the key word being “Transformative”, as the typography on the page literally transforms to form different images within the page. Text both appearing and dissapearing to mimic sometimes lighting, or to seemingly react to the intensity of the music being played. I think the smooth transitions seen within the work are particularly vital as they naturally refelct the progression of a music piece, following a rythym like the music, seen to be in something simlar to a GIF format allowing the animations to reapeat themelves endlesssly, not unlike that of a musical chorus or an enitre song itself. however i think that some view classical music as being outdated and old, this may be perhaps why the branding has been made using modern, digital elements. to help remove the interpretation that this type of music and the company behind the musical pieces are only aiming for older generations, this is clearly to strive for a wider audience base by reaching out to a wider target market. the innovative and striking finish helps to quickly grasp any viewers attention immedatly and ivite them in to learn more about what this company is all about, I think they have done a wonderful job of this as i only had to quickly scroll though this article and i was struck by the quality of the work but still slightly mystified enough so that i only wanted to learn more, for that purpose i would consider this a very successful rebranding.
For this project I have been tasked with creating a portfolio to display my work. It would have a clear theme throughout, having my style of work shine through both the work I am going to showcase as well as the backgrounds and orientation of the page.
To begin this project I did a small amount of research into portfolios in order to gauge just how long and they should be as well as how much content to put on each page. I decided that my portfolio would likely be digital based since that is what the majority of my work is made on, using digital mediums. Planning to keep to one project per double page spread, allowing me to input a large array of work while still avoiding making the page looking too full.
My initial concept is displayed below:
For this example i have attempted to create a content filled, minimalist piece. With the aim of including very small amounts of simple, block colour background content in order to allows maximum focus on the foreground images of the app wire frame itself. However I think that the large AD within the background does throw focus off too much and attracts far to much attention, possibly because it has too much opacity and the fact that the drop shadow is very large. I think this could be improved by including a greater amount of images that are within context, such as hands holding the phones rather than simply dropping the JPEG files into the document itself. I also want to experiment with more photography, if the correct photo is chosen for the project, then perhaps there will be no need for a heading at all.
I have decided to create the app design page first as think that would take up the mot space and therefore would set a good gauge for how long the portfolio should be, within my research I found that it should be no longer than 10-12 pages/spreads. given that I have only had around six projects this year it should be easily achievable to create a detailed but still condense portfolio.
I began experimenting with photograph in an effort to contextualise my portfolio. Beginning with some simple photos that could be used anywhere within my app design portion of my portfolio.
Examples are below:
This slideshow requires JavaScript.
I have simply taken photos of me using my app within my halls bedroom, hoping to give a clear and simple use of the app. This could now be used as a hero image to introduce the project, this photo serves a purpose of showing that the project coming up is to do with designing apps, as well as telling the viewer the name of my app. Finally it makes the work look more real since it has been used within a real photograph and is not simply a JPEG. I do like the simplicity of these photos however this may prove a problem once one has been placed into a spread alongside text and possibly more images/photos.
After importing the photo into a spread I have noticed some easily achievable ways to improve my outcome. I feel the contextualisation needs to be taken further, my app focuses on the use of multiple phones working as a speaker wherever you are. Having a photo of one person alone in a room does not work particularly effectively to translate this thinking within my portfolio, I think a more effective photo would be to place the phone in a more attractive scenery and perhaps include a greater number of phones to help covey the co ordination aspect of my app to a stronger extent.
This slideshow requires JavaScript.
I think the overall quality of these photos are much stronger than my previous examples, the removal of hands make allowed me to open up the different angles that I could take the photos from, A faux screen interface can easily be introduced later in Photoshop to make it seem like the phone is being used, making the portfolio successfully contextualised.
This slideshow requires JavaScript.
Alongside using my own in context photography I also experimented with using templates to see the outcome of them, using an online template for the phone, however using examples of my own photography to place the phone in context, using countryside photos to try to show that this app can be used anywhere. However I do not like the outcome I have created, not only does the lighting on the hand and phone look too artificial when paired with the photography. But I do not like the fact I have to use a template, I would rather the entire work was my own since the portfolio is supposed to be a showcase of my work, I think people should stray from using online templates created by others.
This slideshow requires JavaScript.
Editorial
Moving on to creating my editorial and the remainder of my spreads I discovered that a using the digital files but making them appear as though they are real by overlapping them as well as including drop shadows was the most effective way to go, I decided to use the ligatured first letters of many of the projects present within my first draft, however made them much less impactful as so to not draw too much attention away from the content and keep the spreads open.
This slideshow requires JavaScript.
This slideshow requires JavaScript.
Although i did attempt more directly in context photograph but I simply found that the other ways of completing the work were more effective due to the existence of the coloured backgrounds present within many of my portfolio pages.
In an effort to help expand my knowledge of what works effectively within an editorial spread I experimented with some more initial concepts. Although both of these examples use a black background, I have found in my previous experimentation that darker backgrounds help to convey the feelings portrayed within the actual article more effectively.
The first example would require a multi layer composition. The cover being made up of the first image, using white bars on a black background as a way to represent prison bars within captivity. I have also drafted cut out messages to help display the hidden factors of modern slavery. I do think that this way of working is effective and works well to fill up the space on the page, however very large problems will arise with consistently doing this effect.
Secondly I have tried to implement another initial concept into a spread to see how effective it is, the layering of the text and background works to give the piece greater sense of depth. The gradient, overlapping text is effective at jumbling the letter forms to such an extent that the viewer has to work a small amount to view the words, but not o jumbled that the word becomes entirely illegible.
If I were to do further development I would like to experiment with more, lighter coloured backgrounds in another attempt to make this style of finish work as I think this would give the text more space to breath as well as looking more aesthetically pleasing once printed onto paper stock.
This piece, created by Pentagram is the 2016 edition of Circular magazine, marking the 40th anniversary of the magazine. Since Circular is often filled with oversized typographic elements and a general, slightly chaotic looking aesthetic Pentagram recruited a large number of designers to create this issue. This issue also include page numbers thrown about the page often placed in seemingly random locations, the amalgamation of all the images placed onto the page make the work look distorted with many elements taking positions against any sort of set grid system. The crowded pages seem to contain echoes of the futurism movement, containing mainly imagery rather than text in the examples that I have shown many of the elements spread across the page border and so small amounts of the work is lost within the page creases. There seems so obvious colour scheme consistent throughout any number of pages, apart from the Gray background being prevalent throughout all of the pages containing heavy amounts of photography.
The work is composed using what appears to be many different elements, some of the work is digital, using purely photography, whereas there are parts such as within the bottom left example where black textures are placed onto the page, this looks similar to the finish given off by the process of screen printing, apart from that there does not seem to be any hand-drawn elements, the block colours and use of constructed typefaces looks to make the spreads look very digital in nature.
Within the spreads I have selected there seems to be a focal point of a single, coloured image placed, normally within the central borders of each spread, this is then surrounded by text and other imagery giving the piece a solid hierarchy system in place. The body copy and headings certainly seem much more structured, although still defy some of the grid systems at times, giving a stronger link between the text and the images, while still making the text easily legible. The shapes and images present do not repeat in any way, adding to the chaotic nature of the spreads, rhythm and pace within the spreads seem difficult to detect due to the chaos, however this does seem to be consistent so that in itself creates a very fast rhythm and pace, making the spreads look striking and even slightly confusing and overwhelming upon first viewing.
However, even through the chaos there is still a good balance of negative and positive space, enough of the page is left as plain background for elements to be located and easily tracked without it becoming too much work to read, containing mostly portraits and headings it looks to be an information page about several designers.
The spreads create a high intensity mood, provoking emotions of creativity and spontaneity, this may be due to the largely random looking positions that much of the elements on the page seem to take.
Overall these spreads show, very clearly that one does not need to conform heavily to the grid system in order to create a legible, but still successful spread. Perhaps the reason the work is so randomly placed may be due to the fact that the artist could have attempted a more structured look, but it looked to generic and seemed less interesting to look at, this certainly will attract those walking past, and make it more interesting to dissect the different elements on the page, successfully inviting viewers to look with more effect rather than to simply glance past endless paragraphs of highly structured body copy.
Charm, Belligerence & Perversity: The Incomplete Works of GBH
This slideshow requires JavaScript.
This Editorial piece offers much contrast to the previous example, with the designers behind the spreads having a different belief, that “Typography should be accessible and easy to read”. The work focuses on one subject throughout, and so because of this the pace of the work remains the same, almost to an extend of it becoming predictable, however the design layout allows for a very large hero image on each spread, acting as the main focal point for each spread as well as giving each spread a new and fresh look, even if the text and background orientation remains the same throughout, this supports the designers beliefs strongly that the typography should be very easily legible, even to the the point where the point size of the body copy is extremely large, within these spreads I get a much stronger sense that this editorial work is catering for everyone, whereas the pentagram spreads seem to be more for those interested, involved and understanding of the more technical and extreme factors that can be applied within editorial design. While these spreads do not necessary stretch the boundaries of grid systems and layouts, the simple hierarchy makes the systems that are put in place easily view able and shows a degree of restraint and professionalism throughout.
Given the fact that the actual editorial itself is about the fact that if you gave one hundred monkeys enough time they would eventually create the work of GBH, the monkey themed cover seems very appropriate while appearing extremely striking upon first viewing, making it an highly effective cover, inviting viewers in and making it stand out among other editorial examples.
There doesn’t seem to be any specialist print techniques within these spreads, such as embossing etc, which adds to the simplistic and clear atmosphere that I feel is emanated from these spreads. Alongside the plain white and plain black backgrounds of many of the spreads. The work is made fully through digital means, the imagery that is present within is photo graphical and the remnants of the elements are the typographical headings and body copy. using a large, singular, central paragraph to display the text within each page, as well as keeping the same structure of an image on the left and roughly the same amount of body copy on the right side page. The spreads overall yield a much calmer mood, even though some of the photographs are very high detail the size of them makes everything easily view able.
Following on from my formative deadline for my editorial project I received large amounts of feedback in order to improve my current designs and achieve a higher grade. The feedback concerns all areas of my project, both design and research elements. I will mainly be focusing on the design elements of the feedback first, fixing the spreads themselves based on the advice given. My spreads pre feedback are shown below.
Things I will be looking into first will be ways to be more creative with the backgrounds I have chosen. Essentially filling all negative space within the first two spreads with a simply, crumpled paper background and creating tears to reveal the text, due to the effectiveness of the neon text and the strong connotations that it carries, as well as the fact that I have made it myself, I will eliminate some elements of the first spread and put much more focus onto the neon effect itself. Potential ways to do this could be; to remove the paper entirely and use shape letter forms that are created within the neon effect to help emphasise it, Alternatively I could potentially still remove some of the paper and replace it with much more subtle, lower impact imagery that will not attract as much focus as the off white paper sheet does. This could be achieved by somehow implementing night photography into the spreads. I think this is my strongest concept as I see the most positive and the least negatives. Having low impact photography not only allows more focus onto the neon text but will also allow me to input even darker, hidden messages into the photography, perhaps exploring more into the “Shadows” element, recalling back to the beginning of the project where I was attempting to create shapes using shadows from random objects to create a loose portrait of something resembling a person.
Delving into the potentials for photographical concepts, I want something similar to a lit abandoned shop with large windows allowing the user to see into it, Ideally the shop would have bright, white lights that give off large shadows where element could be hidden within. Upon first viewing of the photo an eerie atmosphere would be given off, like there is no obvious problem but something just does not feel right about it.
A way I could do this could be by photographing “In-Between” spaces. Places that are not usually a persons end destination, but yet they will always stop at/pass through. Examples of these places are Bus stops/Train Stations, Petrol Stations etc. Places that are not often considered but do exist and everyone uses them at some point in their lives, This would tie in well with my “hidden people” concept present within my spreads, enhancing the strength of my visual metaphors, overall increasing the quality of my spreads aesthetics, themes and atmospheres.
Above are my most effective outcomes of my photography, going to a nearby garage and capturing a structure with a large amount of big windows where there is plenty of space to look into, While these photos were not actually taken at night, the reason being that the photos i took once the sun had already set lacked much of the details that I wanted, so as a result of this complication I will overcome it by editing the photo within Photoshop much more heavily in order to create the illusion that the photo was taken after dark, I will also likely increase the contrast and other such areas to make the photo achieve a more eerie feel.
Above is my more refined and edited outcome of the original garage image, using many of Photoshop editing tools to create a much darker, eerie and night time photo, I also thought that rather than having the image have a clear, hard border I decided to fade the photo out to form a black background, allowing for me to now input the previously placed neon heading alongside white body copy which should contrast nicely with the remaining black present all across the background. The large void of black space gives me much more room that previously to include body copy, headings and pull out quotes. This now promotes me to look back at the article that I have chosen, because I now have much more space within the page I may be able to undo some of the trimming of the article in order to include more information and help fill spaces left by the black background. Or perhaps I will use more neon to illuminate the space and the background.
Progressing further on, I decided to include more neon text within this spread. However I felt they had the wrong impact when placed on the spread with the fully, bright blue colour, as a result of this I decided to place them under the same effects that the photo itself had applied to it, making the letters still glow, but have a colourless glow, giving them a less striking and more subtle effect. I found this to be much more effective. The scattered letters has worked previously as a good way of scrambling messages across the page while making the viewer look harder at the page in order to figure out the various words that are being said within the page, I also found that due to the way I have scattered the letters it looks as though the words are stemming from the structure within the photo itself, almost as if someone is crying for help and only the rough, random letters of their messages are being translated onto the page. I Think that this spread has been massively improved, the removal of the paper effect has not only made the negative space have more of a purpose and give it more impact. but it has also made much better use of the positive space within the spreads with a smoother and more aesthetically pleasing finish.
Inputting the body copy was kept simple, I avoided overlapping the body copy over the photo too much because of the large amount of black present on the left hand side of the spread, Although the hierarchy has been made simpler I feel it is now much more effective, with the larger amount of space opened up I am also able to include more sections of the article, allowing to fill the majority of the space without it becoming too overbearing. Potential improvements could be to edit the photo further to include barely visible elements of human shadows that would not be visible at first, giving the spread more impact and making them more enjoyable for the viewer to discover the smaller details present.
Spread 2
Following on from improving my first spread I decided I would ensure the paper effect was removed from this spread as well, as the pace of the previous spread has been changed so drastically by reducing the amount of neon I decided that an interesting concept could be to ramp up the pace as the viewer progresses through the spreads, having only the heading in neon within the first spread, more neon within the second spread and an almost overwhelming amount within the world map on the third spread.
Firstly, due to the fact that photography worked so effectively on the first spread I decided to see how the concept worked within the second spread. Choosing another low impact photo as so to not overwhelm the page.
Using a photograph of a hand clutching at a door, this will be now be edited to appear much darker and have the same effect as the photograph within the previous spread. Also as well as the fact that if I was to remove the paper the page could potentially appear far too empty, inserting a dark, black and white photograph would be very effective in filling the space with a purpose without appearing too overbearing.
Using roughly the same effects as previously I found editing and placing the hand easy and thought it suited the lighting and atmosphere of the page very effectively, due to this aspect being introduced on the page I simply moved the pull out quote out of the centre, which did not present any problems as the I find the small adjustment in position did not present any design complications. I think the pace ramps up nicely from the last spread, perhaps there is a small amount too much neon on this spread however I wanted to avoid there being too big a difference between spreads two and three due to the fact that that may cause consistency issues. further improvements could be done to present the body copy in a more exciting manner, but I think that the current placement is suitable and effective still.
As for smaller details being changed, I decided to change to a more legible, sans serif font “Roboto”, although this made the body copy more legible it did present a different complication because of the fact that this particular font has much wider letter forms which causes its increase in legibility. This resulted in much of the text paragraph becoming elongated, stretching past the boundaries previously set. This only caused a slight problem on spread two once I had edited the leading to be different from the default setting in order to give the text a greater amount of space to breath, paragraphs had to be adjusted and headings had to be re-positioned in order to accommodate the extra space taken up by the new fonts and settings.
Overall I think that the improvements and changes done to the spreads I have changed have all been positive, and all in different ways, various things such as legibility and hierarchy have been improved as well as design based improvements such as a greater feeling of visual metaphor and detail within the imagery of the spreads. I am very happy with my outcomes and feel the sense of pace has been mended alongside the introduction of more customised fonts make the pieces look more personalised and unique. However I do think that I could benefit from further initial experimentation within the earlier parts of the project in order to yield a greater knowledge of editorial image and structure in general.
The second part of my Graphic Communication in Context project involves the creation of an app using a new programme, called Adobe XD, designed specifically for the creation and prototyping of Apps.
Very quickly into the project I have been able to come up with multiple initial ideas for the app that I could potentially create. My first idea consists of an app that when used allows multiple peoples phone speakers to be connected to play at the same time, making each separate phone one part of a larger speaker system, however a further improvement upon this idea will include the ability for the “Host phone” to allocate a certain number of phones to different areas of the audio spectrum, effectively creating one, relatively high quality sound system simply made from phones that would be very customisable based on the person.
My second concept involves an app that would allow the user to input the foods that they buy when shopping into the app and then the app would come up with new recipes that could be made with the food that has been scanned in, additionally reminders could be set so that certain foods would be inputted into a list that alert the user next time they are located within a food shop.
My third concept is more of a playful one, titles ImAlone, allowing the app to set a timer whenever the phone screen is not displaying, the timer ends once the screen is activated by the phone receiving a notification, the score is then uploaded to a global leader board, with the longest times placing in first.
My fourth concept expands upon group chats by allowing groups of friends to input their weekly schedule and adding others to the chat who can then add their weekly events or outings to the already existing schedule, this would effectively allow for quick and easy organising of social events without having to constantly contact others about when they are free for time together.
And my final initial concept is one to prevent procrastination by wasting time on a phone when someone wants to get work done, the user simply inputs a time slot for when they want to ensure work is done, if the phone detects it has been used within that time frame, the phone either plays a loud alarm or shuts of entirely until the timer has finished.
I decided to push further with my first initial concept as within the group tutorial it seemed that that concept held the most promise and appeared the most unique and different out of all of my initial ideas. However it was pointed out that there is a small app already released that simply had the ability to connect peoples phone speakers together using Bluetooth, this means that I will have to research further and develop my idea in more detail in order to ensure that my idea is still unique and useful, perhaps I will make it a much more personal and customisable experience, allowing for different themes based upon what the user is listening to, alongside being able to share the playlists you are playing further afield than simply the other present within the room with their phones connected.
Moving further on with this customisable phone speaker idea I did some more research into music Equalisers and the apps that are associated with this, mainly looking into spotify’s EQ and discovering a severe lack of customisation within the settings of spotify, this means that making my music audio settings very customisable would fill a gap in the market, as spotify is the most popular music app for phones by far, a good concept would be giving my app the ability to work in tandem with spotify, this would give me a steady revenue stream, allowing my app to be free for purchase and giving the user access to all the of songs and playlists they listen to frequently on spotify itself.
As this idea seems to be successful so far I have decided to stick with it and develop it further, accompanying further research I have already thought of some ideas for a name to call my app, the names are as follows;
Portable Party
Mix Master
Ispeaker
Speeker
Speekur, the sound system with “U” in mind.
Personally I feel that “speekur” is my strongest concept, it offers many wide open opportunities for the style and content of the app itself while still containing many connotations of this fully customisable factor that I want to translate very clearly within my app, this now simply means that I must deliver this feeling within the pages of the app itself. I also find the slogan snappy, effective and memorable.
Now moving onto the creation of certain elements of the app, obviously at some point I will need to include a responding and live EQ that will play and react to the music that is passing through the many phones acting as speakers. So in preparation of this I decided to firstly ensure that this would be possible to create using the programmes that I currently have access to, I discovered that it is not only possible through Adobe After Effects, but also very quick, simple at first and extremely customisable, a tool essentially gives you the ability to turn any number of paths or shapes into a set of movable key frames with the audio spikes of the song that is being played being the thing that sets how the paths and shapes move, this means I will not only be able to create a functioning EQ but also means that I will be able to create different EQ’s who’s appearance can quickly change based upon the listeners taste in music, this will simply require either access to the users music library, which the app will require anyway for the ability to play the songs, or alternatively a simple question once the app is first launched asking what the users music taste entails, however if this option is used the genre of music will have to be able to be changed at will alongside the appearance of the app and its features
Beginning Design
Once initial animations and concepts have been created I then moved onto sketching and designing initial concepts for the actual app menus themselves. I began by drafting some initial wire framing on a sheet of paper, this will help give me a much better sense of clarity within my designs once i moved onto Photoshop and illustrator, and finally porting the designs onto Adobe XD to place into an app. A first draft of my apps wire frame is seen below, although there are not many screens i plan on expanding the quantity of screens by implementing multiple different options for themes based upon varying music genres, the genres i will choose are going to be chosen based upon the 6 most popular genres.
After consulting the chart, I’ve decided that the genres I am going to design are, Pop, Rock, Country, Classical, Dance as well as a default setting that boasts more neutral and muted colours so that those who use my app that do not have a particular favourite theme/colour scheme can still be satisfied.
Next I move to my sketchbook, where I have done some research into other apps that are similar to mine and how they display their information, spotify was my main research point, I found that the app mainly showcases the song art and the artists creating the songs rather than the more technical side of customising equalisers and creating different types of sound, a route I am planning to take within my own app “Speekur”. Another app I looked at into more detail was the mobile app “Boom”, this example included a much bigger focus on music mixing and technical side of music and equalisers, this was much closer to what I hoped to create. I found that “Boom” used a much smaller thumbnail of the song art and a much greater number of buttons available that would take the user to other screens where their music experience could be improved and enhanced.
Alongside drafting potential layouts for the app I also sketched designs for equalisers that could be used, ensuring that each equaliser fit the theme that it is placed within. For instance, putting a light, colourful equaliser for the default theme would not fit the rest of the aesthetic of that theme and so would then stand out, resulting in inconsistency within the app itself. I will need to be very careful of keeping things consistent within my app, if i am to include many different themes it is important to find a balance between, making the themes different enough so that there is a point to creating them, but also not making everything so different that it looks clustered and like it is multiple apps smashed together without care or design decisions.
Initial concepts for theme designs are shown below in a Microsoft Word Document.
Due to the fact that I know I what kind of look I want from the logo very early on within the project I have decided to move straight onto after effects, after a very short session drafting examples on Photoshop and within my sketchbook. I know I want a smooth, ligature included intro, using mainly blacks, white and greys. I also want something that is repeatable, so I must export this file either as a GIF, or repeat it manually in Premiere Pro.
Below is an example of an early draft of my logo.
Although I do like the ligature look, I think that in my final design I would rather use a typeface with a thinner weight, this should help to translate a more modern look over using a much chunkier, heavy set typeface, however a positive of using this typeface would be that if the white was placed on a brighter coloured background than the black and navy that it currently is, the thicker letter forms would still be easily legible due to their weight, this may become a problem if I use a thinner typeface in the future and so I feel it useful to write this as a note to myself if my design is to change drastically in the near future. Although the ligature between the “S” and the “P” looks smooth and professional the ligature between the “U” and the “R” looks far too thick and far too thin in places so this will need some addressing if I am to progress with this design. However I will now need to redesign this logo within After Effects as currently that is the animation program I am most confident in, thanks to previous movement projects I now know the basics and certain more complex methods to complete this task. However upon immediate reflection I am unsure as to how I am going to create a “smooth” looking animation, I am sure it will require a large amount of work editing frame by frame, adjusting key frames to achieve an overall smooth look and to ensure that the fluid ligatures never become out of place when travelling from one static letter form to another static letter form. I feel this will be especially important due to the fact that my logo is such a minimalist and simple design that every little mistake will be easily spotted, however I think that a simple design is key to achieving a modernistic and stylish look, since this will be the first thing people see once they open my app it is vital that the finish is high quality and interesting to look at so to invite the user further in and ensure they come back to using my app.
Final Logo Design
My initial plan for this animation is to use the “Trim Path” animation setting to create smooth ligatures between letters. However this may mean I will have to create the letter forms myself, this should not be too big of a problem as within my editorial project I created my own typeface so I feel I have sufficient experience in order to do it again, I can even reflect on my previous critiques to improve upon what I have already made previously. However a key difference between my typeface in my editorial project and the letter forms that I am possibly going to have to create within this project is that these letter forms will have to look more professional and smooth, due to the nature of the animation it is important that there are not sharp edges to any of the letter forms, sans serif fonts are obviously optimal, as well as light weighted fonts so that the ligatures are not too thick that I lose the modern aesthetic.
Above is the first example of me creating my own typeface that is prepped for animating the trim paths within after effects. Although it does not look anything like it, this letter form will create an “e” once animated correctly. In order to make the animation more exciting than simple having ligatures appear between letter forms, I have decided to turn dots, into paths, that will then swing wildly around then stop to pause for a second or two in such a place that the multiple paths link up to create the letter form that I desire. All of these paths together will come to form the work “Speekur” for a short amount of time before disappearing into simple paths once again, only for the animation to repeat itself, endlessly until the screen is dismissed. This fulfils all of the criteria that I wanted my animation to contain previous to any design, I now only have to create the remainder of the letter forms and then move to animating them within after effects.
Stages of Making (Logo Animation)
The way that I have created these letter forms from the paths using the trim path animation setting is by first of all, designing what path i want the letter form to take on illustrator, I have used two paths per letter form for this example, I then imported the two different coloured paths into after effects, following on to creating a vector layer for each path that can now be freely animated and manipulated to the full extent that Adobe After Effects has to offer. I then applied the trim paths effects to both paths, this allowed me to show a certain amount of the path at any time, so although the yellow path has more bowls and arches than an “e” letter form, if i adjust the start and end point of the trim path effect to the correct percentage then only the rounded outline of the e will be seen and not the large arch, this can be paired up with the red path so that that particular path only shows the line present within the centre of an “e”. However, since this is an animation, I am able to show the progression of the path into an “e”. The way that I have achieved this is by having both the start and end points at 0% when the animation is at its first frame, I then fast forward to the 2 second mark of the animation and insert a key frame for the paths with the start and end points being at both 95.8& and 71.8%, these are the exact percentages where the paths are in the perfect place so that when they are lined up within each other correctly, they form an “e”, i then freeze this frame here for one second, and then do the exact same in reverse. This then effectively creates the illusion that two dots move around the screen, swinging wildly before finally stopping together in the shape of an “e”, before then reversing back into simple lines, then back into two dots, and then disappearing for two frames, then the clip will restart, making the effect loop until the screen is dismissed.
However, simply editing the start and end points makes the animation look too static and predictable, although the letter form is created, the way it gets there is not particularly exciting to look at. I find the movements boring and that changes in pace would make the animation much more exciting, this is done by animating the key frames themselves using easy ease in and out, this combined with editing the speed graphs of the easy easing allowed me to create the “ramping up” effect so that the paths appear to gain speed and “swing” through loops and bowls before decelerating before stopping at the moment the letter form is formed. I find this part of the animation extremely fun to watch and looks very modern, I think a colour scheme of off white for the letter forms and a gradient ramp light to dark grey for the background will suit this type of animation well and so should help to shape certain colour aspects for the rest of my app. I think it’s important to not make the animation look too intense and overbearing once I have animated the remaining letter forms to create the full word “Speekur”. I will attempt to make the two “e”s the main focus point of the animation, although I plan to make all of the letter forms use this trim paths effect I will tone down the wideness of the swings that the paths take to reduce overlapping of letter forms and to distribute focus throughout the art board without having the viewer completely lose track of what is happening. I will also have to ensure that all of the paths form up to create the full word “Speekur” for at least one or two seconds at some point in the animation. Although I do not think it is necessary for the user to be able to view the full word instantly, for example it may be a good idea to make it so that the user has to watch the full animation two or even three times to be able to understand what word is being displayed on the screen. I think this due to the fact that the extremely long amount of time that this single letter form has taken me, the full animation will take a full couple of days of working to create, and even longer to refine and fix potential problems that may occur, I want this animation to be looked at for longer, as I really do like the finish that it the effects yield, I do not want this to be a screen that is ignored immediately, I want the user to take a few seconds to look back and appreciate the technical accomplishment that the home page animation should be.
Logo Paths
Optimal Frame within the animation
The final animation outcome looks as good as I hoped it would, the less extreme animations on the remaining letter forms serve to offer the majority of the focus over to the centre two “e” letter forms. A part I particularly like is the fact that I have been able to make the curves of the S form from a line that runs under the entire word, creating an almost underline effect, although the rest of the animations are less extreme they still use easy easing and the speed ramps of the effects are adjusted so that they are still very interesting to watch take form if looked at individually. I find the word remains on the screen for the perfect amount of time, while some may be able to read the entire word in one animation round, Viewing it for the first time should make the user recoil in a “wow” moment at the animation, making them want to watch it again one or two more times until they click off and dismiss the screen to move into the actual app itself. Overall I am extremely pleased with how this animation turned out, I will export the animation as a GIF and then select a frame where every letter form is present and most likely make that my logo, the handmade font suits the finish that I want the app to have, alongside this there is a font that looks similar to the one I have created called “Roboto”. I can now easily use Roboto for the remainder of my typography to make my app more consistent but still to make my logo stand out and remain to look unique when placed next to blocks of text that are in this Roboto typeface. Although I am extremely fond of this animation there are certain areas for improvement and alterations, for example I could alter the paths so that while they are forming the letter forms they create an image for a split second, for example the front of a speaker, however I do not know if this would be noticed enough as well as the time it would take to make could mean I do not have enough remaining time to create the remaining parts of the app. Finally I think the bowl of the “U” is too wide however this is a minor problem that can be fixed very quickly before moving forward.
Iconography
Although it was expressed within the briefing of the project that it is not mandatory that I make all of the Iconography myself, due to the extensive detail that goes into creating icons and that it could “form a project within itself”. I still wanted some icons that would be unique to my app. I wanted to create my own icons at some points within my app for two main reasons, I felt it would be very good practice for future projects that I will Inevitably be briefed with, alongside the fact that many of the icons I found that were available for download and were compatible within XD are general icons, For example, a Battery icon, WiFi, signal, Bluetooth, etc. The icons I plan to create myself are going to be used to represent the genres themes that are going to be available within my app, as previously mentioned I am going to expand the customisation within my app past simply changing the sounds that come out of the devices, but I want to create six different looks that the app could have based upon popular music genres as well as a default setting.
Initial sketches show each icon being used to attempt to represent that genre of music within a single, simple picture. I researched through different music apps to see how effectively they have managed to achieve this, in particular looking back at the “Boom” Equaliser customisation music app, Drawing much inspiration from this app when designing my own icons. At this point I am unsure if I want my icons to contain multiple colours or to be simple black outlines, I will have to use Adobe Illustrator to create these icons due to Illustrators ability to create vector images, These icons may have to change size of position once placed into XD so it is vital that they remain a lossless format of document so that quality of image is not lost.
My digital outcomes of the icons to represent the corresponding music genres are displayed above, I feel they work effectively and accurately represent the genre that they are portraying. One way that I tested this was to present the icons to other people out of context and ask them what they thought each icon represented, while the actual music genre icons succeeded massively, apart from a small amount of confusion with the pop genre being too generic as well as the default setting receiving much confusion. I could not find a good, concrete way to display something at its default setting apart from simply using my logo, which may be a consideration in the future, however I do worry about the consistency of the icons is five out of six are image related and only one is text based, this requires experimentation and research.
Other icons were simply drawn in using templates, these are simple icons such as a home screen or a back arrow. I felt these did not need illustration personally.
Button Design
Deciding to start with a much more simple button design than the examples above, I found that simply having rectangles made the app menu screens looks plain and uninteresting, in an attempt to make the app more fun to navigate by having button that appear more, button like, implementing shadows and brighter parts to give them a greater sense of depth, although they will now be edited within Photoshop to experiment with colour I am happy with the design of these buttons and plan to use them throughout the app.
Colour Schemes
Beginning with designing my colour scheme, I first decided to tackle the Dance genre, using Photoshop tools to create small squares of contrasting colour as a way to test potential colour schemes and evaluate their effectiveness.
I did not find this exercise particularly effective, as although I explored many different colour schemes, none of them seemed to fit the colours i desired, as I wanted a laser, club type look I decided to use a greater number of greens rather than oranges, blues or reds in order to achieve this look.
Moving onto other genres I generally followed my pre constructed plan, although often explored many different colour schemes throughout. Below are example of some of the potential colour schemes that i would use within the different genres, the colours on the buttons representing what would be seen within the actual genre screens. As the colours within the menus were to represent the general aesthetic that the music genres emanates I felt it of upmost importance that these be high quality, accurate and aesthetically pleasing, hence why I have experimented with upwards of eight entirely different sets of colours for each genre until I reached the scheme that I felt drew most accurate to what I wanted.
Layouts
I experimented with many different layouts themes, colours and designs in order to optimise my app. Beginning with very simple design and then moving to enhance and stretch my application much further to incorporate everything that the user would need to be make my app a satisfactory experience.
my first initial design for app menus and pages were somewhat plain and underwhelming, using only basic colours containing greys, whites and blacks, I attempted to make a simplistic and modern design, although I think that the design on the left does this job much better I still do not think that it works effectively. While it does appear simplistic there is not enough on the page to make it interesting. The design on the right is my original design for my default menu page, hoping to use a grey scale theme to make the menu appear neutral.
Genre Themes
EDM/Dance
I decided to use a range of greens for the EDM/Dance genre in an attempt to emanate a range of lasers and a club type atmosphere, the extremely bright and vibrant shades of greens would only be possible to show on an RGB web based format due to their brightness so I feel as though I am optimising all the useful resources that I have by including complex and bright colours like this within my app, ensuring to use the full range of shades available to me as well as setting my work apart from my previous, print based work. I kept to the agreed colour scheme very well, using a blue/ green shade that compliments the lasers well.
Alongside the colours scheme and the design elements i also ensured that there were also moving animations within the app menus. Using XDs auto animate feature in order to create the illusion of flowing lasers that change location once the user moves through the different menus. I thought this would make navigation more interesting as well as help to fill in the “in between” times when the new menus are being introduced onto the page. This in turn means i had to extend the animation time as well as include an easy ease to improve the animation speed ramping. An original plan was to include different colours as well, however due to the massive amount of colours and shades available within the app due to the existence of the different themes.
Inkeeping with my previously thought up themes, I decided to use a wooden texture within a photgraphy taken by myself to form the background for the screens present within this theme. Using more warmer, brown shades in an effort to express the typical looks and sounds present within country music, while I thought this went well I also created the icon for country based around similar criteria, even if the colours do not very effectively portray country music, a different selection of colours and shades present within each theme should still work to enhance the User Experience and increase the customisation within the app.
The theme that I feel is most effective is the classical theme, using elegant calligraphic flicks and tails coupled with various music notes intertwined in an attempt to give off a high end feel. For this theme in particular I have decided to change the typeface used within headings and body copy, I felt this matched up well with the rest of the theme, also changing the buttons to a subtly gradient purple, I think the way I could change this design would be to include a greater variance of background designs. While I do like the designs I have made, I do think the pace of the menus could be greatly improves by including further experimentation within this area.
My next theme was centred around the genre of rock, for this particular theme I decided to include a greater amount of photography in order to offer a nicer contrast between the buttons and the background, making each of them stand out more. Taking simple, primary photography of the various parts of an electric guitar I then proceeded to port all of the photos into Photoshop and edit them, selecting only the most effective few to actually put into my app backgrounds. Originally taking around twenty photos of both a guitar and the amp that accompanied it, I eventually whittled it down to three photos, eliminating all of the amp photos as I felt they were not as clear or consistent with quality as the three I have selected are. Due to most of the photos being much larger than the pixel size of the background, Once edited and ported into Adobe XD I was able to select which part of the photo I wanted to be displayed, I experimented with using the same kind of technique as I used with my EDM theme of having only one photo but simply moving it around with the auto animate setting applied so that the photo would transition smoothly. This did not work as effectively as I had hoped and so decided to abandon it and simply use three examples of static photography.
I found this photography very effective and perhaps more effective than every other theme in translating the genre, as the photographs are also coloured they contain both the correct colours as well as the actual content of the photograph working to translate an atmosphere. I think this theme contains the highest amount of clarity as to what genre it is meant to be part of. However I feel they could be improved by including further experimentation into the
My final theme is based around the genre of pop, using various very bright and vibrant shades of pastel type colours. Since most pop music is extremely popular and often appears atop charts across the world, it was important to make a colours scheme that would satisfy the greatest number of people. While I did not detect much criteria for pop, apart from the light airy tones of much of the music, due to this I decided to keep my theme simplistic, using a gentle gradient of a baby blue to a light pink, keeping the menus looking full of space and ensuring to tend to the maximum amount of users. I decided to use blues and pinks due to the fact that pink and blue being apparently the two colours to describe sex of humans, as audiences of pop music stretch beyond the barriers of a single gender/sex, I felt this would be the most effective colour scheme to utilise. While I do think I have done well with this particular themes, discovering and avoiding/solving potential complications effectively, however this is also what I would change about my theme if i were to develop it further, due to the quick discovery of such an effective theme my work lacks a sense of development and experimentation, perhaps I will go back and look at a few more initial concepts that could be developed.
Equaliser Design
Now that I have completed the general themes and aesthetics for the app I now move on to creating the different equalisers that will then be animated within each theme present within the app, The designs of the equalisers should not sway too far from the colours and images present within the themes themselves, however they should still introduce and offer new imagery and elements that excite and intrigue the users.
Firstly I created the EDM styled equaliser as I felt that the club type atmosphere would be the easiest to achieved through an animation since I already had ideas in mind.
I have created this equaliser using Adobe After Effects, by firstly drawing a simple circle with the shape tool. Using the audio spectrum effect in After Effects I am able to animate any path or mask to move in rhythm to a chosen audio file, as well as doing this, there are several customisation options, such as adjusting the line height, by making duplicates of the animated path and slightly lowering the line height I am able to create the effect above. Creating the colours was a simple matter of colour picking from my app menus and then creating appropriate gradients.
Further EQ Development
Enhancing UX/UI (sidebars included)
My initial concept was to simply have a “previous page” button as well as a home button within my app that was always remain in the same place, making the navigation of the app simple as well as easy to use. However I now find that this appears a bit bare-bones and I think I can do more to enhance the UI of navigating my app without making it more complex or harder to navigate. I am planning on, rather than having different types of settings pages placed on each corner of the screen, I could simply include a settings cog wheel that when accessed will open a sidebar, and then within that sidebar, there could be any number of settings pages. I think this would be a much more effective way of navigation, not only due to the fact that now I can include an unlimited amount of settings by simply making the page scroll able and prevents me being limited by the amount of corners of the screen, freeing up the screen space to include more aesthetically pleasing elements, opening up more possibilities for a greater feeling of personality within the themed app menus. It would also allow me to label what each setting icon represents, because of the nature of side menus, once it has been opened I will have an extra half a screen of space to fill, allowing me to not only include a representational icon, but also a label so to completely avoid any potential for confusion within the users of my app.
Deciding to use a neutral black and white colour scheme as to not extend the already colour filled themes existing within the app as well as matching the introduction animation. The finish is clean and easily legible while the page is not remaining too empty, yet everything placed onto the page serves a definite purpose. I think the sans serif, simple rounded font suits this aesthetic appropriately.
This slideshow requires JavaScript.
Moving on to creating further universally themed menus, I kept with the black and white colour scheme as it proved very successful when placed within the side bar menus. Content wise I decided to create several equaliser presets allowing for a greater variance of audience to be able to use the app with ease while still being happy with the performance of the app itself. Having all of these different types of settings allows an aspect of individualisation, the concept of everyone can have the sound that they want. Allowing those with no experience or desire to make their sound fully custom to simply use default settings or the quickly accessible and easily functioning presets to spread out the different ration of phones shown by the percentage marker found beside the preset label. However those who do not have experience but wish to create and learn about a more custom sound could learn within the app as I have included several pages giving useful information on how equalisers work and how to get the best out of them, making the app an all inclusive environment, not forcing any users to look any further.
For those with more experience I have created a fully customisable audio spectrum with a selectable number of customised frequency bands, as well as options to not only change what kind of sound comes out of the phone based on what music is being played, but also what kind of environment the music is being played as within my research i found that that does have a smaller impact on the sound quality of the music.
Overall I think I have considered all potential problems as well as a broad spectrum of customers, allowing me to gain maximum revenue. As well as this I plan on using adverts and potential contracts with spotify to provide any additional revenue needed.
Porting Into XD (Overcoming Complications)
Finally, once the app had been finished and refined for optimisation, I had to port it into Adobe XD. This created certain complications, I discovered that it is not yet possible to import animations or movements of any kind into Adobe XD, to overcome this problem I have been forced to move the animating documents, such as the equalisers and the introduction animation into Adobe Premiere Pro, After creating a video of myself navigating around the static animations within the app i then sliced up the video after importing it into Premiere Pro and inserted the appropriate animation clips in the correct moments. This effectively creates the illusion that the app has been fully formed with functioning animations and equalisers that respond to an appearing random song that is being played. Overall this makes a prototype of what the app would look like if monetary values were applied to the development of the application.
I also applied several animations that XD does provide to my app pages, these are simple transition that help to make the transition more interesting to look at.
Creating The Final, Refined Video For presentation Pitch To Peers
My pitch was very simple, due to the fact that i was only given three minutes to present my large amount of research, screens and the overall reason for why the app exist the way it does. I prioritised on showing the app while describing what was going on and the finer details within the screen. The problems that occurred because of this was that because I had such a large volume of screens and different themes to get through, much of the video appeared confusing and far too fast to understand what was going on, while the audio description helped a lot, I feel that the video was not necessary due to my large amount of preparation and rehearsal beforehand meaning that I was able to create a quick yet precise vision of what the app looked like and how it worked, it would perhaps had been more efficient to include some more specialised and detailed information within the power point for viewers to look at while I was busy explaining the more general information about the app. I think this project overall was enjoyable and challenging and my outcome responded effectively to the brief while I feel i overcame a large amount of complications and problems in order to make my app effective, easy to use, expansive but most importantly, unique.
Aidan's Graphics Blog 