For my third and final project for 102, we were given the option to choose from a list of designers and create a 1500 word essay and implement it into a website using HTML and CSS. Initally, I wanted to choose How Nazi persecution in Europe in change the design in America as the classes on WW2 and modernism, with swiss designers were my favourite but in the end I decided to go for something I wouldn’t have chosen at all to try something different and step out of my comfort zone and from the list I decided to choose Tim Berners-Lee and look at how he changed the way we communicate with the internet.

Research and Development

I began to plan the first stage if developing the web essay which was research. I looked at who Tim Berners-Lee was, his background and how he came to develop the web. I then looked at what is available today due to the internet and how this effects us now and possibly in the future. I looked through many different interviews with Tim Berners-Lee on his creation and also how he has continued his legacy by ensuring that it is available to everyone without limitations. But without these limitations, dangerous and illegal activity are able to occur and do occur and this begs the question, should there be limitations? This topic is one that has cause massive controversy as some say it would take away freedoms and as Tim Bernes-Lee states in an interview, the ability to access the internet for news or even healthcare should be seen as a human right as those who don’t have access are at a disadvantage. This part of my research really interested me because as I have the luxury of having access to the internet as a part of everyday life, I never thought how those that are without it are at a disadvantage in life in comparison to the rest of the world. I researched things like net neutrality, social media statistics and projections. There are many positives but almost just as many negatives to the web but it depends on how it is used and maintained without restriction that will be most beneficial to us and the development of the human race.

Once I had conducted sufficient research, I started constructing the layout of my Essay as follows:

• Introduction
• Early Life
• Creating the World Wide Web
• A Revolutionary
• Communication
• Good or Bad?
• Conclusion

1500 Word Essay

Now that I had my sections down I began writing the content of my essay.

Introduction

Long before the invention of the internet, the fastest way to exchange information was by horse. That was until Tim-Berners Lee created the World Wide Web in 1989, which is arguably one of the most important developments in human history. In this essay, I will explore how the web was developed, how it has changed how we as humans connect and communicate with one another.

Early Life

Tim-Berners Lee was born on the 8th of June 1955 in London, England. With both of his parents being computer scientist, they worked on the first commercially available computer in the 1950’s, known as the Ferranti Mark 1. This was what Berners-Lee claims sparked his passion for computers. As child he was always fascinated with electronics, often playing with model railway sets, creating electronic gadgets to control the trains and in college he even made a computer out of an old television set. Berners-Lee graduated from The Queens College in Oxford in 1976 with a Bachelors degree in physics. After graduating, he went on to work for telecommunications companies where he developed a typesetting software for printers.

Creating the World Wide Web

During 1980, Berners-Lee spent 6 months working as an consultant software engineer for CERN, the European Particle Physics Laboratory in Geneva, Switzerland. It was at this time that he developed the concept of storing and sharing information which would later become the World Wide Web. CERN is a collaboration of scientist from all over the world working together but at the time they were all using their own software meaning the documentation of their work was on different systems. This meant that when Tim Berners-Lee went to do his job, he would have to find out how a particular programme worked, write all the information down and then create a new programme to get the systems to communicate with each other. Berners-Lee saw this lack of efficiency with sharing and exchanging information and this was the problem that he wanted to fix by creating just one information management system that would be available to all of the scientist working at CERN.

“So at CERN before the web they would be systems you’d have to connect to completely separately. You wouldn’t be able to really bring up the information from one thing at the same time as the other, you’d have to bring up information from one and write it on the back of an envelope and then go to the other system and maybe type it back in. There was lots of information on discs and if you realised that it would just take a little programme running on each to turn them into the web, then you could link them together. It was worth putting a bit of time in” Tim Berners-Lee, BBC 2009.”

In the beginning, this started with a Hyperlink, which is a system of interconnected text displayed on computer screens. The user could navigate from one text to the next by clicking on this link. Realising the benefits of his hyperlink notebook, Berners-Lee thought about sharing this with the rest of the scientific community. Using a Transmission Control Protocol, also called TCP, this creates the connection between client and server, ensuring data moves from one place to the other. The DNS or Domain Name System is used for giving every computer or server that is connected to the internet its own domain name assigned, with every domain having an IP address. The Combination of these 3 things enabled the user to use a system containing many different websites instead of just one. Berners-Lee proposed his idea in March of 1989 in a document titled Information Management.

