Prototype , implement and learn phase

completing a couple of design solutions from our interim submission, we began to prototype the redesign of the website. We looked at the different elements of the design interface those being the text size , typeface, shapes , images, layout, colour scheme, primary logo and organising the menus drop down options .  The image below shows the different elements taken into our re-design for the website Travel South .We chose the colours of green , white and grey to represent the area of South coast . We decided on simple shapes such and the icon of the location pin and triangles we wanted to create a icon that was easily noticeable  and understandable for any user to use. We also incorporated the the social media icons in our website but using the circles icon to go with our style. Our typeface we chose was interstate regular and myriad pro as we believed this was easy to read , Font size ranging from 52pt – 9pt as seen in the image below.

style

font size

In the primary logo we tried to incorporate our colours into the logo but decided on the using the grey and black for the primary logo design . using the compass idea with representation of the wave to symbol to coast environment of the region. I think this was done well.
logo

Stage 6 – implement

UntitledUntitled

the final outcome is shown above , the design resulted in a minimalist , clean design using photographs for navigation selections and a clean sans serif typeface. Every layer has a header in white text overlapping a photo this provided a clear communication to let the user know were they are on the site. The design incorporated global navigation which was consistent throughout the design pages . With this design we got rid of the scan column that was featured in our prototype and ideate stage but because of feed back we change this. taking away the scan column allowed us to  have more space  which impacted on our design. We group our content on each page into categories and displayed this with a picture link. We wanted to follow this idea because  we believed it gave the viewer more encouragement and a easy fun interactive navigation option.  we wanted to create a design that was simple because of how big the site was and to be able to follow our design rationale.

stage 7 – Learn

What we learnt from this experience is how to design a functional , well designed   website. using our newly gained knowledge from Lynch and Horton text (2009) and the information given to us in class and lectures. learning the basic structures of the website helped us when recreating Travel South. It taught me to pay particular attention to detail , page structure and how to properly use navigation. using this information will help me in the future projects of website design as we know have a better understanding of what is needed to complete such  a brief .

selecting a design solution

The two different design ideas were pushed forward to the select stage. By completing drafts from the ideate phase as a team we began to select the best design solution. These ideas were presented to a class group, where we analyzed each response of each group member design about our ideas and concepts. From this we received feedback about each individual design solution which was helpful when trying to select the right design solution for our website. In the end Emily design was chosen as we believed her layout was clean and clear, fitted the style for a Travel South website, used the right design principles, guidelines and improved on the site navigation and functionality and matched the design rationale perfectly. Emily design seemed to get the most positive response when presenting our ideas, though the design still needed to be refined.

choosing type : research and ideate

Choosing type:

During our research phase we wanted to choose the right typefaces to use in our redesign as Ellen Lupton states “Typefaces are an essential resource employed by Graphic designers, to chose and combine them in response to a particular audience or situation”(2004,p.13). For the brief we needed to chose a font that was easy to read and provided the right style that would suit the design of our website. We started to research the different font options we thought would suit the site and from here we would choose. Below are the different typefaces chosen in our research phase that we thought would suit our website, our selected three are highlighted in a lighter green myriad pro, Interstate and trade gothic. By researching the different sixe options we came up with the idea of using tiles size to 52 point, headings to be 36 point, menu bar to be size 18 point, the main body of text to be 15 point size, the footer to be 13 point and the drop menu to be 9 point size. When designing i chose to go with the font type face of interstate and trade gothic at the pony size ranging from 9-14 point size with the leading ranging form 11.5 to 13 to give it the right amount of space needed for a reader to easily read the website without it being in your face which turns the readers off reading or searching through the site. Choosing the right proportions for the site is very important design element when considering the user interface to cover the bases of creating a typeface that is consistent , legibility , alignment , white space, centred or justified text blocks , the right line length , type colour , As suggested by Lynch and Horton they emphasised the impotence on using a “single typographic family and vary its weight and size for the display type and emphasis”(2009,p.218)

“Good typographers establishes a visual hierarchy for rending prose on the page by providing visual punctuation and graphic accents that help readers understand relations between prose and pictures, headlines and subordinate blocks of text”       (Lynch & Horton 2009,p.205)

fonts

logo research and ideate phase

logo inspo When Researching about the south coast our team wanted to create a brand mark that suited the area and website style. The Photos above are our gathered inspiration when re-designing the new brand mark. As a team we studied the different types of logo and brand marks found around the local area, looking at tourism sites logo, iconic pictures, colours and icons. We wanted to create a logo that stood out and was recognizable to represent the South Coast. In the end we were driven to the idea of using the compass, location icon and colours associated with the beach to represent the south coast. Creating a logo for Travel South was important for their website to create a brand mark and identity. This would ensure that the user using the website knew what site they were on. Taking on our information and inspiration from our research phase our team began to design a brand mark and logo solution for Travel South as seen below:  Chelsea’s logo1 Emily ‘s  logo2 From critically analysing these two design solution from emily and mine logo , we decided to go with emily choice of logo design as we thought that it suited the brand the best. The logo clearly represented the region of the South Coast with the different elements that are iconic to the region . the logo makes use of the beach , the compass pointing down  suggesting the south . like Lynch and Horton mention  “good graphics and interesting illustrations are visually arresting and create documents that are distinct and memorable”(2009,p.267) . Comparing my own design with emily it is clearly noticeable that emily design was clearer to see for the user and was able to be applied to many collateral options like a business card , app icon and magazine. it were to shrink it to it minimum  size it would still be noticeable Where with my design it is clear that the smaller it gets to the minim size the less clear it becomes.

