Logging the work and define responsive design

Responsive design

One of the things I forgotten to place in this blog is defining responsive design. Responsive is a keyword that defines the term "responsive design' as a design that accommodates the user's environment based on the device and the screen size. The use of media quires allow designers to create one website that respond to the user's needs. At the moment website developers design sites that accommodate users using mobile phone, graphics tablet and desktop.

Flexibility is one benefit of making a website responsive. The use of percentages on website images enables the designers to produce sites that includes all important graphical elements that enable the user to understand the information. It also shortens the process of adjusting the image's size to suit each device's screen.

Responsive design also shorten the workload in the production stage. Many frameworks features responsive columns that are measured in percentages. Using a responsive framework allows the imagery and content to be automatically repositioned and rescaled, making the website look structured on all devices.

CSS

One of the things I have learned is to use dirty markup to tidy my code. There was a moment where understanding my code was almost impossible. Solving this required me to place the CSS into the website that processed the mark up and then presents the code clearly. This has taught me the importances of following common house keeping tips to make the code look understandable.

There are some practices being following to make CSS that look logically correct. CSS tags are positioned in the correct sub sections. I managed to used commenting as headings to help me locate code. Designing from the outside in also caused me to design the graphical elements with ease.

Jquery

One of the best achievements of this assignment was exploring Jquery. I used Codeacademy  to understand the basic syntax of the code. I followed two Jqeury tutorials on You Tube to placed a fixed navigation bar and smooth scrolling functions on the website. This is to ensure that that the process of navigating through the website feels efficient and smooth.

I used Codedrops to insert a functional slider. However, the use of this interactive object was kept to a minimum to ensure the user does not get distracted regularly. There is an issue with the imagery not covering 100% of the slider but the background is not too striking.



http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Reflections part 1

Design sprite

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

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.

Time management Responsive design and background design done

I have finally finished the footer navigation and a responsive vertical bar for mobile and graphics tablet devices. The development part of the my sketch shows the social media buttons positioned next to a horizontal navigation bar. I also intended to add pin points to make the hover effect look smooth. I followed a tutorial to achieve this on You Tube. I managed to implement this feature onto the social media icons to improve the user experience.

Another great achievement of this week was making-sure that the backgrounds imagery were inserted. I developed retro and 1950's style signs/logos to make the coral reefs website have a captivating theme for students to experience. Currently, the background property is set to display none on the mobile and landscape Ipad to ensure the main content's legibility is not reduced. However, I may place the symbols next to the top of the first paragraph to improve the content's readability.

Other than that, I just need to add 3 videos and make-sure that user testing is performed again to improve the site's usability and design.

Time management: website

Creating the responsive website

One of the key things that I will enable me to meet the deadline is the implementation of content with HTML escape characters and optimised images. With my planning, including naming the div tags, I have completed this process very quickly. In addition, I have inserted the typography, headings and the general colour scheme. Overall, my website is about 60 to 75 percent. 

Deleting the unnecessary sections and altering the layout for the Ipad and Iphone websites are the next task. The process will not be too time consuming because I have placed div tags called, primary, secondary and tertiary. Tags with the value of tertiary do not appear on the Iphone website whilst with other div classes appear on other versions of the site.

With graphical elements produced, I will have to place a retro design image over a solid colour background. Retro is a great theme that represents my graphic style and coral reefs. Completing this task is quick process due to my knowledge  of inserting background imagery to block level elements. 

One of the key outcomes of this assignment is to use validator to check both css and html. I had problems with the positioning property for on of the images. At the time, I was unaware how to solve this issue so I placed the html to W3 html validator find any typographic or syntax errors. The results presented a div class that was wrongly placed in the html document. The image was placed in the intended position once the error was corrected. 

Navigation and proposal

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. 

Time management 2

My time management for this week has been professional. I have been able to adapt to the presentation date change and still completed the planning stage of the site. The process after the presentation was starting on the graphics. However, to ensure I get the right image size right, I took my mock ups and started inventing the div tags. On the same page, I wrote down the necessary div classes for all sections and graphical elements on the site. This list of classes will act as a checklist that will enable me to prevent myself from writing dirty code.

