So this is how it's done - Creating my very first website (from scratch!)

I have always wondered how the internet works and how websites are created since the first day I used it. The first thing I have ever seen online was Yahoo! Messenger and I remember being amazed by how people can talk, without opening their mouths, through a computer real time! Then came Friendster, which basically is the first social networking site online. Fast forward to this day and age, where Facebook, Instagram, Twitter, among others, has essentially became a way of life for most people. Internet has never been this powerful.

Still, I wonder how these websites and apps are made - until I learned about it in school. The secret? Codes.

Since the rudiments of internet, codes have been what was used as building blocks in creating web pages. They are especially formatted and structured to be interpreted by a web browser much like a spoken language. And yes, they are called code languages. The three most common web programming languages are CSS, HTML and Javascript. They are a set of codes that function as complex instructions for your web browser to read, interpret, and follow. They are basically the answer to the burning question I have since then. But how do they work? Working with them to create my very first website for the past 10 weeks or so, I have had the first hand experience of how powerful they can be when used together. Today, we will delve into them one by one.

HTML

The one thing that websites have in common is HTML. It is the foundation of every website, regardless of its simplicity or complexity. Basically, it uses tags for all web contents. The tags identify what purpose a content serve in the web page. To put it simply, the HTML codes are the actual web contents in its raw form - no style, no colour, no flavour - just plain text/image. Through time, HTML versions have been improved to adapt to the latest in multimedia. Just more than a decade ago, the most recent version of HTML (called HTML5) has been released and it has been more powerful than ever.

The World Wide Consortium, the God of the world wide web, introduced semantic elements as HTML5's newest feature. In a nutshell, semantic elements are tags that represent a specific element or content structure in a website. For example, a navigation element is tagged as <nav>, and the website's footer is tagged as <footer>. They basically identify the purpose of each and every element in the website. This is very important, not only for content structure, but also for search engine indexing, which is essential in establishing web presence. If you're running an online business, or you're using your website to advertise your services, consider using semantic elements as it might help push your website up to the Google ladder.

I have used several semantic elements in my website. This include the <nav>, <section>, and <footer> among others. I find them helpful in establishing content hierarchy and structure. I have also used <strong> to highlight certain information. They also make CSS styling easier, as you can select an element easily using a single tag.

CSS

While HTML acts like the canvass of your website, the CSS serves as the embellishment that adds flavour to the overall look and feel of the website. CSS basically adds the style to the web page. As an artist myself, this is my favorite part of the design process. Like painting, the possibilities for styling using CSS is endless.

CSS works in such a way that it directly targets the HTML tag specified. One HTML tag can have multiple CSS codes affecting the way it looks, positioned, or behaves in a webpage. This means that coding CSS can be a hot mess if the developer is not careful. Code maintenance can be an issue especially if we took on a project that has been done a long time ago. Therefore, developers need to know the importance of a clean code, especially for CSS.

According to Cem Eygi's blog entitled 7 Better Tips for Writing Better CSS, coders need to learn to sort out and classify codes to prevent repetition and redundancies. In-line styles should be avoided and short hands should be used to reduce lines of rules. The less cluttered the CSS is, the better.

The key features in my website that used complex CSS elements are the navigation bar, the contact form, and the parallax effect.

JAVASCRIPT

Perhaps the most interesting, but confusing (at least for beginners like me), language of all is the Javascript. But, as intimidating as it sounds, experts say that it is not scary at all and that the basics are very easy to learn.

Interactive and dynamic websites use Javascript. While HTML and CSS is used to add content and style, Javascript is responsible for the web element's behavior. If written correctly, Javascript can breathe life to a web page. There are a number guides available to help coders in writing scripts. Maybe the most used and recommended is the Google Style Code Guide for Javascript. It provides best practices to create clean and stylized scripts. This is helpful particularly for new coders and developers like me.

OTHER LANGUAGES

Bootstrap and JQuery are two of the most common supplementary tools used in building websites. They are both free and easy to use.

Bootstrap offers a wide selection of reusable codes written in HTML, CSS, and Javascript. It saves coders time on writing CSS codes as most of them are precoded, making design decisions flexible and easier. Elements such as navigation bars, dropdowns, and responsive containers are readily available for use, and they can easily be customized!

JQuery, on the other hand, is a collection of Javascript elements. It offers precoded scripts that you can add directly to your web page. Like Bootsrap, it makes coding easier, faster, and accurate. It is also compatible with most browsers so you're rest assured that your behaviors will work smoothly.

I used JQuery on my website specifically the parallax effect I made for one of the photos. With less than 10 lines of code, I was able to add a sophisticated effect on my web page -- that's how easy and simple it is to use.

---

How I came up with 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:

1. Logo on the top left

2. Navigation across top

3. Value proposition and marketing high up on page

4. 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.

---

