Media Blog, VCD102

VCD102 Blog Post Week 13

Have I met my rationale goals?

My rationale states that it will “encourage children to be invested in mythical animals and encourage creativity“. At the moment, it is lacking in creativity as it is on a solid grid formation and is a simple point and click to get to your destination. There’s no exciting interactivity or spectacle for kids to ‘latch’ on to. I would need to create more interesting pages for kids.

Do I need to improve some points of my rationale?

However, I also note in the rationale that “I want to make people feel grounded and organised- much like a museum.“. This also ties in with the grid formation, and the museum is organised well enough for people of all ages to scroll through. I can easily access different sections of the website because of its simplicity.

Issues of usability and structure/ concept

My issue of is now is to have the site simple enough to use but also attract kids that may be using it to want to go to the museum. The concepts can clash together, but they can be made to work by only making certain pages have eye-catching features, like a screen-wide image of one of the exhibits to introduce it, instead of just text and details.

What did I underdevelop?

I underdeveloped the actual site structure, and the theme of the site itself seems messy, so it needs refinement in terms of layout and adding/altering colours in it. I didn’t put much thought into the headings for the website, and some terms might seem different from what is expected of those pages. I also wasn’t very good at coming up with variations of layouts for both the mobile and website design, and I needed to create more sketches to flesh out the idea better.

My website layout

What did I do well?

For my Major Project, I was very happy about the concept, and I had a clear idea of how the physical location looked in my mind. In the design process, I was happy that I used a grid structure for my website, as it fits the theme of museums, as every museum I had referenced has had simple navigation and accessibility to find when that person needs. Unlike other types of websites promising to sell a grand experience or event, museums are relatively structured and organised more factually.

The logo has been one of my favourites that I have created. I created two logos- A full version showcasing heraldry, and a simple version for websites, and they complement each other well, and are distinctive.

What I didn’t do well

My tutor wasn’t impressed by the way that I drew the wireframe, which is the borders around the website and images to give it a drawn and drafted look. The templates and frames were all made in Autodesk Sketchbook, when it was recommended to be made in Illustrator or another Adobe program.

The templates in Autodesk Sketchbook

It is also a hassle to go back and forth between programs to resize or redo something if it goes wrong. It’s also hard to place when resizing the page, as everything underneath it, like text and colour effects, have to be moved according to the size of the wire frame.

VCD102

VCD Blog Post Week 11

It is now Week 11, and I have physically started working on the project in Adobe XD, as well as finalised designs for my logo and concepts.

First, here is my new and completed logo.

Completed ‘full’ logo design

This is the logo that is used on the landing page, and is a ‘full’ logo to represent things where detail is needed. It is a departure from the dragons that I was planning to do and use, but my teacher commented that the unicorn inspires magic and is a popular mythological character. It also may be softer on the eyes for families wanted to go to the museum.

I created a second, simpler logo, that functions as an icon on all the webpages and is a shorthand for the longer logo, as the two designs are intertwined.

Simpler logo used for navigation on the site, as it is easier to read

I decided to include both versions as it would give a sense of medieval heraldry to the complicated design, and the simpler one would reflect modern day tastes and be easier to read.

Onto the site architecture, I debated about drawing the site design by drawing it on my digital drawing program- Autodesk Sketchbook. This was a way to make it stand out from the others. At the start, it was hard figuring out how to export, import and figuring out size dimensions to use to transport it. I figured out that I had to export my sketchbook file by having a transparent background and putting it into a PNG – not a JPEG. I scaled my canvas in Sketchbook to be the same size as the Web setting in XD – 1920 x 1080 px, so didn’t have to scale them andĀ could just import it into XD.

Example of how I imported the slides and how they fit in with the overall scheme

I also had fears about the layout and design of the piece, and when you’re doing illustrations for the website, it gets stressful trying to predict what I should change and if they fit together. I made some ‘template’ layers in Sketchbook, and that included the underline for the titles of the pages, and the square heading with the navigation. I also decided to do a grid format, for ease of navigation and drawing illustrations. This means that when I add more illustrations for the site, I can easily export it in.

Screenshot- Example of my workspace in Sketchbook and layers used on the right.

After watching other people’s presentations on their topics and how they executed their moodboard and site map, I have been re-invigorated to make better ones. I also saw that didn’t follow the “Rationale” Template properly, so I will be redoing that as well. I haven’t personally gotten any feedback for my project yet.

