Week 13: Tradeshow Preparation - Posters and Business Cards

For the tradeshow it was required to have at least some marketing inclusive of posters and business cards and being the designated designer for the team I was responsible for making them!

Business card design front and back

The business cards were very simple, using the same design as the application and also introducting the logo of the team. It provided an (fake) email, the site address and the names of the members for further contact.

First poster

The first poster was designed to bring people in to test our product and give it a go! It gives a brief statement of what the application is about and an image of what it looks like.

Second poster that serves as application instructions

The second poster was used to show the users what to do and how to use the application through simple and brief steps. It also shows the features of the application.

Week 13: Final HTML Fixes (Design, Functionality)

Coming up to the tradeshow this Friday, my team and I have been fixing parts of the site's functionality and design throughout the process. However there were some concerns to look at and fix. For example:

The close button for the divs often disappeared when you were to scroll down for more of the information. So instead I tried to fix it by positioning it as fixed and putting it outside of the div with a nice design to it so it looked good.

The Information Div

Close-up of the close button

But it got quite annoying in regards to responsiveness. Most of the elements on the page are set to percentage so that they adjust to different screen dimensions. I did fix the button by using pixels however it did not clash well with the opened div as it would go over it and so on. Jonas suggest positioning it in the div itself however that doesnt work as well. Since the div is responsive, if the button was to be positioned inside it would not stay in the same position for different screens. Of course it is possible and  at that moment I was working on it until a tutor asked why it would be out of the div in the first place by I shot that idea down because otherwise you cannot fix it or at least if you did, it would cover up the text and that would look horrible. So he instead suggested using a div behind the modal div to act as the close button. Just have the settings as:

#close_div {
          position: fixed;
          width: 100%;
          height: 100%;
          display: none;
}

Then just set the javascript (jquery) as:

$(document).on("click","#info_btn",function(){
$("#info").show();
$("#close_div").show(); //show the div to close the info
return false;
}); 

//if you wanted to do the jquery for the close_div element, do this:

$(document).on("click","#close_div",function(){
$("#info").hide();
$("#close_div").hide(); //otherwise it will still be showing!
return false;
});

Normally I am not that good at jquery so this project really helped me learn and it is exciting to get it to work! 

_________________________________________________________________________________

Other html fixes to our site included the content of the information div. Basically just updating the parts that were actually not correct and looking at the grammar, etc. I also added an about the group part where we say our roles and what we did throughout the design process.

About Us

We are T-REX INC., a 5 person group who formed on the first day of contact sessions. We shared our vision together to create a timeline and geo-location scheme to visualise the data from Trove.

We all had our fair share of work, where Thuan, Park and Jonas handled most of the coding for the mapping of data. Gabrielle did most of the html and css designing of the pages and Breanna has helped a lot with the assistance in all areas including large amounts of research.

If you wish to submit some feedback or any enquiries, please email Gabrielle Burey on gabrielle.burey@uq.net.au.

Members: Jonas Wong, Park Sang Ik, Thaun Duc Chu, Gabrielle Burey and Breanna Larkin

I also fixed the copyright so it was inside the div rather than outside because then there would be occurrences where the copyright would float over the opened divs. As you can see below in the image on the bottom left corner.

Of course there will always be areas to fix, and if given a lot more time and possibly some more funding $$ ;), the website would become to be a beautiful masterpiece!

Week 12: Tradeshow Pitch, Final Document and Portfolio

So for my team I decided to get some work done for the trade show coming up. To be honest I do feel a bit fearful as I have not been able to do a lot of work on the project due to other assignments that I have that are taking up all my time.

Here is a demo of the pitch that I want to use for the trade show:

HISPLORE, an educational tool for researching historical people in Australia. Made for high school students, HISPLORE targets those from year 7 to year 10 by not only the content but also through the visual and functional design of the application.
From the group TREX Inc, HISPLORE has many features to offer including:

• Text-to-speech functions using a free-to-use api
• Visual designs that is not only aesthetically pleasing but compatible for those with colorblindness.
• An option to change the size of the font from three different sizes that still look beautiful
• An account system using a php database
• An interactive map and timeline using a google Api
• The ability to find historical people throughout the ages and see more about them
• And also, save your favourite people to your account where you can later view them for later projects.

HISPLORE uses trove - an online database of official papers recorded in Australia based on people, events, multimedia and other document sources dating back from the 1700s! By utilising the trove database on Australian people, we are able to display a visual of influential people throughout the history of Australia.
There is no other reason to believe that HISPLORE wouldn’t be an ultimate tool for your student’s education. Have any more questions? Come and talk to one of us about how HISPLORE works and the process behind the application!

I was thinking of going with an elevator pitch and by using a lot of persuasive language to show the audience that I and my team are both very confident in our application. I also wanted to briefly say what we are about and the features we offer almost like an infomercial by Danoz Direct.