What was wrong about my frist design draft 

By completing a couple levels of the website south coast , i was able to define what needed to be changed and what needed to be  more developed . when asked to do a presentation for the interim submission this gave are team a good chance to discuss our theories and implement what we need to  revolve in our design concept. It provided us to get the  feed back we needed. By looking at emily designs layout , and comparing it to mine , she managed to have the right amount of white space which in turn encourage the viewer to keep reading throughout the site , this is something i need to consider in my second draft , she also had a very simple layout that i think i would be glad to carry on. overall my design had its good and bad aspects , it made use of the context and incorporated the photo gallery that was disparately needed in the website , but all together i wasn’t very pleased with the finally outcome , and  hope to work on the suggestion given to create a better design solution.

what needs to be changed  about my frist  draft is :

  1. negative space-  some of the pages needed to be de cluttered
  2. needed to use  more of a grid system , so the page  was neat and easy to read
  3. needed better choice of colour – take away the grey
  4.  the email tab , should be moved to the top of the pages instead of the footer.
  5. i need  to pay attention to detail – the size of the writing , the font type , grid colunms
  6. Better use of a drop down navigation so you don’t have to scroll down  the page to see the scan columns navigation.

redesigning the website -ideate

After completing assessment two our group critically analyzed and understood the structure of the website south coast illawarra NSW very well and began to see its faults and what it could improve on. From this our group separated to create and redesign are owns ideas on the site interface design, navigation and structure of the website. From this we would look at each design from each member looking at the positives and negatives to create the final design layout and structure of the website. Below is my concept of the site interface design, navigation and structure of the website.

Navigation proposal
Navigation proposal

Here is my redo of the website navigation, here you see I have reorganize the site so its now easier to read and a structure that is easy to follow for the user of the site, its simple and clear which is important for a large site with lots of content and depth.

Home page
Home page

This is the new design of the home page; I have now made it easier to navigate by adding a global link throughout the whole website. I have also added a search tool function which now makes it easier to search through the site, this is particularly important when you have a large complex website with many levels, making it easier for the user to use and find content quickly.

What also been added is:

  • Social media sites: which now makes it easier for the user to stay in contact with the site and to constantly be updated with new information about their sites or new attraction.
  • Email link: again another opportunity for their viewers to stay in contact and receive information regularly
  • Use of a better gallery: Access to the gallery with better photos of the towns, accommodation, attractions and entertainment throughout the website, to encourage readers to visit and to admire.
  • Links to website context: the ability to click a photo to get you to your desire page selection, which is also found in your global link at the top.
  • Privacy and contact page is now noticeable and accessible at the bottom of the page.

LEVEL ONE PAGES

Special places
level one -Special places

This is the redo of the first level page –special places. Instead of just having writing of the places with just a phone number, with no photos or information about the place. I have decided to add photos and information about the site with the ability to click on the title of the place to give to access to the third level to receive more information and photos. Throughout the whole website I have continued with the same design layout and the use of the global navigation at the top. I did however add the use of breadcrumbs navigation this was lacking in its original design, as you didn’t know how you got to the page you were on, or where you previously were.

Screen Shot 2015-05-10 at 11.42.17 pm

This is a redo of the first level Attractions, much like the other pages it also gives a brief summary of the different types of attractions you may find in the south coast illawarra, with the ability to select the different categories to receive more information and contact information to each of the different attractions options

Our towns first level page
Our towns first level page

This is the redo of level one Our town, this page provides you information about the south coast area while giving the reader the option to select the different towns to found out about more information, bring you to your third level. Again you can see I carried across the global navigation, breadcrumbs, gallery, and design layout.

level one -entertainment
level one -entertainment

This is a redo of the first level entertainment; this gives you a chance to see the different types of categories of entertainment and by clicking on the different categories brings you to your third level with more depth and information about the entertainment you have chosen. Again you can see I carried across the global navigation, breadcrumbs, gallery, and design layout.

level one - contact page
level one – contact page

This is a redo of the level one contact page, unlike their previous contact page this gives you the ability to contact them and understand their privacy laws. This is a great opportunity of south coast to be able to receive feed back from their viewers and allow communication. By adding access to a map gives the viewer more knowledge and necessary information they may need to know here they are going and how they might travel.

Level two –

second level - our town - Wollongong
second level – our town – Wollongong

This is a redo of the second level coming off the first level our town. This page gives you more access to more information about the town with options to view more photos from the town. This allows the viewer to grab more interest and creates visual appeal to the layout. The use of breadcrumb navigation makes t easier to know where you have been to get you to this page, something that was lacking in its original design layout.

Second level- tour and cruisers  -from level one attractions
Second level- tour and cruisers -from level one attractions

This is a redo of the second level Tour and cruisers linking off the first level page Attraction. Like seen with original design this page is also split into northern area and southern area. Instead of having one long page you can either press the two options which gives you the links to the multiple selection in the categories and beside it the tour will appear giving you the option to read more information about the tour and providing contact information and a link to their website. Again this site as seen through all continues with the global and breadcrumb navigation.

second level restaurants and tours - from level one entertainment
second level restaurants and tours – from level one entertainment

This second level page Restaurants and Tours is also accessed form the first level page Entertainment. Like above this too is spilt into two categories Northern and Southern area. You can either press the two options which gives you the links to the multiple selection in the categories and beside it the tour will appear giving you the option to read more information about the tour and providing contact information and a link to their website with option of photos as well to view.