Case Study Conclusion

 I’ve always been interested in web design and how people interact on and with the internet. When presented with the opportunity to research the effect of an aspect of digital media on people and culture, I jumped on web design as my topic.
Under Construction DesignThrough my studies I got to spend more elective time learning about the role of web designers and the pressures they deal with.  Most of all I got to learn just how prevalent and saturated the internet is. It’s easy to see how often and how much people use it but it’s really interesting to think that people had to create all of those web pages.
It’s crucial to pay attention to what effects different design choices have on people since they spend so much time seeing them. Web design also presents a great medium for artists. Although people have been designing websites for years, with the omnipresence of the web, a lot more artists are turning to web design.  I’m excited to see what people can think of and create, and aesthetically enhance the web for everyone.
Advertisements

Response to Lattanza’s “Social Theory of Social Media”

In Jaclyn Lattanza’s blog post “Social Theory of Social Media,” she grapples with the complex issues of underage children using social media as tools for sexual activity.  It’s no surprise that things like Snapchat, ChatRoulette, and having a phone that can instantly get online are gateways to being able to do naughty things. Give people a way of communicating and they will use it for physical gratification.

Lattanza uses a lot of quotes and examples from the Vanity Fair article “Friends Without Benefits” by Nancy Jo Sales.  Sales’ article is an extensive look into the effects of how this omnipresent opportunity to be sexual exists and effects young girls.  Sales captures a lot of strong examples of common experiences that girls suffer through such as hypersexualization, difficult standards, and cyber bullying.  Depression is not uncommon for these young girls. In her blog Lattanza does an excellent job in communicating these effects.

However, the most interesting part of the post was the end for me when Lattanza quotes Sales saying that ““I don’t really think it’s the devices themselves or technology itself that are the problem here. It’s the values and trends in our culture that are the problem, that are being expressed on these devices and through this technology.” I would have loved to have heard Lattanza’s opinion on this more than just the quote. She made an excellent choice choosing to close on that but I think that quote really encompasses the importance of Sales’ article. The observations made on the effects of hypersexualisation through social media isn’t completely break through news. Young people will always want to have sex. Social media just presents an extremely easy method to do so. What’s more important is what we can do to make it less hurtful for those involved.

I think we should all consider how to make sexual activity less of a harmful and taboo thing. Young girls think they are expected to be sexual at a young age due to the constant onslaught of sexual representations of women in the media. Young boys pick up on this and assume that all girls want to be the same way whether they do or do not. Not only does this cause girls to rush to become active sooner than they might be ready for, but they soon learn that they can be rewarded for this behavior. However, this divide and discomfort with sexuality exists in most cultures that when girls do begin to be promiscuous, they are both punished by cyber-bullying peers who are doing the same thing and unwanted attention, and rewarded by affection, attention, and compliments. This divide helps foster a completely unnatural and unhealthy idea of sex.  It’s dangerous.

Sustainable Web Design

It’s funny. When so many people think about sustainability and how to lower the world’s carbon footprint, they always think about cars, or turning off the lights when you’re not in a room. Never do we consider how much energy our cell phones, tablets, computers, or laptops use. And I don’t mean from charging them. According to a study by the Centre for Energy-Efficient Telecommunications (CEET) and Bell Labs, the internet’s carbon footprint is 830 million tons of CO2!  That’s a lot, and it’s only going to get worse as more people gain access to the web.

The reason people probably don’t think about this too often is because they don’t want to make any sacrifices to how they interact with their devices and how much they rely on them. However, if web designers begin to make some small changes, they can help lower the internet’s carbon footprint without having to impact how often people utilize the web, thus maintaining the benefits we receive from it.

There are a lot of factors that go into a web sites performance, and its completely related carbon footprint. Websites that are heavy with images, JavaScript animations, and database queries require a lot more power to run. Although these things might be beautiful, are they really necessary? Have you ever seen those large image slideshows that a lot of websites feature in the front of their site? These image slideshows are called ‘carousels’ and they take up a lot of space, and are very pretty. For a lazy or trendy designer, these are a necessary staple. However, according to web designer Brad Frost, most people don’t even know how to interact with these carousels. They just ignore them and utilize other methods of exploring a site. By minimizing the reliance on carousels as an important design element, web designers can improve their sites performance while making it more eco-friendly.

