Work-in-Progress 1
As I finish work on my site for this work-in-progress snapshot, I’m generally pleased with how closely I was able to stick to my design philosophy outlined in my week 4 writing. Perhaps the biggest difference, however, is that I now have a two-panel display instead of a three-panel display, with the sidebar being scrapped in favor of top-stacked navigation bars (with the basic design from the w3schools page).
This was largely motivated by the inability to create a tiered drop-down menu sidebar without the use of JavaScript. For example, when viewing the WIP-1 section of the site, like what is displayed on this very page, links to the two writing samples and the WIP-1 hub should be visible at all times. I had originally envisioned the sidebar as a tiered drop-down to avoid cluttering the side bar with every page on the site.
My solution was to create a secondary navbar on pages where it is appropriate to separate content in this way. I am not entirely happy with the execution of this solution, as I feel like the secondary navbar attracts too much attention, placing it with equal importance to the main navbar when the two are meant to be complimentary. I tried to resize the secondary navbar and invert the color scheme, but I feel like this section of the site may be a bit too bold. Functionally, it does not make too much of a difference, as the secondary bar only appears when it is needed, but as content is added, the secondary navbar may become a fixture of every page, confusing some users.
As for the design of the navbar and the page, I was very happy with how my design concept turned out. In my week 4 plan, I described my vision as being a “color-splash” and as “big and bold without being flashy.” I think generally I was able to accomplish this. The background of the site is a dark but muted purple/blue/gray color, which I think works with this design. I dislike using a white variant to represent negative space on a site, which I realize is common for a reason, but I like a colorful design. White and another, more muted, variant are used to display the basic content of the page, like this essay.
This leaves the rest of the color scheme, which I wanted sparse use of a bold color. I suggested yellow in my writing, but ended up using a dual color scheme, with both a golden yellow and a mint green. I’m not sure how effective it is, but I enjoy the colors of the site. I think the yellow and the green compliment each other well, as long as they are never used on the same page element. Unfortunately, as the page is, the colors are almost never used after the navbars and title. In my plan I had envisioned the bold colors being used to highlight certain parts of the content, but with writings this does not really happen. Perhaps if there were text links in this essay or there was an image with a caption, the colors could really stand out again. I will have to see if this will improve with adding more pages and content.
I think the biggest benefit to the design of my page besides color is the use of two fonts, one for titles and navigation and the other for page content. Many other websites do this, and I can see why. The bigger, bolder font does a good job at highlighting important elements of the page, while the more basic font allows for ease of reading the content. In that regard, I find that the text is a tiny bit hard to read on monitors other than our retina displays, but I added a slight shadow to most text that makes it stand out more. I might also raise the intensity of the text color, but I wanted to avoid a bright white. I think it is acceptable as-is, but I will look into more design choices in the future.
Functionally, I wanted the site to be intuitive, and I said that the site should be navigable if it were presented solely in black text on a white background. I think the spacing of the website works out well for that. The main title is big and on top, inviting users to click on it as a reference point. The navbars are presented stacked horizontally, and their proximity to the main title and their sizes indicate what they do. The main content is spaced further down, separating it from the other section of the site with negative space.
As for the class as a whole, I wish to learn more about design skills, as I am a computer science major with most of the technical skills needed already. I want to learn about how to build a good website, not just a website. In particular, I would like to learn how to build websites for users, including learning how they use a site and how I can cater to that in my designs. As I mentioned before, I am particularly interested in the use of color to convey both tone and functionality. I remember we discussed in class about a color theory lesson, and I am very interested in learning about it.
Additionally, I want to become more proficient in sizing. Sizing with CSS is a meticulous process for me, obsessively sizing everything on my pages. I want to learn how things should be sized to convey meaning and how to consistently communicate functionality through size.
Overall, I feel like my site is a success so far, and I look forward to fleshing it out as we learn more about the tools and processes necessary to do so.