Week 6: Web Design - The Colour Schemes

As the designated designer for the group, it is obviously my responsibility to give others the templates for how we will design our application. Of course, my only responsibility is not to just design things but I will be trying to help with the javascript and code alongside the coders.

However I have thought up of some colour palettes that go with earthy tones but also quite child-like so bright colours and maybe even pastels. Although pastels are more suited to babies so revision may be needed there. But of course, a bright rainbow page is not wanted. 

I rather like this colour representation however I do not favour the pink tone and then the straight black. I feel that it will not be an 'accessible' and easy for those with disabilities if we were to have a strong contrasting black on light tones. Another concern could be with the green colour where those with colour blindness (specifically Deuteranomaly, which affects 5% of men and 0.4% of women, the most common type of colour blindness) would have difficulty. Of course, we can keep the colour but have it change for the colour blindness option. 

Again I am not sure about having a strong level of contrast, unless if perhaps the pins or a title text is the dark colours. The green could also be bad for those with colour blindness. I really like the browns, they look quite earthy however I don't want to have a palette that is monochrome but more complementary coloured. 

This palette is more sea-like and has the nice brown hue, I really like this however maybe a bit too much blue and the white and dark navy colours are also a bit risky. I don't want high contrasting objects. Of course, we could use those colours for other things such as shadows or colours for an active button, etc. 

I really like this palette however it may be a bit dark. I like the different hues from yellow-orange to green-blue. I am trying to stay clear from any red hues due to the colour blindness concerns. I do feel that the aqua needs to be a bit more green in hue, and then I would agree to use these as the main colours for the application. 

At the end of the day though, choosing colours won't take too long and I can also edit the colours as I go. I think the first thing that I really need to do is to start on the html and css of the application. Then I can test these colours out!

Week 5: Logo Design

As a part of my contribution to the group and the process of the application development. I have designed a logo for our team with the name HISPLORE as our site name. Originally I thought of using a compass styled logo with a timeline, as that is the main idea of HISPLORE.

Research:
I have been researching many different types of compasses such as these:


Sketches:
Although I did not make many sketches due to time, I did make some in my book which gave me some inspiration also.

Results:
The First Edit:

This was the first edit, the shape was made in Adobe Illustrator and then the 3D text was done on Adobe Photoshop. Honestly most people thought it looked like a sun and the group commented back that perhaps I should try to make it look more like a compass. I decided that perhaps I could add an "inbetween part" ie. NE, SE, NW, SW. Adding those lines and perhaps making the NESW axis larger and extend out of the circle. However beforehand I did have some hands for the NESW axis but I lost the copy of it :(. But trust me you should have seen it, it was horrible. I went for a more simple design. I understand that when it comes to logo design sometimes gradients for colours are not the smartest idea as it makes it less versatile to use for different platforms ie. the web, merchandise. I also put a little bubble part on the top by choosing a pure white and just fading it by playing with the transparency - this then blends it with the colours underneath. Not so hard to do :). Honestly the HISPLORE text reminds me of RuneScape (please don't judge that was my 12 year old days) but it truly does especially when you can easily see the pixels. Anyway, I exported the file for web so of course it is in a gif file with 256 colours, perfect for fast load up!

DISCLAIMER: I did a Cert III in Multimedia Design and my teacher was amazing, I learnt so much and easily. Plus I like to talk so sometimes I ramble :3.

The Second Edit:

As you can see this is the result from my last reflection on the first (kind of) edit. I will note that I did not put the NESW axis out enough - honestly I thought I did. Rookie Error, how... embarrassing. Anyways I did put the "NE, SE, NW, SW" axis in closer to the middle to create the effect. I decided against the HISPLORE 3D text as it removed most of the versatility of the logo design. 

Week 5: Concept Document, Pitch and Poster

As it is universally known in the world of DECO1800, my group and I have a concept document due today (Monday 22 Aug. ) at 5pm. Of course I am slightly nervous as I hope we wrote our document the right way.

The Concept Document:
Sometimes I would try to structure the entire thing so that everything linked together and each paragraph had an introducing and concluding statement and ensured we kept to third person however sometimes that would change and it would be frustrating for me. It is not easy to come up with a concluding statement that sounds like the introducing statement but also links to the next paragraph. I guess it is because from year 11 to year 12 I had an extremely strict english teacher. Yeah, those years were hard. However I spoke to my team about it and it seems like they took that on board appropriately and I am happy with their response :).