Another method of minimizing the images downloaded for a page, are to use CSS icons. Created by utilizing new properties of CSS3, these icons are created purely from code and not by downloading an image. However, most browsers don’t support the new features of CSS3. [http://www.w3schools.com/cssref/css3_browsersupport.asp]  Once browsers catch up and adopt HTML5 and CSS3 as the new standard, designers can utilize this neat little trick.

There are several methods of checking the performance of a website. Designers need to make sure they utilize these while designing and try to keep their sites as proficient as possible. There are a lot of alternative methods to making a site look good besides using images and flashy effects. One such method is a typographical focused design. It’s highly effective while remaining simple and clean.

 

Sources for further reading:

http://alistapart.com/article/sustainable-web-design

http://alistapart.com/article/the-web-runs-on-electricity-and-were-running-out

http://bradfrostweb.com/blog/post/carousels/

Content Management Systems and Themes

Traditionally, websites were/are painstakingly written by hand with HTML, CSS, and other languages. They were generally static pages with content that needed to be manually updated to reflect any changes. This was extremely annoying for website designers and site administrators who were responsible for keeping a site’s content up to date. Smart designers learned ways around this through the use of JavaScript and other dynamic languages but the invention of content management systems (CMSs) helped make dynamic web page creation more viable for more developers.

Pardon me for quoting Wikipedia, but “A content management system (CMS) is a computer program that allows publishing, editing and modifying content as well as maintenance from a central interface. Such systems of content management provide procedures to manage workflow in a collaborative environment.”  Simply put, CMSs make website management easier for users of all technological expertise levels. The benefits mostly lie in how content is created, displayed, and how easy it is to edit things after they’ve been published. Instead of having to change things all across the site, you can edit the original source and the CMS will instantly update every instance of that content.  CMSs also provide an easy way for designers and developers to set up a self-managing system with complex functionality that non-technical users can easily add content to without ruining anything. (As users are apt to do.)

Popular Content Management Systems
Popular Content Management Systems

The top three content management systems used, in order of popularity, are WordPress, Joomla, and Drupal. These systems create webpages through code templates so that users don’t have to handwrite the code. Due to this, CMS websites require a different method of graphical design. Instead of handwriting the HTML and CSS for every page, a “theme” is implemented. Themes cover all of the design choices across the site to maintain a uniform appearance for any content published.

Changing a Theme in Drupal
Changing a Theme in Drupal

Due to the nature of themes being templates that can be used out of the box, this presents a weird conundrum for designers. Previously they would create personalized designs for every site that they worked on but now clients can use a free theme or purchase one for a less than a tenth of the price. Websites like ThemeForest [http://themeforest.net/popular_item/by_category?category=cms-themes] and TemplateMonster [http://www.templatemonster.com/cms-blog-templates.php] sell themes that create professional looking websites without the necessity or cost of a designer. This presents a possible problem. Do themes hurt designers or present new possibilities?

Kazuya Symphony Theme Preview
Kazuya Symphony Theme Preview

It can be argued that themes streamline the creation of websites and take away possible business from designers. If looking at it from an economic standpoint, the availability of themes helps small business create professional, attractive looking sites for a low cost that helps boost their business. It may hurt designers but it helps more people in the long run. Designers aren’t completely left out of the money available through themes as well. Successful themes require good design: something that people will want to buy and use. However, now the opportunities of earning money are available to anyone with the proper skills instead of designers in big firms with access to clients. There will always be clients that require or desire a custom built website. And even if they do want to use a theme, most businesses will want customizations done so that their site looks unique.

I think that themes change the way the business works but doesn’t ruin it. It may hamper the overall amount that a single designer can make but it opens up new possibilities for small businesses and new designers. The onslaught of CMSs and themes also requires designers to become more skilled in several practices, helping create a more skilled work force. Designers might not like it but it will probably help business in the long run.

 

Resources for Further Reading:

http://webdesign.tutsplus.com/articles/general/are-stock-templates-good-or-bad-for-web-designers/

http://www.graphicdesignblender.com/is-it-okay-to-use-templates-and-themes-as-a-freelance-designer

http://sixrevisions.com/web-development/making-money-designing-themes-what-you-should-know/

 

The Effect of Typography

Not only is what you say important, how you say it is just as crucial.  Through the use of different type faces, designers can cause words to have different effects on people. Depending on the purpose of a site, it’s vital to pick a font that mirrors that intent.

Different typographies can be thought of as different tones of voice. Each font family has a feeling and then specific fonts within that family will be even more detailed. Generic CSS font families include serif, sanserif, cursive, fantasy, or monospace.

The Psychology Behind Typography

Serif fonts, the ones with embellishments on the letters, are best used in print materials such as magazines, newspapers, and books. If you want your site to be reminiscent of this, you should look into finding a nice legible serif font.

Famous Serif Fonts
Famous Serif Fonts

Sanserif fonts, the ones without embellishment, are easier to read on websites and appear more modern. These fonts are often professional looking and appealing and are usually a good starting choice.

Famous Sanserif Fonts
Famous Sanserif Fonts

Although not everyone is going to nitpick on what type of feeling your font evokes, people subconsciously associate fonts with particular things. Websites and companies that utilize a particular font in to their image are easily brought to mind by seeing that font elsewhere, even if it isn’t in conjunction with that company.  Sites like Facebook, YouTube, Vimeo, Google, and Twitter all have fonts that they have made their own. It’s easy to recognize as a representation of that site, and becomes synonymous in viewers eyes.  Some sites like Yahoo! have even created their own font for use in order to remain unique.

Typographic Centric Logo's
Famous Typographic Centric Logos

As a designer, picking a font can be really daunting and it should be. The typography of a site can completely change how a user feels about and interacts with your site. Resources like Google Fonts allow designers to test how particular fonts will look and it creates a wealth of choices that weren’t previously available for web use. A designer should never be lazy when deciding a font!

Resources for Further Reading:

http://www.onextrapixel.com/2011/12/13/the-psychology-of-fonts/

http://blog.crazyegg.com/2013/07/05/psychology-of-fonts-infographic/

http://elupton.com/2009/10/science-of-typography/

http://www.hongkiat.com/blog/fonts-used-logos-popular-brands/

http://www.w3schools.com/cssref/pr_font_font-family.asp

Examples of Good Web Design

To better curate different styles of web design, and various examples of each, I’ve created a Prezi presentation.  To view these examples and more, please follow the link to the presentation.

Examples of Good Web Design- Enjoy looking at several curated examples of good web design in different styles such as typography focused, minimalist, illustrated, and vintage.

Typography Focused StorePortrait GalleryUnder Construction DesignDashboard Design

Common Webpage Structure

There are few things more intimidating to a designer than a blank page, whether it is on paper, or on a computer. Luckily for web designers, there are a few simple elements that a webpage generally always contains. After that, you’re on your own. Those four main elements are the header, navigation, main content, and footer.

The header, which is located at the top of the page, just like in a page setup, is basically the title of the page. It generally contains the name of the page, and/or a logo, and sometimes a slogan. This should be prominent enough so that a user can know what web site they are on. Depending on the layout of your page, the navigation can be featured within the header, and commonly search bars can be found there too. To maintain a unified, organized look, it’s a good idea to keep the header the same throughout every page of a site.

Teixido Header Design

Navigation helps you do exactly what it sounds like it does: help users find their ways around the website. Navigation is generally organized into a bar and is commonly abbreviated to “navbar.” Depending on the design of the site, you can either have a vertical navbar that runs along the side of the page or a horizontal navbar that rests within, or right below the header. Either way, the navigation should always be located above the fold. The phrase, “above the fold,” is taken from newspaper printing where the most important or most interesting story should always be printed above the fold so that it’s the thing people see first. In web design, “above the fold” is before a user needs to start scrolling. Not everyone will scroll down to see the rest of the page if they don’t like what they see above it. Also, if a user is looking for something particular that isn’t on the front page, they’re going to quickly want to navigate away from the home page to find what they’re looking for. Don’t make them hunt for it or they get irritated. One technique to make your navigation always easily accessible is to make a “sticky” header or footer. This makes the header or footer stay at the top or bottom of the page while the user scrolls.

BBQ War Header

There is an infinite amount of ways to organize the main content of a page. It’s the whole purpose of a web page and should contain good, worthwhile content.

Good Footer Design

The footer of a page is similar to a header except it’s at the bottom and usually contains the necessary legalese. One good practice is to repeat the navigation within the footer, as well as to include a “return to top” button if the page is long. It can also contain other specific links that wouldn’t be put in the header if need be. It all depends on the architecture of the website.

 

References

35 Inspiring Headers and Footers. http://webdesignledger.com/inspiration/35-inspiring-headers-and-footers (accessed September 23, 2013)

Anatomy of a Web Page. http://www.htmlbasictutor.ca/anatomy-of-web-page.htm (accessed September 23, 2013)