Principles and Standards of Web Design

We are coming to the end of the course and many of us have acquired the knowledge over the past six weeks to call ourselves Web Designers. All right, I would not call myself an expert, but I went from zero HTML/CSS experience to a novice level. Over the span of the course we have learned topics from sketching to prototyping and user design. I have never been good at art, such as drawing or painting, but web design makes me feel like an artist. Designing something that people will use is a good feeling, and one can take pride in their work.

Going back to the first week of class, we learned the that web design is apart of the overall bigger web development. The differences between the two are the languages such as programming languages for web development and markup languages for web design. From the “thedevonseoco” article, it states that web design is more user focused and a creative process while web development is client based as well as a logical process. The first assignment we did sketching which is an important first step to visualize, plan, and organize how you want you web page to look like. Next, we actually got to start coding html and learning the basic tags. After trial and error the first couple of tries, I got the gist of HTML. CSS was a little more tricky at first, but it was really fun to style the code with different colors, sizes, etc… Imaging and prototyping are very important when it comes to web design. Learning the snipping tool was a useful shortcut to take screenshots. When it comes to manipulating images, one can resize, crop, format, and compress. The three file types we learned about is JPG, GIF, and PNG. JPG is for compressing files but lacks transparency. GIF is an older file type that allows animation but has low quality. PNG has the most size for a file and highest quality with transparency. Another key process we learned was HTML5 semantics for the prototype assignment. Semantics by its definition is the meaning of language. There were Semantic tags before HTML5 came along such as <form><img> tags. Then they are non-semantic tags such as <div> or <span> tags and <div> are there such to group things. They also do not tell us anything about content. HTML5 tags help define content by organizing it.

The last two weeks we over user experience and design. The simplest definition for both was from the week six slides. Design is drawing or planning and experience is research or testing. I think these meme really hits it on the nail and it goes well with Jacob Neilson’s quote that “ Designers are not users and users are not designers.” In the picture, some architect designed the park with pathways but somehow people prefer the dirt path instead. By looking at the picture, it was turned into a dirt road over time because A) people liked the nature side or B) the path was a direct shortcut to the exit as the next patch of grass also has a dirt path as well.

This leads to the next point that designers need to do research experience before designing a product. “ Modern day UX research methods answer a wide range of questions. To know when to use which user research method, each of 20 methods is mapped across 3 dimensions and over time within a typical product-development process.” (Rohrer) The 3 dimension frameworks to help pick which method to use are Attitudinal vs. Behavioral, Qualitative vs. Quantitative, and Context of Use.

In our Slack conversation, Professor Bakelaar asked, “ What type of research method do you think was demonstrated in that episode? (Out of the 20 listed in the NNG article)” This was directed toward the HBO show Silicon Valley, where the main character was testing his product using one of the research methods. I answered usability-lab studies because by definition it sounded correct for the scene I attached above. Usability-lab studies is participants are brought into a lab, one-on-one with a researcher, and given a set of scenarios that lead to tasks and usage of specific interest within a product or service. Another student gave the correct answer which is focus groups by definition is groups of 3–12 participants are lead through a discussion about a set of topics, giving verbal and written feedback through discussion and exercises.

Before taking this class, it never occurred to me that browsing the web everyday could be difficult with people with disabilities. “The impact of disability is radically changed on the Web because the Web removes barriers to communication and interaction that many people face in the physical world.” (W3C) I feel web accessibility should be one of the most important website design principles. Without accessibility embedded into the website, anything on web would be a total barrier to some of the users. The placement of objects (input form, buttons, etc.) on a website is a major aspect of accessibility. I have seen many sites which are meant to be used by general public, but are designed such that only technically savvy people can use them. One such example is the Domino’s website. The site should be targeted to each and every individual, even the non-technical ones but the selection and checkout process isn’t designed keeping non-tech people in mind. For instance, my Grandpa finds it difficult to follow actions on the Domino’s website. Many buttons for adding pizzas and toppings are pretty small in size and difficult to click using the mouse for an elder person like my Grandpa.

Later, we learned about heuristics but I feel not all 10 usability heuristics can be applied together to a web page. I feel that some design principles will contradict each other. On one hand we aspire for minimalist design, but on the other we also want proper help and documentation to be provided. These usually can’t go hand in hand. For me, the most important design principle will be “Visibility of system Status”. There are some popular websites which don’t keep this in mind when designing webpages. Due to the lack of visibility of system status, sometimes I get confused as to whether the actions from my side are completed or not.

Overall, I have gotten an enormous amount of knowledge and skills out if this class. I think I might even consider a career Web Design down the line as I practice my coding skills. Also, for my internship we are using a SaaS cloud platform called ServiceNow and I am playing around using JavaScript with it. I teach Javascript to myself by using Codecademy. Therefore, it is really cool I have gotten to learn HTML, CSS, AND Javascript all in one summer!

Resources: