DXB301 Interface Design

Yu SUN N8566500

[steven-dxb301-blog]

This is video shows how this website final work (on my laptop firefox).

However, when i upload to the unit host, some codes and links are may lost. I am not sure why do not work well.  Today is the due day, all I can do is think about the future.

One future opportunities, make sure always upload the web site to the host, that will help and find problem.

[steven-dxb301-blog]

This video is test recoding for this website work. after recoding how this webpage work, I need some things I need to change.

1. The fifth page, images horizontal scroll ( I think images need more big to fix on the last page)

2. The fourth page (tabs) need do more work on it.

[steven-dxb301-blog]

The image map development

This is how I did for the image map. find the right point for the location.

Develop based on this useful source.

http://red-team-design.com/image-map-with-css3-jquery-tooltips/

[steven-dxb301-blog]

Fifth page - tabs

The fifth page, I do some change from A1, I change the horizontal image scroll box to be a tab ( Because for the last page is the horizontal image scroll display, that will be same)

I learned from

https://jqueryui.com/tabs/

and

https://github.com/alexchizhovcom/pwstabs

 All information on the images. for this part the main idea is acknowledge user  (mother smoking) if they quit smoking the baby will birth healthy as well as save money.

future --

This is the how the tabs look like for the project only 2 tabs. Actually I need make more benefit if mother quick smoking. So in the future, for the information part ,I need add more  data information, benefits and quit smoking tips. 

[steven-dxb301-blog]

Responsive Design-future

I am think about to be Responsive design, like can be work well on mobile, tablet,but this is a single page interactive web page, also have many images, therefore, i am only think about the desk top view, and try to do the tablet view as well. 

------------------------------------------------------------

the size for the tablet view:

(min-width: 768px) and (max-width: 959px)

------------------------------------------------------------

I try to do the tablet view.

However, there three problems happen when the view is the tablet:

1.

The problem about the image show, all images are too big and there are no more space for the link button.  I am still not good at write code, even I try more ways, till do not work well.

2.

This is the second problem, when desktop view become the tablet view. I think this is similar the first problem, image display. This image is part for the tabs, I may need add more <div> for the image change the size when the screen size is changed.

However, I spend too much time on the early step.Therefore, I put this to the future. In the future, I need to learn more about the JQuery, and css code write.especially about image size change.

[steven-dxb301-blog]

Fourth page- image map

The very important part for this website is the image map information show up, when mouse movie on the part location of the Australia map. Then, the map will pop up the data information about the women smoking per cent form 2001 to 2010 in different part of the Australia. 

--------------------------------------------------------------------------

http://red-team-design.com/image-map-with-css3-jquery-tooltips/

This is very useful JQuery sources to help me build this website’s image map. 

as the demo code show, the most important part is use the “data-xpos” and “data-ypos”. from this example source, I find which location on the Australia map very easy. -------------------------------------------------------------------------

<div id="wrapper"> <img width="920" height="450" src="images/33.png" alt="Australia Map"> <div class="pin pin-down" data-xpos="450" data-ypos="110">         <h2>Europe</h2>         <ul>     <li><b>Area (km²):</b> 10,180,000</li>     <li><b>Population:</b> 731,000,000 </li>     </ul> </div>

[steven-dxb301-blog]

Third page - pop up image

This page is a data information display and more detail information pop up on the whole screen.

On the assessment 1, planed to pop up the text. But, in the final one, I change to use images to instead of texts. Also, I will change the boring image display to be a question image, when user click the question image the answer image will pop up.

This is the final view about the third page.

On the top there are three images show the questions about the per cent of the mother smoking in Australia. On the bottom there are two images (they do not have pop up function) only show the data information.

This is will be the image of answer pop up display on the website. Using the simple info graph show out the percent. also the color is related.

[steven-dxb301-blog]

Second page -image show and hide

The second page idea is I want to show and hide images when users click the button (so this page is design for user have interactive with this web site).

On the assessment 1,  the image just as a image display on the second page, without any interaction. so, on the final website, I am find some very useful JQuery  sources about the show and hide. below is the code and the script.

-----------------------------------------------------------------

<div class="image-show"> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <button id="showr">Show</button> <button id="hidr">Hide</button> <div class="images" ><img src="images/p1.png"></div> <script> $( "#showr" ).click(function() {  $( "div" ).first().show( "fast", function showNext() {    $( this ).next( "div" ).show( "fast", showNext );  }); }); $( "#hidr" ).click(function() {  $( "div" ).hide( 1000 ); }); </script>

