Rationale and info

Rationale

I chose to create a website based around the visualisation and graphical representation of data. The site I made is called Stats. A site where users can post questioners about a statistic they wish to know about. Primarily aimed at small businesses without the means to conduct large scale surveys, the site also caters to those seeking answers to more casual questions, or are curious towards a particular subject. I wanted the design of the website to sit quietly behind the focal point of the site, being the data and graphs. A fairly unadorned colour palette was used along with a red spot colour to highlight points of interest complements this unobtrusive aesthetic. The design is based on a two column grid at desktop, this reduces to a single column as the site is brought into tablet, and further compacts menus as the site is in mobile. 

notes of functionality

The graph for the recent submission who are you and what do you do on the internet? Currently updates when answered. The circle representing the 16-25 demographic expands, this graph is illustrating a selection of age groups and the primary activity they do on the internet. The sections latest, browse, most answered, need answers would all be identical is look but would reorder the content in terms of section.

About the site

Stats. Is website aimed at small business, or whoever wants visual representations of their data. Users can pose questioners consisting of multiple choice questions and numerical sliders, users may ask as little as one and up to eight questions. Questioners posted will be answered by all the other users, when a certain number of answers are given you will be notified. From there you simply take the raw data we provide and come up with amazing visualisations, once that’s done we’ll host the data visualisations and allow other users to continue to answer and effect your statistic.

home page desktop

home page tablet

Home page mobile

Device testing

ensemble

mobile

tablet

desktop

Progress and responsive data

The primary dynamic data features of my website are the graphics and questionnaires

The script that controls the graph for the internet questionnaire: The user is asked their age and what their most visited sites are. upon completion the graph will update, with the respective circle (the users demographic), becoming bigger.

*only the 16-25 age range updates when the submit button is clicked. 

.

Wireframing

desktop layouts

mobile layouts

Chosen Topic

 The idea I have chosen for my responsive, visualisation website is; A site where users go to pose and answer statistical questions and get/make accompanying visualisations of the questions.
For example if a user what's to know what is the preferred media player, assuming no one else has posed that question. They would ask the question and and give a set of multi-choice answers. From there other users who log into the site will be able to see and answer about their preferred media player.
Once the quota sample size has been met, if one was set. The question in its current state could be closed (perhaps temporarily) the raw data taken from the question is then taken and applied to any number of graphs it qualifies for, whether it been Venn diagrams, line, pie or bar graphs. If a more complex question is asked with more than one variable, the user could take the raw data from their question to make their own visualisations of data.

Responsive desgin

information on this website when moving from desktop to mobile, is pushed under the title section of the home page. This means no matter the device the title and top of the home screen will always look very similar. The navigation bar is condensed into a drop-down menu.

This website has a very fluid layout with a heavy use of animation; moving the mouse shifts the screen around were the user is pointed. Information on the site is broken up into pentagons, which are all easily moved around the page to suit the device's screen size. Once again navigation is condensed into a drop-down menu.

This website uses a skewed cubic grid system for the alignment of elements on the page, this allows for the boxes of information, graphics and links to be arranged whilst maintaining the overall aesthetic of the site. Although all the elements n the page rearrange and change scale, as the device screen size lowers the page elements get smaller so that almost the same imagery is visible no matter the screen size. 

The overall aesthetic for this website is very clean and concise, with a complementing  composition. The minimal amount of content on the site is well spaced across all devices, however I thought the hierarchy works best in the tablet view.

An article by web developer John Polacek about responsive web design
Click Here