By 1990, this then developed onto a vision that had 3 main components;

HTTP: HyperText Transfer Protocol – Enables access to retrieve linked resources on the web.

HTML: HypeText Markup Language – The formatting language for the web.

URL: Uniform Rescource Identifier – A web address commonly known as URL used to identify each resource available on the web.

A Revolutionary

Berners-Lee proposed his idea in March of 1990 in a document titled Information Management. The first ever website went online on the 6th of August 1991, with the goal being ‘universal access to a large universe of documents.’ In April of 1993, after advocation from Tim Berners-Lee and others, CERN agreed to have to make the code available to everyone, for free, forever and this resulted in a world wide wave of collaboration, innovation and creativity that had never been seen before.

Communication

The internet has become intergraded into almost everyone’s day to day life in many different ways, with communication being the biggest. This became evident more than ever during the Covid-19 crisis as families that were not able to meet face to face could share moments together over the web. Education, while still available on the web before Covid hit, was able to continue online. Groceries and fast food can all be delivered to your front door with just the touch of a button. While we couldn’t attend the cinema, we have streaming services such as Netflix and Amazon Prime just to name a few and without which we would never have gotten shows like ‘The Tiger King’ that sparked a massive online conversation with one another. With the use of social media’s like Facebook, Twitter and Youtube, news spreads much faster than it used to with traditional sources of media. This shows how information is being exchanged faster than ever as apposed to outlets like newspapers who would sometimes need days to publish a story. But today, you can even find first hand accounts from those who witnessed those headlining stories online. Alternatively, you can find factitious headlines and misleading information dubbed ‘Fake News’, with the term being made mainstream during Donald Trumps 2016 presidential campaign.

As of 2019, every minute, 300o hours of content was uploaded to Youtube, over 6 million people used Instagram daily with 95 million photos uploaded and more than 500,000 Facebook comments posted with these figures rising every year. The internet gives you the ability to connect with people from all over the world while at the same time feeling like you’re at home there.

Good or Bad?

Berners-Lee had a hoped that his new creation would lead to a society where inequality was less prevalent ‘because everyone has got the same possibilities and advantages’ when connecting to the web. However, the opposite could be said to be true, but in light of this governments and NGO’s are realising that there is a crisis in terms of inequality, because as more powerful resources are being made available on the web it creates a bigger cap between the haves and have nots. Since then, access to the internet has begun to be seen as a human right which Berners-Lee proposes in an interview, ‘how will your voice be heard?’ if you don’t have the chance to connect to the web, or the opportunity to have the values you believe in put across to governments and others across the world.

Nigeria was the first country to launch 80 pre-approved websites to its people with the help of Airtel Africa, one of the biggest network providers for the country. This meant that over 90 million people now had the opportunity to access things like health information and news, for free. In 2013, Facebook launched a partnership with Internet.org that would allow access to selected websites including Facebook for those in countries that are less developed with the mission statement “Connect The World.” However, this concept was criticized for going against net neutrality as it discriminated against internet services such as Facebooks rivals.

Net Neutrality is an important part of ensuring that the internet stays open and available for everyone, with all internet communications being treated equally or without discrimination.

On the web, freedom of speech and anonymity go hand in hand as this is what allows people to express their real thoughts and opinions without fear of being persecuted. This is also the reason why everyone allows their true colours to show online, both good and bad. The web is home to people sharing and liking on social media, connecting with others based on common interests as well as human and drug traffickers of the dark web.

The voice that the internet has given those with access to it speaks about success and material goods with life being viewed as a ‘highlight reel’ on Instagram with the issue being that this creates a false idea of what life should be to others. Even with the amazing opportunities available on the web, people are now more obsessed with appearing successful rather than actually being successful.

Conclusion 

In just over 50 years, the web has went from an idea Tim Berners-Lee had to improve research and collaboration to something that dominates our society today. As it stands, 4.3 billion people, over half of our global population, are connected to the web. Over this time, computers have went from a huge machine on a desk to a small watch you can wear on your wrist. There is no doubt that Tim Berners-Lee has changed how we communicate, whether for the good or bad is up for debate, but the web has paved the way for even more beneficial creations in our future and it is up to us to decide how to use it.