The Poster and Pitch:
What I plan to contribute: 
For the poster, I have already contributed to do the logo, so that part is done and I was going to also to the poster. The pitch was pretty much done on our last contact we just have to change some parts and that will be done. I will print out palm cards for everyone to enhance our PROFESSIONALITY. I love being professional, sometimes it makes you feel so bad ass. Like a part of the FBI or CSI.
_________________________________________________________________________________
UPDATE (Tues 24 Aug. 2016)
I have finally completed the poster. I have run into some problems however: 1. The resolution was actually lower than I thought so I will try and test to see how it prints as A3 but I am not convinced. I will try to remake it to a larger size. Luckily that wont be too much of an issue. However this is what it looks like so far:

 Our team seemed to like it as it was easy to read, minimal text and straight to the point. Of course not all parts are in there but the most important are included. I also added some text underneath the first point "Search for anything" some brief statements such as what our concept is, who it targets and its interaction methods. I believe that I should add in parts inclusive of the account login as "save your findings" is also there and that would be quite confusing for anyone. The images I used where okay I wish I could have had better templates but I guess with the free time I have, it isn't that easy to organise. However the imagery helps :). I was worried about if the text on the top part would be easily readable... I added some blending options such as bevel and emboss, a navy stroke and dark blue inner shadow. However I think I should put the top imagery on the bottom. I feel that it would be better that way.

Fixes:

1. Include account login page
2. Change the top image to the bottom
3. Increase size/resolution for A3 (29.7cm x 41cm)

_________________________________________________________________________________
UPDATE (Wed 25 Aug. 2016)
In reference to the problems that I had in the last poster file. I decided to restart as the low quality image would not look impressive for a display. I decided to make sure everything on the poster was well ordered, coloured and that the font would portray our target audience easily in comparison.

I like the poster in comparison as the background has more recognition, meaning it looks like a satellite image. I feel that it portrays the message better by the use of colours and imagery. The logo's colour has been changed. I am not so sure about the colour - perhaps I can try to change the tones a bit more. The fonts and colours are chosen to make the poster look colourful and child-like, trying to portray the audience.

Old Schoolhouse Magazine (2010) Mathletics [online] Retrieved from: http://sunrisetosunsethomeschool.com/2009/12/16/mathletics/ Accessed on [25 Aug. 2016]

Referring to the image above of an old game I used to play to practice my maths on, "Mathletics". Looking at the old schema the design has lots of contrasting colours, some complementary schemes also (ie. purple and yellow). The shapes are all rounded, not sharp. The graphics are slightly bevelled to give a 3-Dimensional look. The font is simple and easy to read - which is why I chose Century Gothic as my main text font. Arial is used for the placeholder text and Goudy Scout is used for the titles. Of course the mixture is odd and a bit of a design risk, however I see it as an interesting mix and quite a success.

Overall I am happy with my outcome and I hope this poster will rock my group's pitch this Friday! (27 Aug. 2016).

Week 4: Wireframe Construction for Concept Document

As a part of my contribution towards my group and our application process, I went absolutely crazy and mapped out the entire site in wireframes. These wireframes were created through the storyboards made the contact session we had this week (Friday 19th Aug.).



Wireframes: [created by Gabrielle Burey 43915316]

Wireframe: Login Page [1]

The login page will be accessed on the first page of the user's journey through HISPLORE (HISPLORE is the official name of our project). The page will ask for a username and password, new users are able to click on the "I Don't Have an Account" button where they are able to create a new account as shown below in wireframe 2. The information and options buttons are easily and universally accessible throughout the whole application. 

Wireframe: Create an Account Page [2]

The create an account page will simply ask the user for a username and password. For form checking and prevention of human error, the password chosen by the user is to be written again. After an account is made, the user will be redirected to the login page as shown in wireframe 1. The information and options buttons are easily and universally accessible throughout the whole application. 

Wireframe: TimeMap Main Page [3]

