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