Sketching and Ideas

Now the main body of content was complete, the next stage would be to sketch layout ideas and create digital mock-ups of those. However, before I begun to sketch I researched some website layouts and design ideas that I liked the look of to get some inspiration for my website. Some of the most interesting websites I found has interactive elements that I would love to implement further down the line if I became more experience with coding and also using java script. But aside from those features, some of these websites still has the theme that I was looking for with clean and simplistic layouts without too much going on at once.

Once such website was from the San Francisco Museum of Modern Art where the homepage displayed a full screen background images based on works in current exhibitions. This was an element that I wanted to keep in my design for the top of the page. When you moved your mouse over the screen the Logo ‘SFMOMA’ would split and move to different edges of the screen to uncover the full image, which I thought was a really cool interactive feature.

 

The Poulos Collective design consultancy website focuses on UX design and have a really nice website with a cool colour palette and easily readable text and very minimalistic but interesting layout. This collection of rectangles and squares feature was something that I really liked and also the addition of the mouse changing its design depending on which area you hovered over was something that I thought about trying to implement in my code. This website is where I got inspiration for the colours I would use in my design.

 

Even during my research pertaining to Tim Berners-Lee, I came across the CERN website that had and image at the right side of the text, just below the main heading image. This I felt, looks very smooth and had the same kind of colour palette as the last website, although it was as exciting visually I knew it was something that I could try to recreate. This source of inspiration was something that I knew for sure was going to be included the at the beginning of my web sketches.

Once I got an idea of where I wanted to take my design, I started sketching various ideas of different layouts.

One of the websites I found while researching was RESN, which is a completely interactive website where you can interact with the home screen to sort of play mini games or rather just interact with that is happening on screen, such as holding a lighter to a box for long enough until it starts to burn, or a using a bats X-ray eyes to see through different layers of painting which is shown as differnt layers of the body. These interactive screens only stay as long as you hold your mouse down and as soon you let go the screen returns to black and when you press and hold again, a new screen with a different interactive element appears. I found this website fascinating and would urge anyone to take a look that hasn’t seen it before.

Typeface and Colour Palette

Initially I wanted to chose Helvetica as its my favourite font and I have used it the most in the past, but it was for this very reason that I wanted to chose something else, continuing the theme of stepping out of my comfort zone and trying something different. In the end I chose the Poppins font which is a Sans-Serif, created by Jonny Pinhorn Ninad Kale and Indian Type Foundry in 2015. I decided to chose this font as no matter what size or resolution the screen is that you would be viewing the website on, the font stays legible, keeping the format simple and clean as I was aiming for and I particularly liked how the font looked in bold and how this would look as my headings. I began looking at other websites that used the Poppins font to see what it would look like in different uses and what I found again was that a cool toned colour palette was very popular and worked quit well with a number of different website orientations. Even with Berners-Lees current website, W3C, the colours where around the same types of blues and teals, as were many of the websites related to the development of the web. The particular teal/green I chose as my main colour was actually from the background on Tim Berners-Lees computer at CERN.

I used a Type scale website to visualise how this font would look in various sizes before making my final decision.

 

I then took my sketches to Figma to build on my ideas and find the right one to go with in a digital setting. This were I could fill some gaps that were present in my sketches and although this was the idea I was following, as I began coding and actually building the website, it started to develop a new layout and others that once I actually input the code, I didn’t like the how it looked. My first wireframe was composted of greyscale squares and rectangles just to get an initial feel for the design then I began gathering images I would use in my website and started adding them, along with some colour, to bring my design in Figma to bring it to life.

My initial Figma design.

I chose 3 images of Tim-Berners Lee to use throughout my website and 1 of the CERN logo, which I edited in Photoshop to fit the colour palette of my website. I also removed the white part of the logo so that the colour of  background of where I placed the logo would come through. When I added this to my website I gave it a border-radius so that it would appear as a circle rather than a sqaure, complementing the motion of the design.

My Final Figma design with images and colour.

Building The Website