Another part is to complete the final document and also my portfolio - I haven't been able to work on my portfolio much. But I did manage to change the visibility of some of the text and also the bug where if you click on the contact close button, it would also toggle the about div (although I will have  to change it from toggle because then whenever I click on contact then close it the about div will pop up).

Week 11: Digital Prototype

For our contact session this week we had to do our digital prototype and honestly a lot of issues have arrived. The notes from our session are as follows:

• Make the writing bigger
• The close button disappears! – make it fixed
• When you create an account it would take you to the map
• Change XXXX on timeline
• Fix the map on Australia
• Question: what are the markers? – make it obvious
• Make it clearer what hisplore is
• Get rid of italics
• Hard to read – make text bigger!!
• Not obvious what the purpose of the site is – has to do with people – historical people
• Get picture of the people
• Fix save search
• Fix div for people – the design
• Fix the width of the nav bar
• i dont have an account button is bugging out?
• update information on hisplore - jonas can you do that, i feel that you have a better idea than i?
• the loading gif at the bottom is confusing - re-position it
• error - 1900 (lots of markers?)
• for each name give a description of what the famous people are and what they are about
• balance of the map page is awkward (put checkboxes on the left)
• check boxes or click on map for zones? - click on map for zones as it is more interactive
• heading or description so you know what you are searching for
• make the timeline stand out more (change the design  white background with border radius)

Week 11: Personal Portfolio, HTML/CSS bug fixes

Personal Portfolio:

For my personal portfolio, I decided that I wanted to make it not only for the course but also for myself.  The type of content I wanted to display are:

• about me
• contact me
• DECO1800:
• About HISPLORE
• Design Contributions
• My Blog
• HISPLORE web page (for potential employers to view)
• DECO1400 (web design and implementation)
• Website report 
• Website made
• Digital Imaging (Photography and Photoshop):
• including commercial and fine art photography 
• button to flickr and tumblr
• a development timeline of photoshop skills and skills that I inhabit + examples and reflection
• Videography (video editing, etc.) + reflection

There are of course other types of content that I will include in the later future but I think for now - it would suit the assessment.  I think the most difficult part to provide for would be videography because even though I have edited multiple types of videos, some of them don't have copyright-free music hence I cannot put it on (as those videos were only for presentation within my family, for instance). But other than that I am quite proud of my portfolio so far:

index.html

To fix:

• for bigger browsers it is quite awkward - does give some space for other sections but just links is boring
• maybe also go with the leaf idea for buttons :)
• re-position the about me and contact links 
• the design of the page seems more organic - not straight and centered.... 

about me div

To fix:

• contact and close buttons - correct design they look quite plain
• make sure that images are not affected by sizing of browser

contact div

To fix:

• the close for contact only closes contact - maybe also make it close the about me div (js)
• fix the link for flickr
• maybe add more details, etc.
• fix div positioning so it is centered 

DECO1800.html

To fix:

• the links are too simple! maybe also images? with leaves! - scan images etc.
• fix background so you can't see binding - then the nav bar won't be affected by any sized browser

about hisplore div

To fix:

• h1 tag colour - why is it this colour?
• h2 tag sizing - titles are too small

design contributions html

digital imaging .html

To fix:

• the buttons seem a bit out of place with the design - leaf buttons? 
• just use photoshop and have them as a photo - when hovering change the image/swap the image. 

videography.html

To fix:

• center videos
• possibly add in more videos if possible
• squash that stress is a horrible video tho!
• add in more reflection!
• why did i choose the songs, what is wrong with the videos, critique them.
• borders are awkward
• positioning should be alike design contributions

I like my portfolio but if I want a good mark I am going to have to try harder. So I will try to fix the issues for each part and also add in the photos for digital imaging. Then I will post again with my critiques!

HTML/CSS Bug Fixes for HISPLORE:

• input for password not labelled as type = password in tag
• timeline set margin for left in px instead % so it doesn't go in the right position for different browsers
• correction of aligning map page:
• map position
• timeline position (and colour!)
• search form
• typography of search form

Week 10: New Colour Scheme

New Scheme

Original Scheme

So as we have had our Demo Pitch on the last contact session before break, I asked the tutors if the colour scheme (the one on the right) suited well with the website. In response they said it would be better to change it as in some cases it is hard to see and read the buttons and words on the page. So I changed it using coolors.cc website application and came up with a beautiful scheme. It looks amazing on the index page as below:

I am so happy that I asked the tutors for their feedback because now our site looks more 'put together' and goes with the idea of the water and land by using blue and green tones.

Never fear constructive criticism.

Week 10: HTML Pages, Info and Options Button Divs (Javascript)

This week has been hectic for coding. I have finally finished all of the html pages in regards to the design and some of the functionality. The css is looking beautiful and I have never been so proud.

index.html

Info div

