Principles and Standards of Web Design
These past two weeks covered the principles of web design to tie the course material together. These principles by Jakob Nielsen include the top ten most recognized guidelines for web design. Though out the course many of these design principles appeared within our assignments and tested our knowledge as designers and they allowed me to better understand the values. For me the major points that I faced were: “Visibility of system status, User control and freedom, Consistency and standards, and Aesthetic and minimalist design” (1). At the beginning of the semester, I faced many problems with including too much into my initial design and this made it cluttered and made the emphasis of the main content overshadowed. This later changed when I learned the HTML tags that helped divide the page into separate groups of content using <header>, <footer>, <nav>, <article>, and<section>. I learned to clean up my code through dividing my web page and this allowed me to better understand the minimalist design from the major principle. Next, consistency was an important feature I felt needed to be present in all my work through the semester and I learned this as I was coding multiple web pages through codepen. At first I dropped all the content one after another and I left it where it appeared on the page scattered and messy, but this lacked the consistent placement and the user known general traits of many web pages. I failed to include certain content and text properly spaced and tabbed over and this made my page harder to read and view. I also made a mistake of using colors that would make users struggle with the page and this strayed away from general standards of web pages. I later changed these and cleaned up my content and was able to clear a lot of my problems by following consistent standards across my assignments. User control and freedom was an interesting part of web design for me because I didn’t think I would be able to build my pages and design interfaces that could allow for user control. I later learned that these features could be added through my placement of content as well as by adding scalable content that could shift to the preferences of the user. This was done through CSS and rather than adding content in a static size, I was able to use a container and keep the content a certain percent of the container, thus the container size would change and alter the content to the users preferences. Lastly, the most important principle for me was visibility of the system’s status. This was something that I noticed from other sites I use and I have found that I enjoyed the sites that clearly showed me what was going and that showed me the errors in plain English. This also includes color-changing links and hovering animations that show me I am selecting a certain element. Because the pages are made for users to view content, I felt this was the most important UI design principle I understood much more this semester.
User Experience / Testing
From a user point of view, I have enjoyed many websites and I have struggled with just as many poorly designed websites as well. Issues on sites could include not having a clearly visible navigation tab, having hidden content that has a process to reach, and poorly loaded content that may distract me from the main content on the page. These design flaws appeared more when I learned about the various ways to design and build a web page and I became more aware of the content I was producing as well. Although I still have to practice and perfect my web design skills, I have seen a lot of improvement throughout each passing assignment. I started to notice and learn the HTML and CSS tags that could better my pages and a big tag I recently learned was ‘gallery’ and this allows me to better position my content on my page for videos and other floating links. This layout allows for a better UI and a better UX when browsing a page. Moving onto testing, I found that iteration mainly comes from other users looking at and playing with the various parts of the web page. This was something that came up in our weekend discussion when it was mentioned that a school did not build any walkways until the staff and students used the open lawn to find their own optimal routes. This surprised me because of how simple UX problems could be solved when the designer takes the proper time to iterate and design their project before diving into it. Although I was hesitant at first to put in the extra work to sketch out a quick web page outline, I found that my work was much simpler and it was much quicker to edit the content as I translated it into code. Another topic arose in our Slack conversations about Apple IOS versus Android OS and the various preferences and user experiences with the two massive groups. It was surprising to see how users had strong likes and dislikes towards the design choices of the companies and even the different UIs had opinions from both sides. It made me understand that “a designer is not a user and a user is not a designer” because no matter what choice is made, it will dissatisfy certain users based on their preferences. An interesting thing I noticed however, was that both side users wanted certain features and things available quickly and reliably and this was something that couldn’t be compromised on within the design process. The drop-downs and quick access apps and contacts are a must for almost every user and it was apparent both companies implemented these sort of features well and they followed conventional routes so the user will be more comfortable with the devices. Design is a massive part of what makes these devices and our web pages as well and I have learned that iterative design is the best way to clean up and fix issues that may have been overlooked previously.
Slack and Online Courses
This semester was one of the first times I took a fully online course and it allowed me to become accustomed to the awesome chat tool Slack. This chat allowed me to keep up with the course content as well as the discussions and any quick updates that were made. Having the separate groups for assignments and having the ability to converse with the rest of the students helped me better understand the struggles with grasping the content as well as learning it simply through talking about it. In the discussions within the past two weeks, we have talked about various topics relating to UX, Accessibility, and Validation. These were interesting and thought provoking topics that caused a stir without the course chat and this let me see the various points of views that our class had. I discussed the topics on experiences with web sites and design choices that are essential to my final project as well. Slack made it possible to hear about the preferences between showing too much data and not showing enough to the user and this allowed me to find a better balance that I hope to implement later on in the assignments.
Wrap Up
This course taught me from the ground up on the designer side of web design and it allowed me to get a refreshing take on the subject after my previous Human Computer Interactions course. While taking the HCI course, I sketched and mapped out many designs using Indigo Design Studio, however when I started coding it using the mark up languages HTML and CSS, I saw things from a new standpoint. It was refreshing to learn about the similar topics and seeing the comparisons between the courses, but I learned that coding the design required more iterations than I would have expected after the many sketches I made. As the course continued and my vocabulary in the languages grew, I started to feel more confident to attempt more complicated effects to heighten the experience of my web pages. This course allowed me to learn the differences between design and development and it let me dive deeper into the design aspects through the CSS modifiers. I hope to showcase these skills in my final project and hope to display the brilliance of web design.