When beginning to make my website I was very excited to try and create my designs with code as I’ve always wanted to learn code and have it as a skill but admittedly, I wasn’t as good at it as I thought I would be. I realised very quickly all the ideas that I had had were too complex to actually be successfully pulled off, one of these elements were the hover boxes, which were intended to to appear as boxes with images when static then when you hovered over them, they image would disappear and the information would appear in its place. I wanted to implement this as an interactive element to my website to make it a more enjoyable experience for the user. These Boxes would explain abbreviations from my essay such as HTTP, HTML and URL. I designed some initial images for these boxes to see if it would work but it would no longer switch to the after text when they were applied. I created images instead to put in these boxes that contained both the information displayed when static and the information that would appear after the hover effect. But I didn’t want to give up on my idea so I removed them and tried to get the code to work.

 

I tried to increase the already existing font that was on the static boxes but when I did the after text when you hovered on the box would move to the left and after many days, and even maybe a week or two of trying to get it to work I couldn’t figure it out.

Final Thoughts

Although this idea didn’t work as id hoped, I wanted to keep it in because even though its a really basic design that may take away from the rest of the website, I wanted to keep the user experience in mind and feature this interactive element as I still felt it was fun to hover back and forward on, even if it did look unfinished. I really wish this had of worked because learning the code for this effect took a while and it brought an interesting element to my website.

Instead of adding another image, I wanted to create something that was successful using the  hover effect. At the section I discuss Social Media and the popular websites, I included png images of these sites that were opaque when static but became solid white when your mouse hovered over them. To begin with this images were connected to links for the websites but then I thought about how I had explained the statics of hours spent on these sites and how I didn’t want to incite this further by including this so I removed it. Its hard not to browse on Amazon when the pages opens up in front of you. Instead I placed the link in the section above in the words ‘the first ever website’ which once selected will bring you to the first ever website which is available due to the HTML code such as the first website was created with HTML.

Another interactive feature which I really enjoyed implementing was in my navigation bar at the top of the website. Initially each tab would just change colour when you hovered over it and I had already wanted to add an element of a loading bar as you progressed down the page or lines growing round the boarders of an image the longer your mouse hovered over it. When researching ways that I add this feature, I found a YouTube video explaining the use of ease in and out transitions and from this I implemented code that allowed a bar to appear above the navigation bar tabs when you hovered over them that would start by moving very fast then slow down once it was reaching the end of the word. This was my favourite thing about my website and had a lot of fun just moving my mouse back and forward over these elements, proud of what I had accomplished. This was another additional to adding to the beginning of learning how to create interactive websites which, although it is a responsive website designed to be accessible through any screen, my main goal was to create an fully interactive website for this final project and I soon realised very quickly that this was not as achievable as I had hoped.

An issue I had with the navigation bar was that I liked the width and sizing of it but when it was stick to the top of the screen when scrolling it took up a lot of space. I decided to have it fixed at the top of the web page but the ability to quickly navigate through sections could be reinstated through an arrow button that stayed fixed on the bottom right of the screen when you were scrolling that would bring you to the top of the screen. I had created this button in Illustrator as an svf so that I could resize it if needed when applying it to my code and within this code, I made it so that instead of bringing you back to the top in one jump, it slowly eased the transition, making for a more fluid feel.

Here is the link to my website : https://alannalee.github.io/Tim-Berners-Lee/

 

 

Sources 

https://www.bloomberg.com/news/articles/2019-03-11/100-years-later-how-the-bauhaus-resisted-nazi-germany

https://www.bbc.co.uk/news/magazine-24819441

https://www.dw.com/en/nazi-design-from-megalomaniac-to-kitsch/a-50329053

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_links_colors

https://www.w3schools.com/html/html_links_colors.asp

https://home.cern/science/computing/birth-web/short-history-web

https://onepagelove.com/typeface/poppins/page/2

1https://www.youtube.com/watch?v=MNdV0tva1XE&t=315s

2https://www.youtube.com/watch?v=GUrDI6OkJfU

3https://www.youtube.com/watch?v=loi6PYaRqHA

4https://www.youtube.com/watch?v=KCs7TPrVOe0

5https://www.youtube.com/watch?v=fbV82k-ExT0

6https://www.youtube.com/watch?v=pRs-BsiQinE

7https://www.youtube.com/watch?v=Bsf4Zxq2jh4