The index page is all beautiful and complete! Of course there is some functionality needed. However I managed (by the help of the tutors and other javascript coders) to pop a div up when you click on the information and options buttons using javascript and css. Basically all you do is use an "on click" event and toggle the div so that each time you click on the button the div will toggle between being shown and hidden. I also made a close button which did the same thing so that the user can easily close the window without having to press again on the information/options button. This was to go with the accessibility guidelines :).

Of course we are needing extra functionality which is to add in error messages that also go with the accessibility guidelines.

error messages for login

Here I made notes for my teammates for later on. This will also need to be implemented on the create an account page with messages such as "This username already exists", "These passwords don't match" and "Please input a second password" etc.

Account Page

Here is the account page which gives a general idea of it however the saved searches, username and so on will need to be provided by the database and that is for my other team members Thaun and Park to do :).

Account Page fixes 

Next to the copyright free default account image, we are wanting to have the username of the user displayed, maybe a date on when they first joined and so on. And also their saved searches - if they have any.

Bootstrop Icons

Another fix to the account page was to change the "My Account" button to "Map" so that the user can easily just go back to the map. To improve accessibility standards, bootstrap icons were also used to help.

Map Page

This is the map page and I think it is the page that needs the most work. However it will be done by the other coders as they are the ones who are responsible for coding the trove api functionality, searching and so on.

Overall I am quite excited and thrilled because we go so much work done and we will be able to use this as our digital prototype which will be tested next contact session :).

Week 9: Design Workflow and Progress Report

For this week I busied myself with assisting Jonas with writing the Progress Report such as giving in points, editing and also creating some of the diagrams in the appendix. With the design workflow it shows the overall procedure of the design of the web application. This originally started from the original wireframes to the paper prototype where corrections were made and we went back a few steps to improve the functionality and design.

Then the colour scheme and the typography were created after and are to be corrected again once feedback is given in the demo proposal.

The next step is to continue with the html and css pages to get them completely done. The javascript and php have been completed thanks to Park, Thaun and Jonas.

Week 8: CSS and HTML Pages

For a part of my contribution I have been determined to help the others with coding the css and some of the html pages - including the login and create an account pages.

By creating the colour scheme and finally choosing the typography I was able to make a main template of the css of all of the pages. Mostly covering positions of the buttons, colours and typography.

with the buttons I have finished the positioning and made them circles from inspiration of this sample code:
http://jsfiddle.net/josedvq/Jyjjx/45/
Where you make them circles by just increasing the border-radius pixels. 

ie:
.help_buttons button {
       border-radius: 135px;
}


Another thing that I have learnt again (forgotten as I have not coded in css for a while) is that for the labels of the button you have to code them as label and not an a or link tag. It may sound quite idiotic for me to say that but I am mostly happy that I am learning. I mean, that is the point of uni after all.  

ZONES NOTES:

ZONES:

http://deco1800.uqcloud.net/other-resources/zone-information/#zone 

ssh s4391531@http://deco1800-504.zones.eait.uq.edu.au

then password

commands: 

ls - list

cd - change directories

/ - forward directory

double tab - gives all possible options

vim - for editing (might need to use)

• vim [name of file]
• does not put into ‘edit mode’, command based to insert press i hit escape once done editing, column ‘:’ then w to save q to quit. 

sudo - edit things on root (i was not given permission to do this but whatever...)

SCP - Secure CoPy

to use phpmyadmin: url - www.deco1800-406.uqcloud.net/phpmyadmin

------ NGINX SERVER ------

file server with php installed

nginx log - var/log/nginx/  to save don't use scp copy using SFTP

access - less access.log

To RESTART nginx

sudo svcadm restart nginx

If you messed up big time you can roll back: 

cp -a /var/www/.zfs/snapshot/[nameofsnapshotfile]/htdocs 

Enabling SQL

sudo svcadm enable sql

Enabling PHP

sudo svcadm enable php-fpm

Putty (for windows) 

free download, use top .exe link (you can download the installer but it isn't necessary) 

Prac tutor Dion is on slack for communication

Week 7: Paper Prototype and Design Wireframes

As a part of my contribution towards my group, I created the paper prototype for the demo of our concept. Testing it on my friend, I tried as hard as I could to address all functionality options of the application inclusive of error handling. The video of the prototype being tested is shown below:

Notes:
When testing the prototype with my peers, we found a lot of different issues that need to be fixed. Inclusive of having a log out button on the top right corner, colour coding the dots on the map and the timeline for the users, and finding an algorithm to allow multiple searches to be clicked on at once on the one pin. 

Another part of my contribution is to create wireframes that show the design of the application - this was suggested by a team member because they believe it would be easier for the coders than for me to do the css stylesheet myself. Of course I will still help them with the css sheet.
ZONE: http://deco1800-406.uqcloud.net

Week 6: Pitch Critiques

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).