Web's future technology

There are a number of new development in web design available right now for coders and they are all geared towards making coding easier. One of these is Angular, which was developed by Google. It is basically a library of Javascript codes. Employing this for my website would surely be a big help as it doesn't require much coding like HTML and CSS. It will also make my website more interesting by adding animations and more interactive elements.

---

Where do I go from here?

After 10 weeks of learning how to design and code, I feel that I have gained enough knowledge and skills on the technical aspect of designing and creating websites. Creating a fully working website is already an achievement by itself, but I know I could do more as I continue with the course. Reflecting on what went by for the past 10 weeks, I can definitely say that I am competent and able enough to create digital content. I am looking forward to what's ahead for the next term.

I feel that I need to hone my coding skills more, especially on integration of new web development technologies. I need to gain more knowledge on SEO, responsive design and designing for mobile. Practicing more on coding and reading more about these concepts will be a big help.

---

REFERENCES:

Anon. Kerixa Inc. Different versions of HTML. California. 20 December 2019. http://www.codefreetutorial.com/learn-html/76-different-versions-of-html

Anon. Bit Degree Learn. HTML5 sematic tags: what is semantic markup? Updated 1 October 2019. Visited 20 December 2019. https://www.bitdegree.org/learn/html5-semantic-tags

Ceym Eygi. Free Code Camp. 7 important tips fro writing better CSS. Posted 29 Septemeber 2019. Visited 20 Decemeber 2019. https://www.freecodecamp.org/news/7-important-tips-for-writing-better-css/

Anon. MDN Web Docs. Handling common javascript problems. Posted 24 November 2019. Visited 20 December 2019. https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript

Anon. W3 Schools. Angular JS Animations. Visited 20 December 2019. https://www.w3schools.com/angular/angular_animations.asp

HINUHA CREATIVE REFERENCES:

Parallax Effect: https://www.youtube.com/watch?v=d34GsFz-HkY

Navigation Bar on Scroll: https://www.w3schools.com/howto/howto_js_navbar_slide.asp

User Testing Session: Designing for the elderly

The tourism industry is growing at a fast pace, and so is the digital market. More than 80% of holidaymakers start their research through the internet. This is why it is important for travel authorities and agencies to have a well built travel website.

It is also recorded that older people travel more and more over the years. According to the Irish Times, the number of Irish travelers from age 60 to 69 has tripled from 2000 to 2006. The same is true for those aged 50 years and over with 1.9 million trips in 2005, which increased to 3.5 million in 2008.

This implies that websites should be built in a way that the needs and wants of the older demographics will be met.

USER TESTING

When designing a product, it is important to understand the users in terms of their demographics, abilities, restrictions and limitation as these are factors that will affect the way they interact with the product. The way to do this is through user testing and research. As I am tasked to redesign the VisitDublin.com website for an older demographic, one way to understand my target client's wants and needs will be to allow them to interact with actual travel websites. Doing this will help me, as the designer, to establish a clear picture of my user and create design decisions based on these information.

For the purpose of testing, I have asked a friend of mine to test three travel websites. His name is Dan, a 43 year old college professor who is fond of traveling for work and leisure. I have created a set of guide questions based on the UX Principles prior to the testing to guide me through the research process. These were asked to the user through a one-on-one interview after he tested all three website.

Below, I have listed down the strong and weak points that Dan pointed out during the session. These information were collated and used as the basis for creating design decisions for the elements to include in the new website.

1. BERMUDA TRAVEL AUTHORITY (www.gotobermuda.com)

The GoToBermuda.com website is the official tourism information website of the Bermuda Travel Authority. It features a clean layout and useful information for tourists traveling to Bermuda.

Browsing through, the first thing Dan noticed was the typeface used in the entire web page. The title fonts are stylized but not overwhelming. The body font is a simple sans serif typeface which is easy to read, though there are elements where the font is too small to read. Text alignment is centred and is consistent on the entire page. This is important because older people tend to have their vision fixed on one direction due to changes in vision.

The colour palette is cohesive all throughout. It opted for a dark blue and turquoise shade which is very soothing to the eyes, but may cause issues for the older users as blue tones can be hard to perceive due to vision changes. The photos used also adhered to the colour palette. Dan said that looking at them all together is very refreshing to the eyes as all the elements are cohesive all throughout. Overall, Dan feels that the website looks aesthetically appealing.

Navigation and accessibility wise, Dan said that that the amount of buttons and interactive elements on the page might cause confusion. Although everything is properly labeled, he feels that it would be more user friendly if the options and buttons can be reduced in number. The hierarchy of the options is also well laid out, putting the most important at the top of the page, going down to the least relevant.

The hover effects are stunning and so is the use of looped videos on some of the pages. The special effects are also consistent on the entire website.

