WebDev/Report.html at master · miniumknight/WebDev · 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
107
108
109
110
<head>
    <title>East Midlands Electronics Report</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" type ="text/css" href="css/rfstyle.css">
</head>
<body>
    <div class="navbar" id="responsive">
        <div class="navstyle">
            <img src="img/EME Logo.png">
            <div class="innerNav">
                <a href="./Index.html">Home</a>
                <a href="./Products.html">XML Page</a>
                <a href="./Order.html">Order Form</a>
                <a href="./Slideshow.html">Slide Show</a>
                <a href="./Report.html">Report</a>
            </div>
        </div>
        <a href="javascript:void(0);" class="resIcon" onclick="toggleMobile()">
            <img src="img/Menu Icon.png">
        </a>
    </div>
    <div class="content">
        <div class="header">
            <h1>Design Report</h1>
        </div>
        <div class="mainTextContainer">
            <p>
                To begin the design process, I started by creating a simplistic mobile sized wireframe for the slideshow page
                of my site which was originally going to be my homepage. I then began experimenting with different colours and
                fonts to see what they would look like when placed against other colours. After I had selected a palette which
                suited the website, I got to work implementing the initial, mobile friendly version of my website and it didn’t
                take me long to notice a few design aspects with needed to be altered.
            </p>

            <h1>Mobile Wireframes</h1>
            <img class="repImg" src="img/wireframeMob.png"/>
            <br>

            <p>
                Firstly, the logo colours needed changing for the sake of accessibility as it was barely noticeable against the
                background colour, and if someone with standard vision struggled to notice it against the background then it would
                be near impossible for the visually impaired. In order to help increase the accessibility of my website I therefor
                changed the colour of the logo to contrast its background and as a result, the logo stood out much more and was
                very easy to notice. This decision to change the logo colour eventually lead me to change the colour scheme for my
                website entirely which will be discussed later.
            </p>

            <p>
                Secondly, the navigation bar looked very bland and under-designed to me and, since according to the research
                of Renee Garett, Jason Chiu, Ly Zhang and Sean D. Young, PhD (2017) “The seven website design elements
                most often discussed in relation to user engagement in the reviewed studies were navigation (62.86%),
                graphical representation (60%), organization (42.86%), content utility (37.14%), purpose (31.43%),
                simplicity (31.43%), and readability (31.43%)” (Section 4). It is critical that the navigation
                bar is well designed, engaging and accessible, because it is arguably the most important aspect of the
                website and in many cases the first place the user looks upon first viewing the site. Therefor I moved the
                logo from the header to the navigation bar and changed the layout of the bar so that the logo was on the
                left and the navigation links were on the right, this change, though simplistic, dramatically increased
                the quality of my website and would be much more appealing to the target audience.
            </p>

            <h1>Desktop Wireframe</h1>
            <img class="repImg" src="img/wireframeDesk.png"/>
            <br>

            <p>
                Once I had made changes to and was happy with the mobile-friendly design of my website, I began work on a desktop
                version of the design where I encountered many layout problems which weren’t present on a smaller screen. For one,
                at desktop size, both the text and images on the screen were so wide stretched that the website was barely readable,
                and the general aesthetic of the site had been compromised. Since according to the W3C website, home to the official
                web standards, “The Web is about more than text and information, it is also a medium for expressing artistic creativity,
                data visualization, and optimizing the presentation of information for different audiences with different needs and
                expectations” (Graphics Section). I have changed my websites design for desktop screen sizes to make it much more
                visually appealing and to fix the aforementioned problem with the layout by adding margins to the content so that
                it can’t stretch too far and also by using a 50/50 layout for content rather than content stretching the entire width
                of the screen.
            </p>

            <p>
                Finally, once I was happy with the layout for the larger desktop friendly design of my website and I had implemented
                all the relevant code, I decided to overhaul the colour scheme for my website as the level of contrast between the
                colours still wasn’t as appealing or as accessible as I’d hoped. In the end I decided to implement a white and
                purple colour scheme since these two colours greatly contrast each other, so much so that even running the website
                through a colour-blind filter yielded great results. Due to this I feel the colour scheme switch was justified from
                an accessibility perspective. I have also used the Roboto font for most of the text on my site because this font is
                considered web standard as it is easily readable and a nice-looking sans-serif font.
            </p>

            <h1>Early Pre-Recolour Design</h1>
            <img class="repImg" src="img/inDev.png"/>
            <br>

            <p>
                In conclusion, the design process for my website went relatively smoothly overall but some major problems did arise
                the more time I spent implementing my designs. These problems were handled in a way that required a good amount of
                justification from the standpoint of accessibility and target audience to prevent overdesigning of the website. Due
                to this methodology for handling design problems, the final website design now looks both simple, professional and
                is highly accessible for all people regardless of platform or visual impairments.
            </p>

            <br>
            <p>References:</p>
            <p><a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4974011/">https://www.ncbi.nlm.nih.gov</a> (2017) A Literature Review: Website Design and User Engagement</p>
            <p><a href="https://www.w3.org/standards/webdesign/">https://www.w3.org</a> (2019) Web Design &amp; Applications</p>
        </div>
        <div class="footer">
            <h3>Website by Ross Fitch. Copyright &copy; 2019, All rights reserved.</h3>
        </div>
    </div>
    <script src="js/rffunctions.js"></script>
</body>