Week 11 Tasks: This week I focused on completing my Infographic and began to use my sketches to put something together. Illustrator: Started off with some illustrations of ships on the sea that I drew in my sketches and then decided to populate it more by adding fish and floating bottles. At this point, I began adding text and I started off with the title, this wasn’t the first title I tried but it was the one that works the best and felt more like a traditional infographic. At this point, I decided to continue to populate the infographics with facts that I collated from my research. This is one of the other titles I tried but it didn’t fit well in the infographic and so I chose my other design. This was one of the final infographics: I then spell-checked it all and fixed some mistakes and ended up with this: Overall, I am very happy with how this came out. If I was making some changes I would include more graphs and bar charts next time but other than that I think the way I have presented the information works well with the illustrations and the […]
1 on 1 Critique: This week we had a 1 on 1 with paul where we discussed how we were getting on. I showed him my app design and he pointed out some spacing he would change and then we talked about what I was doing my infographics on and how it was going. At this point, I didn’t have anything much to show.
IWeek 10 Tasks: This week’s task was to just continue working on my infographic. When I began to work on my infographics and looked at some research I didn’t have any ideas for the infographic so I decided to change to ships on the sea/ plastic in the sea so I did a load of sketches before continuing. Following this, I started to look at some facts in this general area and found lots of websites. Websites and Info: https://www.nrdc.org/stories/water-pollution-everything-you-need-know Eighty percent of ocean pollution (also called marine pollution) originates on land—whether along the coast or far inland. Contaminants such as chemicals, nutrients, and heavy metals are carried from farms, factories, and cities by streams and rivers into our bays and estuaries; from there they travel out to sea. Meanwhile, marine debris—particularly plastic—is blown in by the wind or washed in via storm drains and sewers. Our seas are also sometimes spoiled by oil spills and leaks—big and small—and are consistently soaking up carbon pollution from the air. The ocean absorbs as much as a quarter of man-made carbon emissions. Nonpoint source pollution is contamination derived from diffuse sources. These may include agricultural or stormwater runoff or debris blown into waterways from land. Nonpoint source pollution is the leading […]
The Art of Information: What we covered: The Art of Information Big Data Small Talks Hand In & Group Critique This week we looked at how designers can abstractly use information and data to create beautiful works of art and eyecatching ways of displaying them. Paul showed us a lot of live installations by artists that visually represent data or update to show data as time changes. This is something I’ve seen in a couple of galleries with audio changing depending on where people are walking or how they stand along with visual representations. Another one of the favorites that I saw was a project by Robin Price where he initially created a led ping pong table that eventually he adapted to display information on everyone whos played on it using shapes, sound, and the lights. We then looked at “Big Data” a phrase used to describe the large amounts of data used by companies to track their productivity and their customer’s needs. Websites such as Netflix use this to pick out movies that you’d like or google who uses It to tailor ads for your personality. We then looked at a couple of designers who took and manipulated this […]
This week we weren’t set anything specific to do over easter so I decided that I would finish my App Design and begin collating information for my Infographics. App: I took my now polished app wireframes and the illustrations I had just created and put them together. Result: Infographic: I have 2 books That I spent some time over easter taking information out of and digitalizing. I have quite a few spreadsheets made by coaches that haven’t yet gotten but hope to add to my excel file. I found this part suuuuuper interesting as I never thought id see how much I’ve done over the past two years even though covid had hindered this.
Manufactured Fictions: Today’s lecture was very different and not like our other lectures. I really liked it and the theme behind it, it was about the new Instagram age and how times are changing in the online world, how people are using computers and software to build these fake robots like people or AI and can become someone else. A lot of this lecture was about how easily manipulatable the online world Is and how increasingly difficult it is becoming for people to decipher what is real and what is not. I think this has a huge part to play in the current culture and news.
Master-Apprentice bar charts: I found this weeks task a lot easier than last weeks but I cant tell if that’s because I’ve been spending more time on illustrator than before. Original: Mine: Research: Do’s And Donts of Infographics: DO’s Do your research. It may seem like an obvious step, but far too many brands don’t take the time to do thorough research. Focus on finding relevant statistics that shed light on your topic and help build a complete narrative. Remember to use reliable sources, cite accordingly, and avoid outdated findings. As a best practice, any fact more than one-year-old is outdated. The last thing you want to do is dampen your brand’s reputation by misinterpreting or presenting outdated, incorrect information. Do focus on content. It’s easy to get caught up on aesthetics and details, but remember content is king. Infographics became popular because they are a visually appealing way to present data and tell a story. Build a complete narrative that includes a beginning, middle, and end. Provide context for the viewer, present insightful findings, and close with a position, solution, or prediction of the future. Even if an infographic is beautifully designed, poor storytelling and copywriting will lose audience attention. If the content […]
Designing Infographics: This week we looked at designing infographics through: The Death of Words Rise of the Infographic What makes a good infographic? Steps to the Infographic level of amazing… This week we started looking at how the world is changing from using words to images and how vital images are to our intake of information especially since the birth and rise of social media websites such as Facebook and Instagram. “Illustration can help showcase and bring things to life, but there’s a fine line between [this and] it becoming distracting. It should be more of a supporting than a leading role. If the designer isn’t careful, what he’s designing can become purely an illustration, rather than an infographic. You want the illustration to support the story that the data is telling, rather than detract from it.” —Robin Richards Paul showed us a 14 step guide to making an infographic that I thought was quite useful.
Tasks: This Weeks task was a master-apprentice of some pie charts: Mine: Master: Mine: Research: Nicholas Felton Nicholas Felton is a designer/artist whose work focuses on translating quotidian data into meaningful objects and experiences. He has completed a series of annual self-tracking reports detailing the events of a year which became part of the ideology behind Facebook’s timeline which Felton was one of the lead designers on. I think this displays the incredible scope and applications of data visualization and how it can lead to a great variety of career opportunities. While working with Facebook Felton changed the structure of the timeline to showcase an entire life resulting in redesigned elements such as the addition of cover photos and styling attributes like typography and map styling. This had a massive impact on the functionality of Facebook leading to the social media platform still in use today. I also love his annual reports that he publishes. I think I’m going to do an infographic similar to these however make it about my training I do for sport as I have a huge log of all my information day by day for the past 4/5 years. Giorgia Lupi I really love […]
Visualizing Data This week we kicked off with the second and final set of content for the module, exploring visualizing data. We introduced infographics, exploring how – in an attention-deficit culture – we need to condense information down into easy-to-parse visuals. We explored how infographics have evolved, particularly highlighting the fact that – in fact – infographics have been in use. Data’s All Around Us Lies, Damned Lies and Statistics Research Inspiration Your tasks… Data Around Us: “The commonality between science and art is in trying to see profoundly – to develop strategies of seeing and showing.” —Edward Tufte Diagrams: Visualizations: Data’s Everywhere • Bus Timetables • Company Forecasts, Profit and Loss • Election Results • Sales Figures • Weather Reports
Week 6 was Group critique where we looked at everyone’s work and gave feedback on miro, paul later sent us any notes on our work. I really enjoyed Matthew Grissams work and his use of color and illustration. I was very happy with the feedback on my work some of the constructive feedback was that I should match the google button color to that of mars but this color was picked as its Google’s main color. Another was about adding stars to the background and I had thought about this but I didn’t like how it looked in the illustration so I decided I wouldn’t add it to the rest of the app.
This week’s task was to complete some of my app designs for the week 6 critique. I continued to look at some app designs and create some more wireframes. Research I really enjoy the simple curves on the panels and the drop shadow on the cards. I thought looking at how some other apps handled payments would be interesting. I’m more of a fan of the first app shown as I think it handles the payment type better however I’m not a fan of the card-like design. I’ve never found this too intuitive. Wireframes: App Design: This week I just Illustrated the remaining illustrations for the app, I already had an idea of what I needed from my new wireframes.
Trying it all Together: We started off by looking at some App designs and the use of color and icons within them. I took some screenshots of some of my favorites. These are mainly due to the great colors. We then looked at good design practices such as contrast icon size button size and spacing to allow for the thump size and reach. We then had a look at color schemes and color standards such as monochromatic, analog, complimentary, and custom. All these have different outcomes and work well in different scenarios. We then looked at the impact of contrast, why it’s so important. A good website for this is: contrast-ratio.com Contrast ratio: Small text – 4.5:1 Large text – 3:1 von Restorff Effect When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
Checklist: Things to have done for week 5 Icons Created Consider UI From Your Wireframes create 3 visual mock-ups/prototypes From this list, all I have to work on is creating mockups from my wireframes: Using these paper wireframes I’m going to take the first three designs and take them into Figma. To start I collected the icons I made for my planets. I then put these into my designs and used the color scheme I picked and matched to logos. The main thought behind the colors was my dislike of the use of black due to the harshness that doesn’t match the logo design. therefore I have decided to use dark navy and grays commonly found in dark modes on apps such as youtube and chrome. I created these two but after I made them I realized I was using the wrong dimensions for an iPhone. Along with this, we had a group critique and I got some great feedback on my designs, so I took any advice on spacing and sizing and made these changes as I took them into my new dimensions. To create some of the iPhone features such as the time battery and bottom bar I […]
Illustration in UI Today we looked at illustration in UI why it’s useful how to make them effective and where I can and should be used. We also looked at examples from designers and illustrators on how they incorporate their illustrations into their UI to help display information. The illustration is there to clarify information to make clear by giving or by serving as an example or instance, to provide visual features intended to explain or decorate, and to show clearly what is being written about. In the example below the use of illustration clearly conveys the difference in the selected time making the app easier for people to understand. Tips for sketching: Sketching is not about being a good artist, but about being a good thinker. 1. Use a thicker pen 2. Draw straight lines 3. Be thoughtful about color 4. Make your sketches comprehensible 5. Use the right gear 6. Time yourself Illustration in UI should be Meaningful, Recognisable, Preferably straightforward, unambiguous, and Clarifying. However, it should also be attractive harmonic and relative to the rest of the app design. Mascots and characters can be a good way of introducing illustrations into UI that allows the user to […]
Getting Iconic Today we looked at: Icon Design Inspiration Master-Apprentice We looked at the history of icons and the development of specific icon sets such as the development progression and evolution of the icons created for the Olympics and how they changed over the years to reflect the state of design. We looked at a quote from a designer and paul discussed how you can create icons and design from this other than just paper and computer graphics and that they can originate and stem from things such as origami and needlepoint. “Bitmap graphics are like mosaics and needlepoint and other pseudo-digital art forms, all of which I had practiced before going to Apple,” —Susan Kare We looked at the use of icons on current apps websites and designs and the simplicity of the logos that allows them to convey their purpose and meaning, for example, the apple product logos that are very similar but contain recognizable differences. We then looked at how we can keep consistency in our logos with a couple of things: Level of detail Scale Detail Style Harmony Designers: We then looked at some Designers like Vic Bell And how she designed logos for brand such […]
A Picture is Worth We started by taking a look at the introduction to the module with image communication, logos icons, and much more. Paul showed us some illustrations which I personally loved. I’ve followed a lot of digital artists on Instagram for a while now and have dabbled in it as well, although never producing something I’ve been super happy with. We had a quick overview of some of the previous travel apps previous years had designed and in all honesty, I wasn’t super impressed. when I think of app wireframing I always think of clean icons and a professional approach with solid consistency. However, when it came to the infographics I was very impressed. I had always wanted to create one and had even tried to create one for a school project but I always had difficulty using the software to create one. We then moved onto the main topic of the presentation “A Picture is Worth” where we covered multiple areas: Narrative: Similarly, when we combine images we can tell a story. Juxtaposition: When we juxtapose images, we can make new stories possible. A Career? I found this quite interesting and something that could definitely be expanded […]
Task 1: Mind Map Creating a quick mind map for my project: Taking it into Miro: Task 2: Paper Wireframes Before I began to design some wireframes for my own app I had to decide with the travel app idea I was going to go with I ended up picking space travel as although not realistic I thought it would be quite funny. Following this, I looked up more travel app designs and drew a wireframe for them so I could see if there was a pattern. These are from three popular apps. 1. Garmin watch app, 2. GoPro Video App, 3. Track and Trace NI Above are 3 wireframes from random online travel apps. A couple of things I took from these were: The amount of empty space large visible buttons clean color palette filleted corners nice consistent grid system limited text recognizable logos and icons These are some of my designs:
TASK 1: Recreating Icons The first task given to us was to recreate some travel icons that paul had supplied us with: So I took them into Figma and recreated 4 of my favorites from the red and purple icons. I really enjoyed doing this task and thought it would be more complicated to do however it was a lot easier to do than expected TASK 2: Mind Map I created a mind map of my ideas for the kind of travel app I wanted to create. I just thought of three different ideas and the possibilities around them. TASK 3: Look at other apps I looked up a couple of designs used for apps and this one caught my eye: This is a Traveling App designed by Cal Esatama I really like the simplicity of this design and the colors used in the illustrations. Personally, I think the illustrations are what make this app beautiful along with the nice paneled display. I think the color scheme on this app works amazingly along with the simplistic illustrations the blend […]