This page inhibits the main part of the application, the TimeMap (a combination of two interactive tools: a timeline and map provided by Google Maps API). A search bar will be provided universally throughout the application page (apart from the login page and create an account page - wireframes 1 and 2). A button to the user's account will be provided on the top left hand corner, this will direct the user to wireframe 7. Filters will be provided for the user to limit search entries to finding a more certain and direct collection of documents they are looking for. The filter includes: the category (ie. Books, Diaries, Articles, People, Photos, etc.) and the year range (some documents on Trove can go back a few centuries!). The information and options buttons are easily and universally accessible throughout the whole application. 

Wireframe: Pin Interaction [4]

When a user has searched for their query, a set of result will pop up as locational pins on the map (based on the latitude and longitude of the document) and also on the timeline (based on the document's date). This wireframe shows this interaction where simply the user will click on the pin and the document will come up allowing the user to see the results. 

Wireframe: Information Page [5]

The information page will provide the users a run-down version of the application with simple and coherent descriptions. The search bar, account button and option buttons are all available on this page. Clicking on the information button again will bring the user back to the original page. For more user understanding, the information button (when pressed/on the page) will change into a back button. 

Wireframe: Options Page [6]

The options page will allow the users to change the options where acessibility concerns come in. This means that the users can change the colours to suit their needs (to accommodate those who are colour blind) they can change the size of the text and also enable text-to-speech capability as provided by an external API. A "help me" button will be provided which will give the users descriptions of the options and so on. The options button will change into a back button to aid navigation. The search bar, information and account buttons are all easily seen. 

Wireframe: Account Page [7]

The account page will allow the user to see their pinned searches - a feature we have added to introduce more interactivity and enhance the application altogether as an educational tool. The same filters will be included as on the TimeMap wireframe 3. A back button is provided where the account button was. The search bar will be still made accessible throughout the site. The information and options buttons are easily and universally accessible throughout the whole application. 

Week 3: The Start

Week 4

Starting off the week, my team and I met an hour before contact to revise through our concepts and to finally choose one. I misunderstood, I initially thought we must all make concept cards for our 3-4 concepts but apparently not. Which is quite good as that means less work to do or think about. 

Brainstorming in my journal

In our contact, we were able to come up with a concept that meshed with all 3 concepts we came up with as they are more like features to the same thing: which is a timeline. We are headstrong on our timeline idea.

Our group all working together

What is the concept then?

We decided as a team to have a timeline that has multiple topics that the user can choose. With an interactive map and timeline, the user can click on images on the map and see more information on it. Right now it seems like a baby idea still but through constant meetings and discussion, we will be able to figure out the specifics in more detail. 

What did you do in Contact?

In contact we used a special technique called the "6 thinking hats" to help us decide which concept is the most appropriate.

What is 6 thinking hats?

You get 6 hats in the rainbow and greyscale spectrum (red, yellow, green, blue, black, white). Each hat is to represent a type of mindset that everyone in the group must have in their minds. 

1. Blue - Managing process - to do items
2. White - Facts and figures of concept
3. Red - Gut instinct and first impression
4. Black - Negatives
5. Yellow - Positives
6. Green - Generate new ideas or improvements on the concept

What to do next:

• Write up pitch
• Design poster
• Strengthen concept

ALL DUE NEXT WEEK!

Week 2: My TEAM!

So I went to my first contact last week on Friday (5th August) and through the lengthy process of deciding on a concept and a team, finally we have all come together to form T-REX INC.

The name is my favourite, because it says - we are big, strong and we may have small arms but we can get through it and be the top of the food chain!

T-REX INC. Name Files:

Name	Email	Position
Gabrielle Burey	b__ey_______@gmail.com	Designer
Jonas Wong	jonas@______.net	Team Leader
Breanna Larkin	bre______@gmail.com	Editor
Thuan Duc Chu	th______@gmail.com	Coder
Sang Ik Park	w_______@gmail.com	Database Administrator

NB: Information disclosed for privacy reasons

I am pretty excited about our team as we have already completed the team charter a week early (on Saturday 6th Aug) and I feel that working with them will be easy, efficient and stress-free :)

Our Concept Vision:

We were thinking of doing an interactive timeline with geo-location incorporated, so parts of the timeline will show on a map of the place it was situated. 

It would be hard work but right now it is only a concept and there are plenty other concepts we could go with that are just as fun to do. 