The website is also optimized for mobile, which makes it more marketable as most users, even the older generation, utilize them. Again, like the desktop version, the typeface needs to be bigger and bolder for improved accessibility.

In summary, Dan thinks that the website is aesthetically appealing and the lay-out makes it senior friendly, although slight improvements can be done with the text size and colour palette selection.

2. INSPIRED BY ICELAND (www.inspiredbyiceland.com)

InspiredByIceland.com is the official tourism information website of Iceland. It features a simple aesthetic and is filled with useful information for tourists.

What caught Dan's attention upon seeing the homepage is the use of blank space in between sections. He feel that this is important particularly for the older users as it allows for the information to be introduced one after the other with breaks in between. This prevents confusion with the contents, which is important as older users can have cognitive difficulties.

He also liked the way the navigation bar on top was made. The options are very straightforward and it summarizes the contents of the entire website. The use of the menu button on the upper right hand corner is also a helpful tool to navigate. When clicked, a drop down menu will appear with the list of all the pages in the website.

Photos are very minimally spread all throughout the pages which he believes is appropriate when designing for the people of his age and older. The font style and size are big and bold enough to be read. The colour palette used is very simple (black, grey, white) yet sophisticated. Overall, the website is beautiful aesthetically.

The mobile version is as user friendly as the desktop version. Again, the text size are big and bold enough to be read, although for some buttons, the text might be too small.

Overall, this website meets the needs of senior users in terms of content, functionality, and desirability. Although some elements in the mobile version can be improved, Dan fells that the overall look and feel of the website was well designed.

3. NEW ZEALAND (www.newzealand.com)

The Tourism New Zealand website www.newzealand.com is the official tourism website for New Zealand. It features information that is relevant to travelers who are thinking about and actively planning a visit to New Zealand.

Through this site, potential visitors will be able to learn about the diversity of what New Zealand has to offer and how to make their visit a fantastic experience.

Upon opening the website, you will be greeted with an option asking whether you are a visitor, a student, investor, or a potential migrant. Dan was delighted to see this as he thinks that this is important so that the website can provide users with the most appropriate information for your visit.

On the travel home page, you will be welcomed with images of famous sceneries across the country. The navigation offers straightforward menu of the destinations and things to do. Hovering over these options will show you further options and links to useful information. Dan thinks that this kind of information presentation is important particularly for the older population as it gives them a brief idea of how the website can be useful for them.

The lay out of the images is also clean and not visually confusing. The colours used are the same as the Inspired by Iceland website, which are almost neutral. The fonts are sans serif and are big enough to be read. The button labels are clearly labeled.

The navigation map is easy to follow. The steps to go from one task to the other is easy enough for old users to carry out. For instance, the Things to Do section takes about two steps for the user to arrive on an actual activity information page. Dan agreed to this and even verbalized that 'the easier he gets to his goal, the better'. It also offers recommendations for trips which can be a helpful guide for seniors on making their holiday trip on their own.

The mobile version is also as simple as the desktop version. They layout was tailor made for the buttons to be tapped easily and for the information to be read clearly.

Overall, Dan feels that this website addresses his needs as well as the older users specifically navigation wise. He feels that, among the three websites, this is stronger in terms of accessibility which makes it easy to be utilized by the older demographics.

SUMMARY

All three websites are designed to meet the needs of the older users. While each of them has strong and weak points, it is clear that all of them has taken into consideration the characteristics of the users of all age groups. Elements such as text size, font colour, image and informaton organization, and colour selection are important aspects to consider to ensure that the website will appeal to the older generation.

Take a look at the screen recording of Dan's User Testing Session here.

In-depth review of the VisitDublin.com website, recommendations, and improvements

The VisitDublin.com is the official tourism information website of Dublin. It is developed and maintained by the Fáilte Ireland, the National Tourism Development Authority. The website serves as a guide for tourists on how to go around the city, which shops, restaurants, and pubs to go to, and the latest happenings in and out of town. While the website is filled with information tourists need for their visit, the overall look and feel of the website may not appeal to some users, particularly the older demographic.

The design brief asks for the website to be re-imagined to target all age-groups, specifically the older users. They have found out that the primary users are aged 30 years and below. While many tourists fall on the said age group, the client feels that the older demographic is as important. Missing out on this group users can cause serious losses business wise especially because majority of the holidaymakers who visit Dublin are from age 45 and above (44% in 2018, according to fáilteireland.ie). As a UX designer and developer, my task will be to re-create the website to promote inclusivity across all age groups. The first step is to assess and review the current website and list down its strong and weak points. Identifying these is important to know which areas should be changed and which aspects can be kept as is.

As a guide I will use the UX Design Principles for my review. I will also look into its competitors, list down their strengths and weaknesses, and pin point elements that can be adapted to the new website.

USEFULNESS