-------------------------------------------------------------------

I use image to instead the text. However, I have a problem when I click the “hide” button, all about <div>on the website will hide.

therefore, I am think about use another code to instead the <div>.

I use <h7> to instead the <div>, after that on the website view this is work very well.

However, on the html code it is seem have some problem,but i cannot solve it .

But, I have new problem, that is the edit shows that are all error on this part. I have text in many ways, finally I am keep use <h7> this is the only best way I can think about.

Maybe I need do more work and research on it, I plan do more in the future.

[steven-dxb301-blog]

Home page - Number count preview (home page)

Using the sources for developing the number count on the top of the home page, I think this is work well.

For the home page, I will keep use white color for the number and change the text color, using black for text maybe much more better.

For the second page developing ,  I am still keep doing ,  I am try to make show up and hide of the image same as planed on the assessment 1.

[steven-dxb301-blog]

Side Navigation

As assessment 1planed, my website navigation is a side navigation bar (which can be open and close).

The plan for the navigation bar of assessment is on the left side, but I change it on the right side for the final one.

As images show below,  the navigation bar will show  from right side when I click the logo button.

The background color of this navigation bar is black.

After test few time, this navigation have a small problem, that is I must click the logo button or the navigation bar , then the bar will closed.

I will try to fix it...

[steven-dxb301-blog]

UI development - number count

The home page have example number count, I can not real count how many people quit smoking every day. Therefore, I found this very useful JQuery to help me build the number count.

The website is

http://aishek.github.io/jquery-animateNumber/

This is the early step to build my number count . I want when people open the website, the number start to count for one.

Also i found the easy way to make number count form this webite.

https://github.com/aishek/jquery-animateNumber

After add this code, my website have basic number count, but not real.

[steven-dxb301-blog]

Design sources

Data sources:

The data source about women smoking during pregnancy from 2001 to 2010 in Australia.

NT

TAS

SA

VIC

WA

NSW

QLD

ACT

The image used in the website all designed by myself.

[steven-dxb301-blog]

design data support

Some important data show on the mockup

Tobacco, in particular, has a major impact on birthweight. In 2011, one-half (50%) of Indigenous mothers and 12% of non-Indigenous mothers reported smoking during pregnancy [3].

http://www.healthinfonet.ecu.edu.au/health-facts/overviews/births-and-pregnancy-outcome

About 1 in 7 women who gave birth in 2009 smoked during pregnancy.

http://www.aihw.gov.au/child-health/risk-factors/

[steven-dxb301-blog]

Inspiration work -3

This is my favorite single page scroll down interaction website.

This a report interaction website, from the scroll all images are animated. The orange point is the main part in this website. when click the orange point the text or data sources will pop up on the same page screen.

http://howcleanisengland.keepbritaintidy.org/

[steven-dxb301-blog]

Content

When I start to design this website,  I am think if I am a women what information I want to have form this website.

1. Relax colour, make them feel relax and comfortable.

2. information: how per cent  women smoking during the pregnancy in Australia. What is the effect will influence the baby if they smoking. How can they quick smoking. Are there more people quit smoking and have baby?

Therefor, in this website women who want to quit smoking, they will have interaction experience to know the data for government, they will have awareness from interactive text and animation display also they will learn from other people and share their experience in this website.

[steven-dxb301-blog]

Composition

To build a full and logic interactive and info website. I am start my second time brainstorm. I an ask the four “W” and one “H”

who, what, when, where and how

I organize this question then in my design will have three main part:

information

location data and knowledge

share

All information will show on the one single scroll down interactive page.

[steven-dxb301-blog]

Form

1. Web Typography

Head font: Gobold

This font is bold and  capitalization also looks very stronger.

This font will use for “header level1(36px/42px) and header level 2 (24px/30px)″

The font : Arial

This is a popular font for most web and print. I will use this for “header level 3 (16px/21px) and paragraph (14px/18px).

2. Grid Responsive Systems 

The website for  pregnancy woman quit smoking is a single page website, therefore it is full screen 960px.

I am looking for which will be the one fix for my website the 12pi grid below from:http://rwdgrid.com/demo/

1. Colour Palette

The colour for this website as decide before is blue, green and pink are main colour.

After this basic information about my website, below is show my final home page :)

Simple, clean and easy to engage user.