Responsive-Redesign/index.html at main · yuimusha/Responsive-Redesign · 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
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Redesign</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
    <style>@import url('https://fonts.googleapis.com/css?family=Assistant:200,300,400,600,700,800|Source+Serif+Pro:400,600,700');</style>
  </head>

  <header>
    <h1 class="project-name">Responsive Redesign</h1>
  </header>
  <body>
    <div class="project">
        <div id="overview">
            <p>The purpose of this assignment was to practice the workflow of redesigning a simple website. An existing interface was analyzed and was redesigned to improve the usability and accessibility. The sketch of the redeisgn, low-fidelty wireframes, high-fidelty mockups, and the final redesigned website is included in this webpage.</p>
        </div>
        <div class="part-one">
            <h1 class="part-name">Part 1: Identifying Usability Problems</h1>
            <div class="project-header">
                <h2 class="project-heading">Picking a Website</h2>
            </div>
            <div class="project-text" id="observations">
                <div class="project-section">
                    <p>A <a class="outside-link" id="ranzan-link" href="https://www.jmbcommunications.com/ranzan/index.html" target="_blank">website</a> of a restaurant called Ran Zan was chosen for the assignment.</p>
                    <img src="./images/original-website-image.png" class="project-pic-full">
                    <p>This is a website of a Japanese restaurant located in Providence, serving as a platform to offer an introduction to the restaurant while also presenting the menu and contact details for user convenience. I chose this website to redesign because the website seemed outdated and it was evident that redesigning it would significantly improve its user-friendliness.</p>
                </div>
            </div>

            <div class="project-header">
                <h2 class="project-heading">Analysis of Usability and Accessibility</h2>
            </div>
            <div class="project-text" id="usability">
                <div class="project-section">
                    <p class="project-sub-subheading">Usability of Website</p>
                    <p>The analysis of the website usability can be seen in this diagram below.</p>
                    <img src="./images/usability.35.png" class="project-pic-full">
                </div>
                <div class="project-section">
                    <p class="project-sub-subheading">Accessibility of Website</p>
                    <p>The accessibility of the website was analyzed using WebAIM WAVE. Using WebAim WAVE, 2 errors and 37 alerts were given for this webpage. The 2 errors (spacing image missing alternative text, language missing or invalid) are in the coding of the webpage, and while the error is not visible on the webpage, it should be fixed. Furthermore, of the 37 alerts, 29 were due to small text size, which I agree with. The text size in the menu bar should be increased to higher readability. In addition, 2 of the alerts were due to redundant links to the home page. I think that the home page link in the menu bar could still be kept, but additional features like an underline could be added to the link name to indicate that the user is currently on that page. Other alerts included “no heading structure”, “no page regions”, and “layout tables”. These alerts are due to the way the webpage was coded, and should be fixed when redesigning the webpage.</p>
                </div>
            </div>
        </div>
        <div class="part-two">
            <h1 class="part-name">Part 2: Visual Redesign</h1>
            <div class="project-header">
                <h2 class="project-heading">Speed Sketching</h2>
            </div>
            <div class="project-text">
                <div class="project-section">
                    <p>Nine sketches of possible redesign are shown below.</p>
                    <img src="./images/quick-sketch.59.png" class="project-pic-full">
                </div>
            </div>
            <div class="project-header">
                <h2 class="project-heading">Final Sketch</h2>
            </div>
            <div class="project-text">
                <div class="project-section">
                    <p>A final sketch that incorporates the favorable design elements from the speed sketches were made.</p>
                    <img src="./images/final-sketch.49.png" class="project-pic-half">
                </div>
            </div>
            <div class="project-header">
                <h2 class="project-heading">Low-Fidelity Wireframing</h2>
            </div>
            <div class="project-text">
                <div class="project-section">
                    <p>Using the final sketch as a reference, one wireframe for each screen size (mobile, tablet, and desktop) was created using Figma.</p>
                    <p>The low-fi wireframe for the desktop screen size can be accessed <a class="outside-link" href="https://www.figma.com/proto/dq2ZXghd0daNH5Hy6c8z6K/Responsive-Redesign%3A-Low-fi-wireframe?page-id=0%3A1&type=design&node-id=1-5&viewport=534%2C449%2C0.37&t=WkCgSWQngu4hJ9no-1&scaling=scale-down&mode=design" target="_blank">here.</a></p>
                    <p>The low-fi wireframe for the tablet screen size can be accessed <a class="outside-link" href="https://www.figma.com/proto/dq2ZXghd0daNH5Hy6c8z6K/Responsive-Redesign%3A-Low-fi-wireframe?page-id=1%3A3&node-id=24-83&scaling=scale-down&mode=design&t=uHL1IyGYC9XjnVDc-1" target="_blank">here.</a></p>
                    <p>The low-fi wireframe for the mobile screen size can be accessed <a class="outside-link" href="https://www.figma.com/proto/dq2ZXghd0daNH5Hy6c8z6K/Responsive-Redesign%3A-Low-fi-wireframe?page-id=1%3A2&type=design&node-id=2-82&viewport=503%2C1110%2C0.82&t=7aFwu9h8x5GqEBII-1&scaling=scale-down&mode=design" target="_blank">here.</a></p>
                    <p>The annotation for these low-fi wireframes are shown below.</p>
                    <div class="project-pics">
                        <img src="./images/low-fi-annotation-desktop.png" class="project-pic-large">
                        <img src="./images/low-fi-annotation-desktop2.png" class="project-pic-large">
                        <img src="./images/low-fi-annotation-tablets-phones.png" class="project-pic-large">
                    </div>
                </div>
            </div>
            <div class="project-header">
                <h2 class="project-heading">Visual Design Style Guide</h2>
            </div>
            <div class="project-text">
                <div class="project-section">
                    <p>Before creating the high-fidelty prototype, a visual design style guide that displays the main colors, typography, and reusable components’ different states was made using Figma.</p>
                    <img src="./images/visual design style guide.png" class="project-pic-full">
                </div>
            </div>
            <div class="project-header">
                <h2 class="project-heading">High-Fidelity Mockup</h2>
            </div>
            <div class="project-text">
                <div class="project-section">
                    <p>Using the low-fidelity wireframes and the visual style guide, three high-fidelity mockups of the page were made with one for each of the screen sizes (mobile, tablet, desktop).</p>
                    <p>The high-fi mockup for the desktop screen size can be accessed <a class="outside-link" href="https://www.figma.com/proto/pcO2QoRtajcGJbqkjRa6GW/Hi-Fi-Mockup?page-id=0%3A1&type=design&node-id=1-2&viewport=377%2C413%2C0.42&t=MevkYyEPRYsysoMc-1&scaling=scale-down&mode=design" target="_blank">here.</a></p>
                    <p>The high-fi mockup for the tablet screen size can be accessed <a class="outside-link" href="https://www.figma.com/proto/pcO2QoRtajcGJbqkjRa6GW/Hi-Fi-Mockup?page-id=57%3A108&type=design&node-id=57-109&viewport=450%2C608%2C0.78&t=g0Vjp4aR2EFgPe1i-1&scaling=min-zoom&mode=design" target="_blank">here.</a></p>
                    <p>The high-fi mockup for the mobile screen size can be accessed <a class="outside-link" href="https://www.figma.com/proto/pcO2QoRtajcGJbqkjRa6GW/Hi-Fi-Mockup?page-id=31%3A52&type=design&node-id=31-53&viewport=337%2C-651%2C0.8&t=1ivrdoOIUJCF7UVq-1&scaling=min-zoom&mode=design" target="_blank">here.</a></p>
                </div>
            </div>
        </div>
        <div class="part-three">
            <h1 class="part-name">Part 3: Responsive Redesign</h1>
            <div class="project-text">
                <p>Using the final high-fidelity prototypes, the page was created using HTML and CSS.</p>
                <p>The redesigned website can be accessed <a class="outside-link" href="https://yuimusha.github.io/redesigned-ranzan/" target="_blank">here.</a>The image below shows a visualization of the redesigned website with a desktop scren size.</p>
                <p>The zip file of html and css codes for the redesigned website can be downloaded <a class="outside-link" href="https://drive.google.com/file/d/1rXm0RZqj-Ass0Ez5wH53hI4nQjxzq7Yx/view?usp=sharing" target="_blank">here.</a></p>
                <img src="./images/final-redesigned.28.png" class="project-pic-full">
            </div>
        </div>
    </div>
  </body>
</html>