Tasks to do:

For this week, we have to start forming concepts and getting 3-4 concept cards done. I am sure we can do it. I am actually so excited I want to make a card now but I think I should talk to my team first, as we are all in this together. I am really excited and I want to do really well. 

Week 1: Major Project Brief Reflection

Major Project Background taken from http://deco1800.uqcloud.net (2/9/16)

"The National Library of Australia maintains a web-based portal, Trove (http://trove.nla.gov.au/), that hosts & links to content by and for Australians. The content available through Trove is wide-ranging and falls under many categories – books, newspaper articles, photographs, people, audio, maps etc. Trove acts as a “Google”, if you like, of content from it’s own digital archives and those of other Australian organisations – libraries, museums, research institutions etc. Trove is the portal to a vast array of content for a vast array of interests & purposes. The problem with this is that it becomes cumbersome to search and filter the resources available.

For this project, consider yourself to be a design & development consultancy that has been engaged by the National Library of Australia. The NLA are looking for proposals that highlight, reveal, focus the content available through Trove. They want something that goes beyond the simple search paradigm that they currently have and that sheds light on rarely visited corners of Trove. They are NOT asking for a new search interface but for dynamic interfaces that focus on highlighting, connecting & enriching areas of content in the archive. Concepts should consider the breadth & depth and occasional weirdness of the content returned through searching the archive.

Applications can be purposeful or playful, serious or silly, niche or general – the key is for it to be engaging, to invite the users to connect with & explore the archive content through your ideas."

The project background then continues to explain further the major project in detail including the three different parts. From my own understanding of reading the brief, I am to work with others to design a dynamic interface that offers an engaging way to view and search the information using the Trove website. I am not completely sure of any ideas as of yet, however I am sure that through further thought, there will be a lot that are appropriate to choose from.

Looking through past projects on the DECO1800 site, there are a few good ideas that offer further insight into the purpose of our designs. There is a site - History Chains - that is dedicated to every individual user's research projects into history where they can pin, comment and pin each part of data from Trove. It is an intelligent way to introduce research in a fun and easy way. One of my favourite adaptions of the information from Trove was a game similar to the 4 pics 1 word game app called Picture Perfect. The game is based on categories based on Australia such as historical figures, flora, fauna, etc. where the users must guess what the four pictures mean and submit their answers. Then they are able to see their scores after. I find that an example of a fun concept and can be engaging to many different age groups and help assist the learning of Australian culture (historical and environmental factors). 

I find it that these sites all represent the concept of 'Design' of which we discussed in our Week 2 lecture. Design can be many things, including:

• A creation that serves purpose and functionality
• Builds on ideas of others
• Affects different perspectives of the product being redesigned
• ie. redesigning a doorknob could result in instead redesigning its door, the house, the street, the community, etc. 

Of course, they are representative of the designing concept - even if it is a fact that is incredibly obvious it can be extremely helpful on how to approach the problem. The application doesn't have to be designing directly from the problem, it could also be built upon other ideas explored by past students. I have a feeling that there is a purpose of showing the past students examples, to help aid the others into understanding but also to encourage the idea of "building upon" these good ideas. Of course they don't mean to just add a small thing, more like continue with the main concept but change it. Similar to Dyson, where they invented a vacuum that used air instead of vacuum bags. 

Another question I ask about the brief is based also upon our 2nd weeks lecture. What is the problem? is it a tame or wicked problem? is it a creative or a problem more for engineering? What type of problem is it?

I feel that the brief is broadened to a sense so that many results can arise, similar to the project descriptions we encountered in DECO1100. It is not 'wicked' exactly as there are examples offered however it can be quite scary to first read-through. A case where it seems like a lot of work but you don't particularly know where to start. I believe it would be a creative problem as this is the sort of atmosphere carried through out the Multimedia Design degree but also because a disjointed process is promoted for the project. We could go through plenty of prototypes and plenty of ideas and go through the loop many times in order to finish off with one good idea, and even then the project may not even be completed yet. Any design can be built upon. 

Furthermore, through this reflection I feel as though the brief's details are clearer. My next move would not only to be coming up with ideas but also researching more of Trove first and the past work examples given. Thinking about the different ideas these people have came up with and whether or not these concepts could be built upon in a different, innovative way.