With the task completed, I focused on developing the retro style illustrations on Friday. So far I have managed to create navigation buttons, and some picture frames. The only things to complete is the hover images and the fade illustrations for the background. This process will not take long because the sketch book features all of my designs that compliment the website theme.

On Saturday I will experiment with a fixed navigation bar using JQeury and Javascript.  The other more difficult graphical elements, such as animation and sprites will be tested on a dummy website. This will enable me to fix plugins' flaws and change their designs to suit my website. In terms of time management, this will prevent me from wasting

With the checklist and the experiments, building the website should be quick experience.

Presentation Review

Terry Watson Presentation from Terry Watson

Generally there was very good constructive feedback given but I felt there should have more useful information that could have improved my design. Paul suggested to me that the home button was not obvious to the user. In response to this suggestion, I will plan to enhance the user experience by including a banner containing an icon symbolising home.

From this point, I will need to upload more technical research posts. As for planning the site, I have already named my class names. I am going to present my layouts to some people to get a rough idea to improve on. The last task will be measuring the scale the images, text and other graphical element to ensure I can produce the graphical assets before the digital conference.

As for user testing, I have developed paper Ipads for users to interact with. Doing this stage very early will indicate the positive and negative aspects of the website without spending too much time on a product that could fail.

Responsive websites part 3

More research

Today's post will focus on the responsive design of these websites and the buttons used to present the navigation links. I have taken 3 websites that are very responsive and reviewed their features.

When viewed on the desktop, I thought the website conveyed a sketch book feel. The desktop website features massive text positioned on dark blue squares. Although this works on the links the content may look overwhelming. However, the content and the page design alters in the Ipad version. The Ipad website reveals a sketched designed navigation buttons that enhances the visual experience. A appearing text reveals the name of the page that is linked to the page. 

Generally it does make the the website feel unprofessionally designed due the navigation elements only appears on the Ipad and mobile sites. This may cause the user to have a difficult experience in navigating through the website.

A nice addition to the website is 

The designer has considered the hierarchy of information in his website design. The Ipad version features an avatar next to some some content and states. Both kinds of the content are positioned near the image to establish connection between them.

There is an issue with the word, about me heading. Placing the text onto a box could apply a navigation link. I media selected the text when I saw the graphical object. When the cursor clicks, no actions took place.

To ensure  the 

http://iwantobeafootballplayer.com/

This web agency has an excellent phone website. When I viewed this on the phone, the graphical element looked and web page composition. The website features one column filled with content and imagery. The use of empty or negative space makes the website come across as understandable. The visually pleasing and colourful website would entice the audience to explore the website.

The typography is the website's boldest aspect.. The script face conveys a retro feel that adds a vintage characteristic. Both script and italic san serif font face a mixed together to create some contrast into the the heading design. Generally it  also enhances the visual imagery. The top hot often symbolises history and old fashion, therefore, the illustrations blend with the website theme. 

The navigation one the desktop version is quite unusable due to its scale. The navigation is positioned on the right part of the website but the scale of the links are too massive to fit onto the page, thus reducing the user experience. However, the phone website features the very convention drop down menu. When the icon with 3 lines is activated, a drop menu with the centred aligned text.

As for the navigation design, it is very elegant and it does work. The mobile site has its own navigation page that is very usable. The vertical navigation bar is positioned to the centre. The links are surrounded by large amount of padding, making the composition look clean.




http://fixedagency.com/en/portfolio

Time management

Hi all. This is my time management post that will offer you information about the task completed already.

This is the consolidated schedule that shows that now presentation is now on the 6th of may 

The date of the presentation had to be delayed by a week due to one of the peers not being able to attend. I was suppose to present on the tuesday or  Wednesday but the tutor was not available. As a result, the presentation is now on the following Tuesday. This is slightly problematic because I reserved a week to prepare my graphical assets and plan all of the dimensions. In response to this problem, I have focused in creating very detailed wireframes and mock ups to get the feel and look of the website. Generally, I still need to prepare to plan my website to ensure that I create the digital assets before the digital conference.

Previously, I have conducted research on a wide range of design websites and technical content. I have finished the visual research into existing responsive websites and the retro styled websites. Overall, I have logged some very important topics of designing a website.