I have yet to test the system, and I still feel very unfamiliar with Adobe XD and transitions that you can do, so I will have to get more comfortable with those and then add it on when my site design is finished. I consider the Adobe XD functions useful, but the transitions and movements are not at the forefront of my mind. The user must first be familiar with the UI and not be put off by awkward or unnecessary transitions, so it is better to have a solid UX foundation. You should never miss the forest for the trees, or put the icing before the cake. With fancy transitions but bad overall site design, there is nothing to salvage. At the end of the day, my goal is to create a solid site that users will feel comfortable navigating around and find info easily.

VCD102

VCD102 Week 9

My ideas for the site started off with mind maps of things that I liked, such as Japanese festival style, animals, mythology etc. I love the concept of Japanese festivals, the way they are presented in media, and the dresses (called a Yukata) that they wear. But after consideration, I discarded that idea, and arrived to animals. I liked animals, and I thought spicing it up with mythology would be a good alternative than just normal animals, since this was a project for a website only. After circling through all of the options available, like festivals and shows, I decided on a Museum theme for my website. So my website would be a Mythological Animal Museum.

After I finished the mind mapping, I drew a physical representation of the place to help me envision the website. I drew several colour versions of the site before I settled on a design that fit the concept for me. It is a building that looks slightly menacing, but also grand at the same time, and that is the feeling for the concept that I am going for. I tried several different colour schemes, but different shades of brown worked the best.

I may do sketches of the interior further down the track, but I have a photo collection moodboard for that now that represents it. The interior is mostly wood, filled with warm colours to give off a warm and welcoming atmosphere. after completing the moodboard, I then set to work trying to do a site map, and organised all the functions that a museum would have, such as a research explanation page, collections showing at the museum, exhibitions that are on and what special events they would have on now. I had several museum websites for inspiration, such as the Smithsonian Museums, Australian Museum and Natural History Museum (UK).

I also noted that there were varying logos for the museums, such as the Smithsonian’s Yellow Sun on a Cyan Blue circle background or the Natural History Museums logo, which is just an uppercase ‘N’. I used these Websites as references for creating my logo for my own museum, as well as others, such as the font of the Monster Hunter series. I tried many variations on the logo and still haven’t settled on one yet. The teacher also saw my logo that I made and asked me to create as many variations as possible. I also gained inspiration for logos from the video lectures in week 9.

The site map was tricky to figure out, because I had to sort all of the segments of a museum and see if they would fit under a certain navigation field. I also had to limit the number of site map headings, as they were getting too convoluted. I had to narrow the categories down to save time and effort when I’m doing the actual pages.

Site Map
Media Blog, VCD102

VCD 102 Blog Post Week 6 – Reflection on the infographic project

Now with the first infographic project done and out of the way, there is time to think about this next bigger project for the second half of the semester, and how I can properly prepare for it.

First I will talk about the evidence I have that sketching is a very good thing for your project and now it can save you time, not waste it in the end.

People might think that sketching your idea over and over with some variations is kind of useless, but it is not. Exploring your options while seeing what sticks is a valuable way to progress through your designs. To fit the pieces of the puzzle together, you have to see what fits properly with the concept. The idea doesn’t exist unless it is recorded in some form, the simplest being a pencil and paper sketch. Any less than that, and your idea is liable to float away in the wind, never to be seen again.

The book by Catharine Slade-Brooking

As the book Creating a Brand Identity– by Catharine Slade-Brooking describes-

“Embrace pen, paper, and pencil and watch how fast the ideas come. The experience of this , when concepts seem to pour out of you, is sometimes known as ‘being in the flow”

This is almost impossible when you are doing this in Photoshop, Illustrator etc, due to the fiddly technical nature of the process, and pen and paper let you draw what you want.

Brooking also states that- “The first idea is rarely the strongest, and that we must develop the idea a lot further and draw more sketches. It is a vital first stage in the creative process.”

From these tips, you can see there is never any such thing as ‘too much sketching’ for an idea, and having more sketches increases the likelihood of a solid idea, and you get more of a grasp of the concept you are leaning towards.

For my previous infographic project, I did a grand total of 2 sketches. 2! That’s pitiful! I only did 2 sketches due to  already being happy with my first idea. But that was a mistake because I dug myself in a hole for the prototyping stage and having no idea what to change since I was already dead set on an idea, and I couldn’t suddenly pivot around and start from the ground up again 5 weeks into a 6 week project.

It worked out in the end since I liked my original idea, but I would have been free of stress and ‘what ifs’ if I had properly  sat down and sketched all of my ideas and possible layouts for the project.

This also ties into the fact that I just personally don’t like following strict methods and steps of doing things, since I felt that it could limit creativity. However, doing a step by step process ensures that you don’t get lost in that creativity, and achieve the desired goal of completing the project to a high standard. These steps are ‘safeguards’ to make sure you accurately check every box off your list.