As Dublin’s official tourism information website, the VisitDublin.com is a useful tool particularly for tourists. From places to drink and dine, to the activities and places to visit, the website offers substantial amount of information for first time visitors. Overall, the website is highly valuable as it serves an important purpose for tourists.

USABILITY

While usefulness pertains to the overall value of the product, usability refers to how easy it is for the users to accomplish the tasks associated with the product. The VisitDublin.com is packed with useful information laid down into different categories. This is important so that users can have an organized user flow, with information grouped and laid down one after the other. This way, the users will not be confused and lost in the website. This is particularly true when you navigate through the home page, where the information presented for ‘Insider Tip’, ‘What’s on in Dublin’ and ‘See and Do’ sections are well organized, but the amount of information shown can be overwhelming for an older demographic. I feel that these sections can be simplified. Older people have declining cognition and so, information has to be presented one after the other to avoid confusion.

DESIRABILITY

Overall, I feel that the website is desirable enough in terms of its design aesthetic. However, for the older users, the amount of information and details on some of the pages can be overwhelming and confusing. Simplicity is key. Visually stimulating elements can be attractive for younger users, but older users prefer a much simpler, straight forward layout.

Furthermore, the selection of colours need to be thought about as it affects, not only the aesthetic value of the product, but also its usability.

FINDABILITY

In terms of finding information, the overall layout of the website, where information are clustered together in categories, makes users find information easily. The search bar at the top of the page is also an effective tool to address this concern.

ACCESSIBILITY

Perhaps the most important UX design element when we talk about the older population is accessibility. It is defined as the practice of building digital content that can be used by wide range of users including those that have visual, motor, auditory, speech or cognitive disabilities.

Overall, the website is accessible enough for most users particularly the younger ones. For older users, however, I feel that there could some slight improvements that can be done to cater this demographic. For instance, the text size for some of the elements. There are parts of the website where the type size are too small and hard to read. Older people can have deteriorating vision, which is why type readability is of utmost importance for the product to be usable for the older users.

The website also used a low contrast colour palette. Older people have a tendency to loose color perception, especially the blue tones. The website used a lot of blue tones and low contrast colour shades in some interface elements which can be difficult for the older users to perceive.

There are also parts of the website where the elements are too small for older people to interact with. Buttons, in particular, have to be big enough to be easily tapped in order to aid on the decline of motor function among these users. Surprisingly, studies have shown that there is an incline in the use of mobile devices, specifically tablets, among the older generation. This means that to target them, the website has to be optimized for mobile.

Cognition and memory also decline as we age. Going through the website, I appreciate the way the page title is showing on every page as you navigate through. This way, the users know where they are and how they can come back to the previous page.

Overall, usability wise, I think that small details on the website can be tweaked for it to be more accessible for the older population. Elements such as text size, colour contrast, and button size can be improved to increase user satisfaction.

USER TESTING RESULT

As part of the process of redesigning the website, I have asked ask an actual user to test the actual website to get a feedback as to how it could be improved. Alongside two other tourism websites, I asked Dan, a 43 year old college professor, to review the website. Overall, he find the website useful and visually appealing. He said that minor alterations can be done to improve accessibility which include typeface size, contrast, and navigation features. He feels that content wise, the website provides ample information for young and old tourists.

Click on this link below to access the actual testing session done with Dan.

RECOMMENDATIONS

Based on the testing sessions done with an actual user, listed below are the recommendations for redesigning the Visit Dublin website:

• The typeface style should be purely sans-serif and must be bigger for readability. Due to vision changes, older people appreciates fonts that are bigger and bolder.

• Navigation should be simple enough for users to go from one point to another without hassle. Steps to navigate from one page to another should be less, with buttons and hyperlinks clearly labeled to avoid confusion.

• Use high contrast colour palette. Colour perception changes as we get older. Blue and violet tones can be hard to perceive, therefore, the use of these colours should be avoided.

• Balance the use of negative spaces. Negative spaces play an important role in separating one element to another. This is important especially for older people, not only for readability purposes, but to aid in cognitive difficulties.

• Make things easy to click. Buttons that are bigger and far enough from each other will aid in accessibility, as older people have problems with motor coordination.

IMPROVEMENTS

Based on the recommendations, a high fidelity prototype was made for VisitDublin.com. Please click on this link to access the prototype.

The prototype was then tested by Dan. A few questions were asked after the testing, wherein he gave suggestions for improvement. He verbalized that the old website was already good enough, but he was happy that the redesigned version obviously focused on improving accessibility. He pointed out that the contrast, hue, and colour saturation was more attractive than the old website. He also complimented the use of pop-ups instead of opening another page for links. The lack of scroll bar makes the prototype hard to navigate but it was explained to Dan that this is an issue with the software used to create the prototype. Nonetheless, Dan was satisfied with the output with minor changes for improvement.

The testing session done with Dan can be accessed through this link.