Principles and Standards of Web Design

I grew up in a world being evolved and shaped by the functionality and accessibility of the web. The early days of the web was littered with websites plagued by poor and inconsistent design. HTML was an easy and free language and many people found their place on the web thanks to the level of accessibility and openness that the web offered. Because anyone could learn html and make a website on free hosting services like freewebs.org the web became plagued with poorly designed websites and web services. It was essential that web design become a thing and take the reigns from the design chaos of the early days of the web. Design has made for more enjoyable and effective experiences for people browsing the web and utilizing web services.

I was in high school when I started my first web design class. From what I remember there was not actually a significant amount of emphasis on the design of websites, but more so learning the tools with which websites could be built. The tools I was taught were html elements and css. Thanks to the lack of emphasis on design, myself and many of my fellow classmates would create websites that could only be described as visual and functional messes. We tried to put as much content as we could on a website without the knowledge to properly organize the content and style from a heuristically familiar approach. I feel like since then there has been a significant push to rather emphasize on the design of websites as opposed to just learning what tools can be used to make them. This is present across the board from big companies to classes being taught. I would like to outline some things to consider when designing for a website that I have learned while taking a web design class.

User experience plays a huge role in designing for the web. It is a toss up of finding the right mix between a business’s goals, the technology used, finding the right design to make the experience of using the website easy and accessible for the end user. Finding a nice balance can be achieved through step by step design and construction of the website with testing the site, reviewing feedback, and making changes. The balance comes in knowing that the changes that users ask for are not always the correct changes to make when trying to meet goals and satisfy the majority.

As mentioned in the Slack chat Amazon and Google are excellent examples of good design and user experience. They fulfill all criteria of business goals, design, and technology. These sites also abide by the 10 qualities of designing for a heuristic experience. Google and Amazon both have consistent experiences across their webpages and other services. Both websites also properly handle nearly all errors that a user may encounter and make the user aware of these errors and provide direction in a human readable context. There is exceptional documentation and instructions easily accessible from both sites on how to use them. As I outlined in the Slack discussion Google even essentially provides a proper way to find documentation for external websites through simply performing a google search of the question you have in the context of the external site. The ease of usability of these sites has also helped relieve the pain of having to recall how to do or access certain features of the sites thanks to the simple and minimalist design that allows for users to easily recognize navigation of these websites.

Heuristics is hugely important when designing for the web. As we learned last week many companies and products succeeded on the basis of accessibility and good design. Google Maps is a perfect example of proper implementation. The Google Maps team created a product that could reliably provide a great user experience and is accessible on multiple devices in a familiar usable format. The level of consistency that Google Maps provides is what really helps draw and keep users using the service. Other mapping navigation technologies failed in the market or have not seen as much success because of inconsistencies like having outdated map data or leading drivers down less ideal routes or to the completely incorrect address.

If web designers didn’t design with accessibility in mind many websites would likely fail in todays market. We live in a time when many devices are internet connected and have varying screen sizes, software, hardware, etc. When the iPhone was released in 2007 many websites were not designed with mobile browsing in mind. At the time these sites were very difficult to navigate on the iPhone and familiar devices. In addition many websites at the time had flash components which made it even more difficult to use websites that utilized these components on their websites. It is now 2016 and nearly all websites are designed with mobile in mind as mobile has taken the market. Responsive design is the end goal which helps keep websites competitive. Because responsive design is not as simple to code for many services have risen to meet this need. Wordpress and Twitter’s Bootstrap framework have risen to meet the need for responsive designed websites and help designers design websites that people can access and navigate in an efficient and visually appealing way.

Some design principles in terms of responsive design can be seen in websites we use daily. Many website navigation menus on mobile are automatically scaled down to “Hamburger menus”. Hamburger menus are a consistent and design familiar standard for tucking away navigation elements into a form recognizable and easily accessible to end users.

I feel that if you look at many of the popular websites and services on the web you can get a good idea of how websites should be designed. Many of the popular websites of today are designed with the 10 usability heuristics in mind and should be effectively accessible and navigational on a wide variety of devices. Tools like Bootstrap can also help make sites more effective in terms of accessibility on mobile devices as they help web designers code for responsive design in a shorter amount of time. Also for the non web designer / content focused web poster, Wordpress provides an easy to use template approach which can be modified to suit whichever design the designer has in mind and also target the larger mobile base of internet users.

In terms of how the class is handled, I personally like some things and dislike others. I think the slack chat was a great idea. I feel like it really helps elevate the learning experience for students through collaborative learning. I personally do not think the blog posts are beneficial and the way that work is released in increments and especially closer to the end of the week. I believe that students would better benefit by posting in the slack chat at the end of each week as a requirement and being required to comment on another students post with some new insight on their post. Perhaps Slack is not the appropriate medium to do this, but I do know that sakai offers a way to submit posts into a group form, but without the ability to see other peoples posts until you yourself have posted something into the forum. This is what we did in another class and feel it was really beneficial to the learning experience. The assignments have been fair. I am more of a person to jump right into the code as opposed to first drawing everything out as I know I can go back and alter the design easily. I realize that this is not always the best way to do things, especially for a class with a larger emphasis on design. I do see the importance of drawing out blueprints as a beginning web designer may not immediately reason the correct element to use or way to implement such a design they have in mind using HTML and CSS. This is definitely a very good beginner web design class, especially compared to the classes I took when I first started.