The Hinuha Creative website can be accessed here.
Unit 15:
Web Development and
Critical Reflection
Client
Student requirement for HNC in Creative Media, Dublin Institute of Design
My Role
Entire product design from research to conception, visualization and testing
Project Brief
As a recently hired Design/Developer you are about to take on your first full project with your new firm. A Dublin based Graphic Design company is considering expanding their services to include Web Design and Development. You are to create a website that will provide potential clients with information that can help them make sense of key technologies, standards, tools and processes used in the creation of Websites and Web and App Development. The information should be presented through a good mix of Visuals and Text based content.
Creating Hinuha Creative
Hinuha is a Filipino word for 'inference' or 'logical reasoning'. I chose this name for the website as it reflects the way I carry out my design process. I go by the principle that each design element, big or small, contribute to the overall appeal of an artwork, a website in this case.
Having the basic knowledge of web design and development, I created the Hinuha website from 0, starting with a wireframe (see image above), and then designing (and hand drawing) each element for each section, then putting them in a cohesively laid out web page using development tools -- all while taking into consideration the design principles to make the website successful.
On top of my list is simplicity and accessibility. I opted for a simple, clean design with a consistent colour palette. Readability is also an important aspect of my design. As most of my page contain paragraphs, I used a simple and consistent typeface. Overall, aesthetic wise, I think that the entire design is fresh to the eyes and visually attractive.
Using the basic code languages and JQuery, I was able to execute to the actual website what I envisioned on my wireframe, but with minor challenges particularly in adding meta tags to make it SEO optimized, and making it responsive. I have attempted to make my website SEO optimized but for some reason, Google's indexing algorithm did not allow it to happen. Also, I have struggled making the pages responsive to different screen sizes.
If I would have the luxury of time, I would start creating and optimizing the website for mobile first, and then work my way up to the desktop version. About 80% of users access website on mobile devices, and so I feel that building the website mobile version first makes a lot of sense to make it more accessible. Also, instead of using HTML, CSS, and Javascript alone, I would incorporate Bootstrap as it has a lot of features for responsiveness and mobile optimization. As users shift more and more on mobile devices for web accessibility, I believe that mobile optimization has become the industry's gold standard to date. Other standards revolve around design, accessibility, and consistency in coding.
The web industry's standards on design and accessibility has evolved tremendously over the years but a few basic ones are retained. These include, but not limited to:
​
-
Logo on the top left
-
Navigation across top
-
Value proposition and marketing high up on page
-
4:5.1 Color Contrast
​
Assessing my website, I have met all these standards. For colour contrast, I used the tool Lea Verou's Contrast-Ratio tool which rendered a score of 4.56 (Passed).
Coding wise, I used the W3C Validator to check any errors on coding. It returned less than 40 errors, which were then amended to ensure adherence to coding standards.