Navigation
The structure of the site is a very logical aspect of the site. A conclusion was made that the website needs to have less pages to ensure that target audience do not have their experience clicking too many buttons. The solution for was to include pages that features sections of content. Each page represents a chapter from the Ibooks.
In terms of hierarchy, I realised that the students need to follow a logical and semi-linear path in order to understand the information. The home page will consist of a tag line, a sentence of text buttons leading to the chapters. The overview page would be a great place for students to start. The page givens them an over view of the coral reefs. The information explains each page's content to allow them to comprehend the structure of the website. There will be an image gallery or a video to visually entice them to enter the website. This webpage should feature a link to the first chapter should allow them follow the right path.
For each chapter, there will be a button that guides the user to individual sections. This is to ensure that they do not have perform scrolling for long periods of time. Giving the users the ability to navigate through the large page can allow them to find the content appealing to them. This feature would enhance the website on the Iphone because scrolling down using touch can give a sluggish experience
Instead of adding internal pages, I realised that pop ups or expand boxes could be great idea. Intend to create a simple website structure that prevents them from getting lost. However, there might be a couple scenarios where an internal page will be included to present graphs and videos.
Responsive design and layouts
Iphone
Designing the website on the phone was easiest part of the process. The phone features only the 3 line symbol signifying the navigation, the basic text and some interaction. I made a decision to make some secondary and tertiary information unseen on the Iphone. This device has less estate, therefore it would be wise to include only the necessary information.
The navigation on the Iphone differs compared to its Ipad and desktop counterparts. The 3 lined symbol will be used to present a vertical drop down bar on the web page. This is to ensure that the navigation design is still usable and the scale of the website is not too long. The home page will only consist of a overview button logo to en
The layout and the hierarchy is among the most basic aspects of the design. There is only 1 column filled with information and images to ensure the content is readable and looks visually pleasing. An image Lightbox effect will be applied to ensure that the user can view the images without straining their eyes.
Each section will have its own colour scheme to help the user differentiate the sections. Many of design website follow this practice to make usable and attractive websites. Inspired by this design, I thought that using coral silhouettes as borders would make the theme consistent.
Ipad
The layout and design for both Ipad changes in terms of layout, content and imagery. All primary and secondary information will be included on the tablet site. Majority of the tertiary contetn will be available as well. The content may have links to pop up menus to present more information. However, there will be a choice of using the appear and disappearing function.
The scaling of the imagry and composition are the biggest alterations. The screen resolution on the Ipad are larger, therefore there is an increase of empty space. This negative space will features more columns of content. two or three is the ideal number for graphics tablet.
Another aspect that changes is the navigation design. The home page will feature the chapter icons underneath the overview button. Tablet users can select the larger retro styled icons to navigate through the website. The navigation site map also changes due to empty space. There is enough room for the site map links to be positioned horizontally along the bottom part of the page. Due to learning Javascript, I have decided that a feedback forum should be provided to ensure that feedback from users can be gathered.
Dekstop
Generally the composition and the scaling slightly changes in the desktop version. The imagery will be larger to ensure it accommodates users with Imacs and laptops. Generally though the website will be around 960 px in width as screen sizes are becoming smaller.
This layout concept is assigned to the desktop site only. The desktop features enough space to feature a paragraph of text next to a large image. This is very common on design agency websites, such as Done Done.
colour
#D44D52
Red is the colour that establishes hierarchy to help the students explore the website. As this is a very striking colour, I concluded that this red mild chroma red could make the logo and the important links standout. The intense of the red compliments the blue-green background and offers the user a sense of vibrancy.
#95B6BB
This is a quite a pale blue that creates a massive contrast to the shaded green and the vibrant red. Generally blue was the common background colour for the Ibooks therefore, it would make sense to apply this colour to the website. Generally blue symbolises the nature and the sea, this therefore would convey the right meaning. This colour should represent 60% of the colour scheme.
#C74327
#BAE3E8 and #8CCCD3
Although separating sections using different colours is a great concept, there is an issue of making a website resembling lego. Colours similar to the blue should be included to ensure the sections do not look too striking. The footer will only be the only section that has a different colour.
No comments:
Post a Comment