VCD102

Prototyping in VCD102

Now the idea was set and I was ready to make it. I proceeded to remake the sketches that I had on paper in Illustrator, and it turned out good. At first when prototyping, I had no idea of what kind of data sets to put in, but by using some of them I figured out that a column graph and a pie graph were the best choices to visualise the data.

My first iteration of my project

At first I had a very barebones design going in due to lack of data, so I decided to input all of the data first and then arrange it in a pleasing way. One of the first things that stuck through every design was the colour scheme. I did try other colour schemes in the process, but none were a match for blue/orange, because using the blue for the sky was too good to take away, and the orange was a fantastic representative for the ground.

Second iteration – inserted the blue sky and highlights

The forward facing plane that I also initially put in didn’t move much either. I tried other designs for the plane, including a more dynamic 3/4ths perspective, which was cool. But then I had to move all of the data around and I found that it didn’t flow quite as nicely as I expected. I was still very set on my original design, and never really changed it due to the fact that I just did not like any alterations that I made. Sometimes you can only improve in prototyping, and sometimes results aren’t quite what you are expecting. But I am also hesitant to make alterations if I feel that the current design works well, so I might still have an issue of not pushing the designs far enough to work or click. My tutor offered to help, and her alterations made me realise that there was in fact, a lot more to possibly change in the design. I took some of the changes she made in her small prototype design change for me, such as hierarchy and making the title text bigger, as well as changing some fonts to be a bit more stronger.

Alternative 3/4ths view and different composition

At the end of the day, I had two prototypes to choose from, the 3/4ths angle, and the original forward facing one. I picked the forward facing one as I thought it was a good composition and appealed to me more. Even in all of the stages of prototyping, i never felt the need to made hugely dramatic changes. I still don’t know if that is my downfall or not, but I am proud of the design I made regardless. The one place that I struggled with when making this piece was the typography. I wasn’t sure if I should use bold font, italic font, or just leave it as it is. Should I make the font larger or smaller? I settled on two font styles, but I still can’t help wonder if they were the appropriate choices for the text that I laid out.

Final design for the forward facing one. Added a lot more cosmetic changes
and put in a new plane with sharper edges.

I am generally happy with my design, but also feel that something is missing in the prototyping stage, and hopefully I’ll find that missing thing and improve on it for my next project this semester.

VCD102

Idealising and Researching for my infographic

Its the first assessment task of the semester, and projects are starting. For VCD102, we are starting our data visualisation task. This involves defining and researching the product, according to the 7 Step Model by Ambrose and Harris.

When I first started the project, I had an idea in my head for an entertainment related concept. I tried finding out more information, but resources and data proved to be limited, and I had to scrap it and move on to other things.

Digital sketches of scrapped ideas I had for the Infographic

On a whim, I decided that I liked animals, and there were an abundance of resources that focused on animal data, so I would have plenty to choose from. I found a site for bird data, and I could search based on region and state. This was the perfect idea for a project, listing birds for the region of the Illawarra and comparing them to other statistics. However, I ran into a problem. I had originally wanted to list the top 10 most common birds in the Illawarra, and the top 10 rarest birds, but all of the rarest birds returned a sighting of 1, making them all equally rare, and a very boring data choice. I also thought the subject matter was a bit lacking, and I needed to find more stimulating statistics.

I then stumbled upon bird strikes, and I found a whole data sheet in Excel from the Australian Transportation Safety Board (ATSB) that provided me with more than enough information to use in an infographic. It had information on where and how many birds were struck by bird strikes. It also listed some ground animals that were struck by bird strikes. I now had a pretty good vision of how the data sets could be used, and how I would visualise it into an infographic.

A VERY fast sketch of my idea before I did any Illustrator work

The Wikipedia page and other subsequent resources were also a great help for more information on bird strikes to build a story, they had a lot of information on what they use to deter the birds, and during what seasons they’re active.

With help for the infographic, I looked up bird infographic (who would have thought?), and while most were a bit unhelpful, I did find an appealing colour scheme to work with (Also used in every movie poster ever!) and the iconic blue/orange combo still works.

How I decided what my colour scheme was going to be

I visualised a plane in the middle of the infographic, and putting data around or under it. I did this because I wanted to loosely imitate flight instruments in the cockpit that pilots use, such as an attitude indicator (also known as an artificial horizon), an instrument that tells your elevation and spatial relationship to the sky/ground.

An attitude indicator, a loose inspiration for my infographic

Research and defining the project went hand it hand. I could only define the project because I researched information for data sets and visual information, and with the knowledge that I was armed with, I could proceed to make prototypes!