Category: VCD102

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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!