This blog will display the developmental work of my website as well as the in class work that was done throughout the course of this semester.
WEEK 1
QUESTION 1(b)
During class, I learnt about UI and UX in regards to web design.
UI or User interface refers to the human-computer interaction and can be described by a user interacting with a computer mouse, keyboards and other output devices. Additionally, it also mainly used to describe a user interaction with an application or website.
UX of User Experience refers to the experience a user has by interacting with the user interface and product overall. This term is also used when describing and undergoing user testing for applications and products.
During this first week, I started to more comfortable with the terms that were explain, as I was already familiar with them from previous classes. Although this was the case, it occurred to me that this assignment might explore more about UI and ensuring that the user could consume the information shown efficiently and focus less on the actually design and look of it.
This was what I started to think about after we were shown multiple websites in which the user was allowed to manipulate the font size, cursor size and large number of things. This was particularly interesting to me because, I hadn’t thought about things like this before when designing websites and apps. Furthermore it made me realize how important it was and how it can drastically affect the user experience for a lot of people, especially individuals who don’t use computer devices daily and who may have physical issues hampering them.
During the time we were shown how important website accessibility was, the lecturer explained the main points that websites have and we were asked to show some of our favorite websites.
The lecturer explained that the most important aspects that a website should focus on are informing the user, teaching the user, stimulating the thoughts on topics, initiating debate and to motivate the user.
This was done by the League of Legends website, just by the user scrolling down the home page.
As the user scrolls down the website they are informed about the many League of Legends related things. Furthermore something that I noticed during my visit throughout the website was the amount of the “Play now” or download prompts and buttons that scattered around the website. This was placed because the website is trying to convince you to download and play their game, and as soon as the user is convinced they would not have to even scroll to find a way to download the game.
Furthermore right on the homepage, a videoclip of the game is shown to give the user a good idea of what the website will be about. Secondly, I noticed that the website was specifically targeted towards a specific demographic. This is further reinforced by their choice of characters that they displayed and had showcasing the game. As this was brought up the lecturer then explained methods by which web designers utilize information on their user demographic to create an end product better suited for their users.
We then looked at bad websites and came across craigslist. This website design appear to be all over the place and would confuse the users and as a result would increase the time spent on their website out of frustration. All the text looked the same and there were hardly any forms of distinction to grab the user’s attention.
Although their design is lacking they appear to support various languages on their website and even had an event calendar which is some thing many websites don’t. Secondly, they did not appear to have anyways of switching the contents of their page to match the size of the web browser.
Some websites are visited more than other because of their good designs which are simple, straightforward and allow users to get to where they want to without any hassle at all. A website like craigslist may have all the information and elements needed but it doesn’t have any incentive to visit or stay on the site because of the fact that there is no visual elements shown to the user. Whereas with amazon, the user is bombarded with multiple images of products, and additionally everything is laid out clearly, and make the user feel in control.
WEEK 2
User persona – a fictitious character created to be the ideal user for any product, brand or content.
During this week, the lecturer gave us the assignment and had us in groups to think about issues that are impacting young adults. Our group decided to focus on social media as our website choice. I found out that their are some general things that must be followed when creating a user persona such as:
Utilizing these rules my group created three user personas for our website, whilst also keeping in the the topic of social media affecting young adults.
After creating these user personas, I started to focus on how my website would look like. We were then asked to design some of the main pages of our website based on the user personas we had previously created keeping them in mind and ensuring to align our website their pain points and goals.
I decided to create a website similar to the League of Legend website that was previously shown because I liked the way that they allowed to show the user a large amount of information without them doing much and clicking around. I also attempted to create a sort of forum like design for the homepage, allowing the user to find popular article to view right as the are on the website. Secondly, I tried to integrate a drop down design on the learn more page, where the user would either hover or click on their interest and find related information on that topic.
Furthermore, we learnt about CTA or a Call to Action, which is as it name implies, is something that the user can interact with such as download button . This is usually the homepage and this is where the heaviest point of emphasis is located on a website.
The image above shows a CTA sketch attempt of a museum website. In this sketch, I tried focusing on a picture which has a dropdown button that gives the user more information.
In this sketch I drew an article on the homepage where in which the user has a button that they can click which would then direct them to the full article.
We also learnt about ATF or Above the fold which refers to the first thing that the viewer sees as the enter the website.
WEEK 3
This week, we used a website that gave us a free domain for lack of a better term that gave us a way to share our local website coding online for other to see by utilizing our specific domain direct URL link.
This was done with the aid of an application called FileZilla which allowed us to upload our files, which would then be directly link to a website.
Additionally, we started doing our first coding, in html. Furthermore we were instructed to create dedicated folders for our work, to ensure an easier time coding and to prevent any mismanagement. As this was the case, we were instructed to create a new folder for every week.
I had some knowledge of coding because of a previous class, so during this class I tried to remember and use this session as a way to refresh my memory. In html coding the use of “<>” is used when declaring something. The code must be then ended with “</>” so that he program can establish that this specific code has been ended. the <html> at the beginning is used to tell the program that this file is running like an html. This is also reinforced when saving the file by having it ending “.html” so that the file knows how to open.
There are certain key words that tell the program certain thing, for example the “href” tells the program that you are trying to add a link. During this class, I started feeling a bit more confident about coding as I felt as though once i knew some of the key words, it would become easier to get my desired design, when I would start coding my website assignment in the future.
WEEK 4
During this week about a different way to source our images when coding. This method involves creating an image folder within the “WEEK” folder next to the html. Afterwards, we would then source whatever image we needed through the image folder by using the following, “img/image.png”. Utilizing this method allowed for a cleaner work space and made the coding process much faster and less stressful.
WEEK 5
During this week, we used FileZilla and other applications to allow our websites to be seen publicly utilizing the website address.
We also learnt about adding audio and different ways to size our images in order to make them viewable on different platforms.
We also learnt about how to add signs and symbols to our websites, such as the copyright sign. By learning this it would allow our websites to appear more authentic and professional.
We also created another file where we wrote our code but spaced out the elements using the <br> tag, this would allow our website to appear less jumbled and well placed out so that the user would able to understand and absorb the website’s elements without much confusion or hassle.
WEEK 6
During this week we explored further about “CSS” or cascading style sheets. This type of coding would be our primary form of styling for out website, which would include the colors, spacing and everything else. In a nutshell it is similar to that of interior designing, whilst the actual creation of the house would be similar to html. One important thing that was stated was to ensure that all files are linked properly. This would be crucial to note as we would create a CSS folder and file to correspond with the html file, and in turn would allow for a cleaner and more streamlined workspaces.
One thing that was interesting was that when writing CSS, we would close our code with curly brackets {} instead of the usually <> and </>. Additionally, I noticed that the coding that I wrote would not be implemented unless I used, “;” which was another interesting thing to note. CSS coding appeared to be more clearer to me because I could have written exactly what I wanted whereas in html, the coding seemed less error friendly because of all the different things that I needed to add.
We then delved deeper and added more areas in the html code such as sections, figcaptions and meters. These sections helped us, as the name implies section off areas and could be described as rooms in a house.
In the image above we utilized inline styling, which is simply adding CSS in the html file instead of a dedicated file. Additionally the image above also shows how specifically coding things can change the results, this can be seen where the heading one “Digital Aid” was specifically given the style line to change its color to blue. This code as a result will only allow this specific heading one to have the color blue whereas the others would have their assigned color as pink from the the style coding in the <head>.
WEEK 7
During this class, we learnt about <div> and how to create lists. These <div> are in simple terms would be drawers or containers inside a room. These would allow for a more orderly system as they can have names that would make styling them in CSS easier.
When creating multiple <div>, we can assign a name to each of them as can be seen in the image above “el” which would allow us to style all of the elements.
WEEK 8
During this week we learnt how to use flex boxes to adjust the contents of our websites.
WEEK 9
In this week we explored further about flex direction and how to format a website if a user might adjust the web browser. Additionally we explored how to create a floating menu.
The coding from the CSS allows the elements to be placed in column like fashion, which would then change their positions to accommodate for size changes of the web browser. This is accomplished by using the @media (max-width) code, which would make the position changes based on the numbers added in the (max-width: ) code which are the width of the web browser. Additionally, the floating menu is designed to always be visible and would stay with users as they scroll around the site.
Afterwards, I did another website where I would implement the hamburger menu this time and additionally add a links to images that would redirect users to other sources after clicking it.
WEEK 10
During this week we learnt about client servers. This was used by us where we request and receive a services from the host, which would be the Vista panel. We then created a form and added information into a contact form database server.
Using the vista panel, we then went into the option that allowed us to create databases.
We then learnt about JavaScript and additionally about how we can implement it into our code. The java script that we wrote would be put into its own dedicated file, and as a result, needed a folder for itself. This resulted in me having to link the file and its folder to my html file.
The <span> code helped us block out large amounts of text, as to not overwhelm the user then I utilized the <button> code along with some java script code to allow the user to click a button that will then show additionally text.
QUESTIONS
1(a) Purpose of different digital content systems
A digital content system is any device that allows users to gain information or any output after adding inputs into the them. Furthermore these systems usually share digital content which can be in the form of videos, images and text. Examples of digital content systems include:
- Computers- Personal computers or Desktops are hardware systems that gives users access to range of different sorts of information, that may have originated from books, videos, reports and the like, with little to no waiting time at all. Furthermore they also give users access to various forms of entertainment and communication and ecommerce. Computers usually have GUI in the form of operating systems that enhance the UX and overall efficiency for users when completing tasks.
- Hand held devices (Phones, Tablets) – These devices fall under the category of them being very light and portable. Phones and tablets for example are small scaled computer devices capable of doing all the general things desktop computers can, only they have heavy emphasis on being an “on the go” device. This is especially prevalent with phones that have a data services which allows users to gain access to internet services with out being connected to a specific modem or router. They also have built in UI features that work together with their digital content system such as the auto rotate feature.
- Televisions – Televisions use their large screens and speakers to engage users with their main form of their content being visual. They showcase television programs that range from informative, entertaining to educational. Additionally they are also utilized as a great way of marketing and advertising products, events and services. There are also Smart TVs, which are the more recent and widely used television that gets users access to the internet and various streaming services such as Disney+.
- Game Consoles – They are specialized computers made for videogames. These devices are come restricted in what they can do but they main purpose serves as a great form of entertainment and to some extent communication. Their feedback mechanisms are mainly visual and audio and they also have a lot of support systems to aid their users in their experience.
- Smartwatch – They are devices that can be worn and are usually used similarly to watches. There main purpose serves as a device that would greatly increase your exercise experience. Their purpose are giving information and additionally productivity and communication.
What is the purpose of my website?
I am passionate about web site development because I like turning the ideas that a draw and brainstorm into something that people can engage with and learn something from.
The purpose of my website is to inform users about the dangers and affects that social media can have on a person and additionally try to educate users on ways to minimize or stop social media’s effects on them. Lastly I would like my website to stimulate discussion about the issue for many other individuals who may have not even visited my website.
Company description –
We are “The Link”, a website that focuses on bringing to light the issues and impact that social media that have on young adults and to a larger extent the younger generation. Our goal is to educate users on what exactly social media is, how it has affected society and the younger generations and how you can be more aware of its impact on yourself and those you love.
Target Audience –
Ages 18 – 29
This age range was chosen as the primary target audience because, I believe that they would be able to better internalize, relate and reflect on the information that The Link shares with them. Although this is the case, we also expect that individuals outside this age range would also be likely to visit and as a result we would like to cater for that as well.
Website goal –
To inform users about the impacts of social media on young adults and the younger generation and to also stimulate discussion and awareness about this issue.
Website Overview –
- The Link website will include the following:
- Logo and website branding
- Home page/Index page with navigation
- Contact page with a form for users to subscribe to get more updates and info from The Link
- Content page on how social media has affected a whole generation
- The website includes the use of HTML, CSS, and JavaScript to create, style, and position interactive digital content, to produce functional prototypes
Will demonstrate the use of dynamic content creation using PHP and in a MySQL database in a functional prototype. - Will have code and media uploaded to a live web host
- Will be built from scratch.
- Usable on two devices (Computer and Mobile Phone)
Objectives –
We will educate users on what social media is, the different ways social media has affected young adults and how users can prevent social media from affecting them.
Additionally,
Our site will include a fully completed brand design throughout the website and the use of flexbox for users who adjust their web browsers which other sites may not have. We intent to have a website that makes it easy for users to consume our content.
1(b) Evaluate the brief (Cont’d)
After viewing other sites, I decided to take not of some of the things that they implemented in their website.
One of these things were the use of the this website’s CTA, as shown in the above image. They used buttons and indications and placed them in easily accessible places for the user.
Additionally, the website’s use of white space allowed for them to not overwhelm the users while also having all of their relevant information. I think that this use of space will be something that I should possibly implement because of the amount of statistically and written information that will be on my website. Furthermore the League of Legends website delivers there information in a vertical fashion and as the user keeps scrolling down the website the more information they are given and as a result the more they understand. I think that this is an interesting way of delivering information to the user as it allows them to consume information at their own pace.
Furthermore, I looked at websites that would be similar to mine and tried understanding how they placed their content as I felt as that would be the most important thing on my website because I would not only want my website to look good but I also want it to be designed perfectly to where the content on it would actually be able to be consumed and not overlooked.
I felt as though Helpguide placed their content in such a way where the content being given would always have context. I also liked how their website design did not outshine the actually content of the page as shown in the image below.
The designer made their website design more important that the actual content of the page and as a result of this, users may have a hard time finding the information that they want, if they stay on the website long enough to search that is. This website has no structure and flow and just appears to be a convoluted mess. Although that was the case I made sure to take note of this website and made sure to keep in mind the importance of a Visual Hierarchy and how it can relate to textual content.
Lastly as most of my content on website would be text based I made sure to take note of websites that used UI Engagement to allow the user to be more invested and interested in the information being given. This would be in the form of images and videos, and consequently these methods could actually be used to deliver information in various ways. An example of this may be a user skimming through a website and then comes across an image summarizing of showing the formula of information that was explained in the previous paragraph. This is seen in the image below used by a website. Most users using that website may have already understand what is being explained here before even reading the paragraph just based of the title of the section and its complimenting image.
After viewing all of these website I decided that I would utilize a lot of the methods that they did because in visiting these websites and using them as a normal user would I found that I was able to understand a little more about the concept behind their website. Some websites, like the previously mentioned League of Legends, designed their site in such a way to convince the user to download and use their products, similar to an ad. Other websites like Make of Us, had more of an informative side to them and as a result their website was clear and focused more on putting an emphasis on the information and designing their website for that purpose. I think that my website should be more in the middle in terms of these two design concepts because of my target demographic that I have in mind. Furthermore more i feel as though using more graphical methods as in the League of Legends website will help me share content with users better and as a result will aid me in achieving my goals and objectives. Although undertaking this method might make the coding more difficult and the use and knowledge of more JavaScript and CSS will be needed.
1(c) UI Principles of my website
The UI or User Interface is place where communication and interaction between human and computer meet. This can be in the form of screens, keyboards and operating systems. Furthermore, this can also include how a human interacts with websites and applications.
There are many different forms of UI such as Graphical UI (GUI) and Voice controlled Interfaces (VUI). A GUI are things like a computer desktop and VUI are things such as Siri or Alexa.
The main things that my website will focus on are education and information based on my chosen topic. Even though this is the case I have decide that I will experiment and utilize different UI principles in the attempts to engage users and to furthermore allow them to understand the information better than if they were to visit a site similar to mine. Some of the UI Principles that will be on my website are:
UI Consistency – I want my website to look the same throughout as to not confuse users and also allow them to have faster access to information.
Visual Hierarchy – I am going to use this to create a structure and flow in my website, especially on the homepage because I want to give the user a reason to stay and actually use my website.
Feedback Mechanism – I will use this as a means to further engage user in my website and additionally use this as a means of sharing information in a different way.
Simplicity – I want all the functionalities and design or my website to be simple and clear so that users will have a more enjoyable time using my website. Furthermore by doing this, it will allow for information to be transferred over to users more smoother and effectively.
Experimental Adaptivity (Two devices – Computer and Mobile phone) – I want my website to be able to work on different devices so that I can further cater to different users and make my website more flexible.
1(d) UI Elements and Features
Navigation – This refers to features that allow the user to get from place to place within a website. Examples of this are menus, hamburger menus and scroll triggered. The main purpose is to ensure that users don’t get lost when on a website and it furthermore makes the gathering and viewing of information much more efficient for users.
Communication – These are usually in the form of text, imagery and video and serves the purpose of giving users information and keep them engaged and interested. Some methods if don’t correctly can connive a user of the content you are sharing with them.
Input – These are triggers that when interacted with gives an outputted result to users. These are usually buttons, forms, drop down lists and error handling. These are put in place to guard against human errors and compensate for that. n example of this would be showing a message if wrong information is entered. Furthermore this UI element is very prevalent in mobile apps, where loading screens and visual or audial feedback are given after the user does something. This makes users feel as though they are actually doing something and can greatly improve upon UX.
1(e) UI Elements and Digital
Some devices rely more on certain elements than others, as explained before. An example of this would be on gaming systems where the user is prompted whenever anything happens by use of sound and visual messages. This is also seen on computers that used the Windows XP operating system where a sound along with a message is put on whenever there is an error or something the user cant do right now. Additionally, this may be in the form of features such as a phone’s auto rotate function that helps the user gain a larger surface area on their device.
DEVELOPMENTAL WORK – Brand
The first thing that I did during the developmental phase was start brainstorming and creating my website’s logo and brand. I wanted my logo and brand to fit the theme of my website and as a result I decided to use colors like green , red and white to give off a natural feel. I really wanted the user to understand what the website would be about just based off the logo.
I used the red and white colors to create an icon within the logo similar to that ones that are seen on hospitals because I wanted to play off this theme as an internet hospital of sorts. Furthermore I used san serif fonts to give a modern feeling to the logo and website. Additionally I also created a mini logo that I planned to use as on the mobile version of the website.
DEVELOPMENTAL WORK – Sketches, Wireframe, Logo and Brand revisit, Prototype
Afterwards I started creating sketches of my website whilst also trying to keep in mind all of my inspirations and methods that were used my other websites.
I tried keeping my website design clear and have the content on my website flowing in a vertical direction.
Whilst creating the wireframe I made sure to add as much of the elements that I might possibly want to add and furthermore made sure that I placed all of the elements in areas that would make the visible and have space.
During this time, after some looking at some other websites that focused on similar topics as mine, I decided that I wanted to change my brand. I felt this way because my brand felt bland and eerily similar to other websites and as a result I decided to change my brand. In doing so, I kept in mind my target market and focused on building my website and brand based around them and I additionally kept thinking of interesting ways of delivering my content to my users.
I decided to use the above design as my logo as I felt it matched the content more than the previous design. I also decided to use this design because it was more versatile and scalable than the previous logo, so it would match whatever background color or scaling.
In this phase, I focused on adding as much content and design to the prototype as possible, in the hope of making less to no changes during coding. I utilized the standard Arial font and the Times New Roman font because I knew that these fonts would be available on most devices. Furthermore, I used colors that where similar to my logo in order to have general consistency throughout the website and that would not throw off the user’s flow whilst they were using the website. Furthermore I made the design as simple as possible to compensate for the lack of my coding skills and knowledge.
Secondly I used the vertical scrolling design that was present on the League of Legends website alongside most social media applications because I wanted to cater to users and allow then to move at their own pace. I also used this design because I wanted the website to be usable on mobile devices.
I created a storyboard from the prototype showing where all of the buttons and navigation would lead the user. I tried to make the ways of getting to where you wanted very easy and straightforward.
I started coding and used a basic template that we had created during class as my starting file. I then made a dedicated folder with all of the necessary folders I would need and renamed the template file to index.html.
I then made some .html of the different webpages that I would be adding.
The first set of coding I did was adding the header and nav bar. This part of the coding was the most frustrating part because I wanted to add a flex box to the header which resulted in the nav bar and logo pushing out of the div and as a result stretching the website and gave it a horizontal scrolling bar. I ended up getting this part to work after searching on website like stackoverflow and w3schools and referenced some of their code.
During this time I realized how important CSS and declaring id and class was after many attempts at getting the nav bar to size down.
I decided to use the drop down menu feature as my choice for the nav bar as it gave the design a more simple and clean look.
I also used this because I felt it would allow users who are on mobile devices to have an easier time navigating my website as the drop down menu would be something that they were familiar with.
I then started to add the footer, which was meet with the same frustration as the header. The footer seem to have more problems than the header did, which resulted in me having to get smaller images for my links, switching the position of elements in and out of divs and spending a large amount of time in the CSS file. I then found that I was using too much padding and margin for my elements which resulted in them pushing out of the footer section visually. I also had trouble with flex and inline flex as those would change the position of the footer elements and resulting made the footer wider that it should. As all this was the case I decided to go on different websites and use the inspect feature on google chrome to look at how their footer and header where coded.
After comparing my code with other websites and looking at websites like the aforementioned stackoverlfow, I managed to fix the issue.
I also utilized the @media screen code in the CSS in order to make my website usable on mobile devices.
Afterwards I added a section tag to under the body tag and started adding some code. I added loreum ipsum text in the sections where I would need text to see how the website would look during the time I was coding. Additionally I had copied some flexbox @media code in my CSS file in order to see how the website would look scaled down, but I later removed it because it made things to confusing to work with.
I made sure to class all of the divs that I know I would be using because I wanted to have control over all of the elements that I would add.
Furthermore I also added a video from YouTube to the home page using the iframe code. This video had scaling problems and as a result of this I need to add the video div to the media screen in order for it to be scaled alongside the website.
I then started coding the content page and I used most of the same code that I had added in the home page.
I used java script for the most of the buttons throughout the website and had them link to other sources to gives users an easier way of finding more information correlating to my website.
This page would have a form for the users to fill, so I created a subscription for them to sign up of more information form our website. This form was made with HTML CSS and PHP. The form information would be uploaded to a table on my website host, which I would then be able to check.
I would then add an “a href” code that would allow the user to be redirected to the home page after fill out they form.
Afterwards, completing the website I felt as though something was missing, especially from the home page. I then took inspiration from one of the websites that I had been researching throughout the duration of this assignment and make something similar to what they had done.
I added a gif, my website’s logo and a button that would redirect the user rot the content or social media page.
I also added some more text with a title that would change color as after the user scrolled a certain amount of pixels with the help of some java script.
Furthermore, added some buttons throughout the content page section that would help users get back to the top, in hopes of increasing their user experience.
I then added a gif background and lowered the opacity on the section to give the website more immersion and add to the UX.
Lastly I added meta data, but after uploading to FileZilla and testing, I was unable to find my website on online
Here are some images of the website on different devices:
After completing this assignment, I was surprised at how it turned out, although I felt as though I could have done better. I felt as though I should have added more content throughout the website especially in the content page and about us. The concept and design of the website was good, but in the future I think I definitely need to spend more time thinking about what type of things I would actually want added in my website. After finishing this website, I learned about how many different things that can be added in CSS and HTML. I additionally found that the vista panel and PHP was very interesting and it gave me great insight into how some of these website that I use daily might operate. I found the JavaScript the most interesting thing out of all the coding because of the amount of interactable elements that could be added.
REFERNCES
Albano, A.M. (2021). Is Social Media Threatening Teens’ Mental Health and Well-being? [online] Columbia University Irving Medical Center. Available at: https://www.cuimc.columbia.edu/news/social-media-threatening-teens-mental-health-and-well-being.
Amazon (2022). Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs & more. [online] Amazon.com. Available at: https://www.amazon.com/.
Assistant Secretary for Public Affairs (2019). User Interface Elements | Usability.gov. [online] Usability.gov. Available at: https://www.usability.gov/how-to-and-tools/methods/user-interface-elements.html.
Avison, Mercado, P., Mia (2022). 7 Easy Ways To Detach Yourself From Social Media. [online] Bustle. Available at: https://www.bustle.com/life/144893-7-ways-to-stop-your-social-media-addiction.
Calligaro, R. (2015). [GREEN SCREEN] Windows XP Error – VIRUS ERROR ☢ – FOOTAGE – SOUND. [online] http://www.youtube.com. Available at: https://www.youtube.com/watch?v=vS43ZgcQ_hE&ab_channel=RiccardoCalligaro [Accessed 1 Aug. 2022].
Clark, M. (2020). 40+ Frightening Social Media and Mental Health Statistics — Etactics. [online] Etactics | Revenue Cycle Software. Available at: https://etactics.com/blog/social-media-and-mental-health-statistics.
College of Computing & Informatics. (2021). Digital Content Management Industry Overview. [online] Available at: https://drexel.edu/cci/academics/graduate-programs/digital-content-management/.
craigslist. (n.d.). craigslist: venezuela jobs, apartments, for sale, services, community, and events. [online] Available at: https://caracas.craigslist.org/ [Accessed 1 Aug. 2022].
Dalomba, F. (2022). Social media: The good, the bad, and the ugly. [online] http://www.lifespan.org. Available at: https://www.lifespan.org/lifespan-living/social-media-good-bad-and-ugly.
Financial Marketing and Technology Services. (2019). UI Design Spotlight: Exploring 7 Types of Navigation Menus. [online] Available at: https://www.gate39media.com/ui-design-spotlight-7-types-of-navigation-menus/.
Frontiers (2014). Frontiers | Peer Reviewed Articles – Open Access Journals. [online] Frontiers. Available at: https://www.frontiersin.org/.
GeeksforGeeks. (2019). How to create an HTML button that acts like a link? [online] Available at: https://www.geeksforgeeks.org/how-to-create-an-html-button-that-acts-like-a-link/#:~:text=Using%20button%20tag%20inside%20%3Ca [Accessed 1 Aug. 2022].
IoT Agenda. (n.d.). What is a smartwatch? [online] Available at: https://www.techtarget.com/iotagenda/definition/smartwatch.
Ivanov, K.B., Zlatin (2022). How does social media affect teenagers? Understanding the mental health impact — and why it’s not all bad. [online] Insider. Available at: https://www.insider.com/guides/health/mental-health/how-does-social-media-affect-teenagers.
Lin, Y. (2022). 15 TikTok Statistics Marketers Need To Know (2022). [online] Shopify. Available at: https://www.shopify.com/blog/tiktok-statistics#:~:text=Here [Accessed 1 Aug. 2022].
Lutkevich, B. (2021). What is Social Media? [online] WhatIs.com. Available at: https://www.techtarget.com/whatis/definition/social-media.
Miller, K. (2022). How TikTok is affecting your brain and mental health. [online] https://www.waff.com. Available at: https://www.waff.com/2022/03/19/how-tiktok-is-affecting-your-brain-mental-health/.
Miller, M. (2002). Is ‘TikTok Brain’ Affecting Kids? [online] Verywell Health. Available at: https://www.verywellhealth.com/tiktok-brain-5225664.
Optimizely. (n.d.). Digital content management. [online] Available at: https://www.optimizely.com/optimization-glossary/digital-content-management/ [Accessed 1 Aug. 2022].
PCMAG. (n.d.). Definition of video game console. [online] Available at: https://www.pcmag.com/encyclopedia/term/video-game-console.
Robinson, L. and Smith, M. (2021). Social media and mental health. [online] HelpGuide. Available at: https://www.helpguide.org/articles/mental-health/social-media-and-mental-health.htm.
Stegner, B. (2020). 7 Negative Effects of Social Media on People and Users. [online] MakeUseOf. Available at: https://www.makeuseof.com/tag/negative-effects-social-media/.
TEDx Talks (2018). SOCIAL MEDIA ADDICTION | Leslie Coutterand | TEDxMarin. [online] http://www.youtube.com. Available at: https://www.youtube.com/watch?v=JH5bC-SLvb4&ab_channel=TEDxTalks [Accessed 1 Aug. 2022].
W3Schools (2019). CSS Tutorial. [online] W3schools.com. Available at: https://www.w3schools.com/css/default.asp.
WebMaster (n.d.). Navbar with brand logo. [online] http://www.youtube.com. Available at: https://www.youtube.com/watch?v=x2hdO15luS0&ab_channel=WebMaster [Accessed 1 Aug. 2022].
http://www.leagueoflegends.com. (n.d.). League of Legends. [online] Available at: https://www.leagueoflegends.com/en-us/.
http://www.lifeintelligence.io. (n.d.). Social Media Addiction: What It Is and 4 Ways to Overcome It. [online] Available at: https://www.lifeintelligence.io/blog/social-media-addiction-what-it-is-ways-to-overcome-it.
http://www.w3schools.com. (n.d.). How To Create a Responsive Navigation Menu with Icons. [online] Available at: https://www.w3schools.com/howto/howto_css_navbar_icon.asp.
Yalanska, M. (2017). UI/UX Design Glossary. Navigation Elements. [online] Tubik Blog: Articles About Design. Available at: https://blog.tubikstudio.com/uiux-design-glossary-navigation-elements/ [Accessed 1 Aug. 2022].
Yale School of Art. (2009). Home – Yale School of Art. [online] Available at: https://www.art.yale.edu/.
EPHRAIM SAKUGA 