Generational Differences (Mini Project 3)

I had no idea web design history was thing before we embarked on Unit 2 of this course, so I was really excited to learn any and all things related to the development of the internet and how web pages and websites became what they are today. There are four different generations of website design  and each generational includes an upgrade in code, usability, and design, among other aspects. In this blog post, I will define the characteristics of each web design generation and provide an example of each. 

1st generation (Web 1.0): According to the theories of David Siegel, the web can be analyzed as going as far back as the 1980s, when scientists predominately used the internet for their research. This generation displays a linear, yet functional internet that scientists used to communicate their research, before the average Joe was surfing the web. The 1st generation of web design did not contain graphics, but usually had headline banners, edge to edge text that ran for the full page with blank lines for segmentations. While this inaugural version of web design was not focused on the visual aesthetics, but rather the transfer of information and practical usage.

6 characteristics of the 1st generation web design include:

• slow modem connections (electronic devices that connect computers to the internet) 

• monochrome monitors

• inability of service providers (i.e. computers where the web pages areactually hosted) to transfer the data quickly. 

• In addition, the layout of the first generation web page design was:-

• top to bottom 

• left to right sequence of text and images.

• interspersed layout, with numerous carriage returns and other data-stream separators such as bullets and horizontal lines.

2nd generation (Web 2.0): David Siegel characterizes the second generation of web design as virtually the same as the first generation, with the addition of a few web design elements. These advancements can be attributed in the growth and development of html. Most web designers at this time got carried away with the innovation of the internet but overusing graphics and updated web design techniques. The major downfall of this generation was the speed of downloading. Because people were utilizing graphics in a superfluous manner, web pages took an excessive amount of time to load. 

These 5 elements are 

• icons replacing words 
• tiled images for backgrounds 
• buttons with bevelled edges
• banners replacing headlines 
• and use of a top to bottom, bullet-list menu driven system to present a hierarchy of information.

3rd generation (Web 3.0): The third generation of web design experienced somewhat of a technological boom. Multimedia aspects were introduced to the internet, including elements of  sound and animation, database, e-commerce, and 3D worlds, such as vrml. The birth of the Flash plug-in allowed for web designers to include interactive graphics and 3D images. The third generation is commonly tied in with marketing and advertising, curating the AIDA marketing strategy because the same amount of attraction and interest grabbing is required on the internet. "This web design strategy is directly influenced by presenting the what, why and who rather than a technology–based design." 

A: attract the audience
I: hold their interest 
D: create desire for attracted audience
A: motive audience to take action

4th generation (Web 4.0): Referred to as "the multimedia rich site with all the bells and whistles." The fourth generation of web design is simply an extension of the third generation web design except it includes remote access capabilities that allow for things such as online education. 


1st generation to 2nd generation: The first generation website I have selected solely contains text and active links to other websites that only display text as well. An easy way for this website to upgrade to a second generation website would be to add graphics. While the first generation website I chose does not have any elements that make it seem as though the web design is attempting to be visually appealing to the audience, websites created at this time were written out with extensive code. While it may not seem to impressive to us today, the fact that the website has a header and two different colors , giving it a color scheme is pretty advanced for a first generation website. 

The second generation website I chose still is predominately text, but it contains multiple graphics that grab the users attention. The webpage is still dominated by text and links, but the small graphics in the center of the page show the progression of the website design and how web designers were moving towards a more visually appealing agenda. 

Basic Web Design 101

In my research to find an article that explicated the web design process, I found a website called Basic Web Design 101 that outlines the NINE most important elements of web design. Although the website isn't necessarily I chose this website because the organization of the webpage appealed to me and it made it easy to digest all of the information. I typically enjoy things that are outlined in lists, so that also aided in my decision process.

Here are the 9 elements of web design summarized:

1. Overall Look: The website should look clean, uncluttered, professional, and attractive.

2. Message: You need to give the audience a reason to want to stay on your page. Some of these reasons include: information, entertainment, advice, help with a problem, opportunities to contact similar minded people, and links to useful sites.

3. Speed: People don't like waiting so make sure that the webpage loads quickly and that there aren't graphics that are too big.

4. Graphics and Layout: Graphics and layout contribute to the first impression of your webpage. Graphics eat up a lot of loading time on websites, so make sure the graphics are between 6-8 k (each additional k adds about 2 seconds of loading time)

5. Text Readability: Make sure to select a font, color, and size that are both easy to read and appealing to the eye. Depending on the purpose of the website, there are different requirements for the layout of the text.

6. Page "Skimmability": Make your website easy to skim through, allowing the audience to quickly pick out the key points and elements of your webpage.

7. Navigation: Have a navigation bar on the left side of the page to ensure for easy

8. Privacy Statement and Testimonial:  Predominately for business sites, you need to make sure that your confident on your website.

9. Words: The most important aspect of the website. Make sure your words and thoughts are well organized to display your point.

This website helped me understand what I need to do in order to make an easily accessible and successful website. When I begin with my web design process, I will consult this page as a checklist for things I include in my design.

Photoshop & HTML

So I just finished mini project 2. I'm not gonna lie it definitely wasn't easy. It's safe to say that I was far too confident with my vintage Photoshop skills to take this project on in the last minute, but I did it. It took me about 2 hours to figure out how to even form a filled circle on a new canvas, so as you can imagine, the rest of the process didn't necessarily go swimmingly either. This experience not only taught me to not procrastinate when it comes to dealing with projects, but also the amount of patience creating these pieces is truly going to require.

I'm not necessarily proud of the work I have done for mini project 2, but I really do think that Green Source DFW could potentially find use for these images I have made to be a logo or on a flyer or something of that nature.

After finishing both of my images for the mini project, I figured I would take on the task of attempting to make a webpage for extra credit. I obviously consulted my number one aid, Google, and the process was not so bad (after following meticulous directions). I now feel confident that I can get acquainted with coding, HTML in specific, if I put in the time and effort.

I haven't really started my Unit 1 Composition, but I have a pretty good idea of what I'm going to do. Trying and failing on Photoshop for mini project 2 will definitely help me with my tenative plans for my Unit 1 project.

Arrangement & Symmetry

For our in class work assignment 3, we were instructed to draw gridlines or an X to either draw attention to or from the symmetry of an image. I chose an image from HBO's Girls series finale photo shoot. After putting the photo in a table I made in Microsoft Word, it became clear that at the epicenter of the photo is the series main character, director, writer, and producer, Lena Dunham. It makes sense that as such an integral part of the series, she is directly in the center of the photograph.