Exploring many solutions of presenting information about the coral reefs on a website was a interesting and useful experience. I feel that the website design skills have improve since last year due to not limiting my concepts. I started with a couple of brainstorms that defined the audience, the machines that the website will be available on and the interaction. In order get some design and usability solutions, I created a mood board featuring the best looking website providing great usability.
Doing these activities enabled me to quickly to perform a design sprite. This design sprite involved thinking of many possible layouts and design concepts. Once completed the 3 most achievable concepts were chosen to be developed. However, before I proceed to the next task, research into well known documentary based websites, such as the Discovery, was conducted . There was a sense that these websites had uninspiring designs that could discourage the users to explore the site.
Great designed responsive website with great interaction were then analysed. Having a one long page in website was a very common practiced used by designers. I realised that the long page concept was ideas chosen from design sprite. However, I felt that creating multiple pages with 4 to 5 sections will allow the content to be split into smaller chunks. Although it will have the same concept as a long page website, I wanted to produce a site that was different, which could inspirer others.
Graphic style
Development
After doing some wire framing, I realised that websites with semi-long pages would be the most logical solution for attracting students to read about the coral reefs. With the home page, I thought of having a logical sequence where the user would read a sentence or two about the website. After reading, the user should be prompted to reading the introduction to understand the terminology.
With the other pages, I aimed for a website that guides them through the right path. To accomplish this, I planned my fonts size , hierarchy of information and imagery. Majority of information from the Ibook is available on the website but I realised that Iphone and the landscape Ipad has less estate. This therefore caused me to categorised the content into three columns. To sort out the hierarchy, I separated the content into three columns, primary, secondary and tertiary. A decision was made to exclude the tertiary information on the Iphone.
With the content sorted, creating the mock ups and wire frames were then the most challenging aspects of this assignment. I was attempting to produce many samples of my site's design in order to gather constructive feedback. Making a wide range of mock ups allowed me to experiment with colour positioning and typography. Having enjoyable experience in creating the mock ups caused me to believe this is the correct path.
Knowing the columns and the positioning the graphical elements was more possibility the most non-linear process in the project. I had 4 possible choices to complete this task: just do the wire framing, produce wireframe whilst producing new compositional concepts, produce paper Iphones featuring the layout and then creating the wire framing.
I felt that doing the rough sketches on the book and place them on Iphones enabled me to make important decisions. Using them resulted in gathering very constructive feedback that improved the layouts. With the feedback on board, I developed the wire frame featuring the elements, div tags and imagery. However, there were occasions where I produced new layout concepts whilst drawing the wireframes. When the wireframes are drawn, the process of drawing paper Iphones and developing the layout concepts were repeated.
The time limitations and medium used to present the content forced me to simplified my graphic style. Performing extra tasks and building a website within a short period of time prevented me from developing detailed 1950's illustrations. Silhouettes were used to ensure that the website would be made in time. Reflecting on the graphic style used on the site, the retro designed silhouettes have a right balance of detail on a website. The symbols do not distract the user from reading the content. There is a sense that placing these detailed illustrations on a site could ruin the hierarchy.
Development
After doing some wire framing, I realised that websites with semi-long pages would be the most logical solution for attracting students to read about the coral reefs. With the home page, I thought of having a logical sequence where the user would read a sentence or two about the website. After reading, the user should be prompted to reading the introduction to understand the terminology.
With the other pages, I aimed for a website that guides them through the right path. To accomplish this, I planned my fonts size , hierarchy of information and imagery. Majority of information from the Ibook is available on the website but I realised that Iphone and the landscape Ipad has less estate. This therefore caused me to categorised the content into three columns. To sort out the hierarchy, I separated the content into three columns, primary, secondary and tertiary. A decision was made to exclude the tertiary information on the Iphone.
With the content sorted, creating the mock ups and wire frames were then the most challenging aspects of this assignment. I was attempting to produce many samples of my site's design in order to gather constructive feedback. Making a wide range of mock ups allowed me to experiment with colour positioning and typography. Having enjoyable experience in creating the mock ups caused me to believe this is the correct path.
Knowing the columns and the positioning the graphical elements was more possibility the most non-linear process in the project. I had 4 possible choices to complete this task: just do the wire framing, produce wireframe whilst producing new compositional concepts, produce paper Iphones featuring the layout and then creating the wire framing.
I felt that doing the rough sketches on the book and place them on Iphones enabled me to make important decisions. Using them resulted in gathering very constructive feedback that improved the layouts. With the feedback on board, I developed the wire frame featuring the elements, div tags and imagery. However, there were occasions where I produced new layout concepts whilst drawing the wireframes. When the wireframes are drawn, the process of drawing paper Iphones and developing the layout concepts were repeated.
No comments:
Post a Comment