2018FALL_Assignment3_LookAndFeel/Assignment.html at master · RustemKh/2018FALL_Assignment3_LookAndFeel · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<html>
<head>


</head>
<body>
    <div class="icon-bar">
        <a class="active" href="./index.html"><i class="fa fa-home"></i>Home</a>
    </div>
    <div>
    <h1>This page shows the assignment deliverables about how we addressed specific requirements</h1>

    <h2>
        Responsiveness:
    </h2>
    <p>
        We made the website compatible with commonly used devices like mobile, tablet and desktop. Responsiveness code was added to the CSS file to make sure the webpages re-adjust when the screens are re-sized.
    </p>

    <h2>
        Usability:
    </h2>

    <p>
        Following are the active interfaces present on our website:
    </p>

    <p>
        The navigation icons are highlighted when the user hovers the move over each button to show which button is selected <br />
        On the gallery page, hovering on the image thumbnails reveals the details of the photographer and the image. <br />
        If the user clicks on the hovered image, the image pop’s up in an enlarged page. <br />
        The page content rescales to the web browser size, the image gallery re-positions the thumbnails to fit the size of the browser. <br />

    </p>

    <h2>
        Content:
    </h2>

    <p>
        The website offers professional photography content to our customers in three main categories:
    </p>

    <p>
        Nature and wildlife - a diverse nature imagery taken in in most beautiful parts of our planet. <br />
        Aerial photography - a high resolution images of earth's landscape. <br />
        Important events - a well-designed photography to capture memories of the important events, like weddings or birthdays. <br />

    </p>

    <p>
        User can browse through the pages with the help of navigation bar. There are four sections available to choose from: <br />

        Home page - this page contains the company name and a welcome message. <br />
        About Us - brief outline of photography services our business provides <br />
        Gallery - this page provides a sample of our imagery content. <br />
        Contact Us - contact details of our business. <br />
    </p>


    <h2>
        Design:

    </h2>

    <p>
        We have used the following design guidelines for our website:
    </p>

    <h3>
        1. Simplicity:
    </h3>

    <p>
        Our website design is simple to help the users find what they are looking for easily. We have tried not to add unnecessary design elements as they hinder the usability of the website from an end user perspective. Therefore, our website consists of only important information and relevant graphics. The background colors/images used are consistent and limited to dark colors, the information provided is direct and of a consistent font/color all across the website. Needless or flashy animation has not be incorporated, instead we have opted for background GIFs or static images that reflect the work we do.

    </p>

    <h3>
        2. Navigability:
    </h3>

    <p>
        Our website is straightforward and easy to navigate, following are the features: <br />
        The menu bar at the top of the page allows users to visit sub pages. <br />
        On the gallery page, hovering on the image thumbnails reveals the details of the photographer and the image. <br />
        If the user clicks on the hovered image, the image pop’s up in an enlarged page. <br />
        The page content rescales to the web browser size, the image gallery re-positions the thumbnails to fit the size of the browser. <br />

    </p>

    <h3>
        3. Conventionality:

    </h3>
    <p>
        We have tried to incorporate conventional elements of webiste design in our website. Over the year, users have become accustomed to a specific behavior / experiences while navigating websites. Some elements that we have incorporated to address this are:<br />
        Main navigation bar is on top of the page (on the main page and as well as sub-pages) <br />
        Company Name/Logo is at the center of the main page so the user is aware<br />
        Navigation bar elements change color when the mouse is hovered over them <br />
        Gallery icons give information about the photographer when the mouse is hovered over them <br />

    </p>
        </div>
</body>
</html>