Continuing your website, you want to show an alternate version to your visual language. If the background on your website is predominantly light, you want to design for a dark mode; and if it’s already predominantly dark, you need to design a light mode.
The technical details to make it all happen are quite easy! I’m more interested in how you’ll make design decisions so the alternate colors match the visual language and brand voice of your original layout.
Oh! You’ll need an alternate logo to go with the alternate language.
Have fun!
In your CSS file, add the following media query:
@media screen and (prefers-color-scheme: ______) {
}
If the background on your website is predominantly light, you want to design for a dark mode, so you need to replace ______ with dark in the media query you just added.
Conversely, if the background on your website is predominantly dark, you want to design for a light mode, so you need to replace ______ with light in the media query you just added.
Inside the media query, you want to make the necessary changes for your website to adapt to the different color scheme. Most changes will be in the color or background-color properties.
You want to create a new version of your logo for the new color scheme. Follow this tutorial on how to make this happen.
A prefers-color-scheme query to your CSS file to make your website adapt to dark and light mode.
A alternate logo for the new color scheme.
Once again, think of this submission as the first draft of your final submission. (All content should be there now.)
Check the list of easy mistakes to avoid from GRC 338.
Beyond your technical skills on the HTML and CSS files, you will be evaluated on your capacity to apply the design principles that we have discussed in class to your work, using the rubric below.
Were aesthetic decisions on the website guided by the appropriate language for the business it’s representing and its functionalities?
Does the placement of elements create a sense of unity and cohesion, contributing to the design’s overall aesthetic and perceived stability? Does the alignment of elements correctly lead the user through the page? Does the visual hierarchy represent the content hierarchy?
Tip: If you have a centered heading for left‑aligned text, you’ll get a 0 for this criterion.
Does the home page conveys its job as the initial point of the website? Does it promote additional interaction? Are the main information and functionalities on each page clearly visible to the user?
Is color being used effectively to direct users to attract attention, group elements, indicate meaning, and enhance aesthetics?
Are similar parts related? Are related parts similar? Are the variations consistently applied in all parts of the website?
Are images being used to complement the information on the website? If you have images of people, is the appropriate face-ism ratio being respected in all images?
Are related elements close together? Are close elements related? Are the amount of blank space on the pages appropriate for the business the website represents?
Is the text legible? Does the text have appropriate size, typeface, contrast, line-length, and spacing? Is the information broken into appropriate chunks, so it is easier to process and remember?
Tip: If you have a centered paragraph, you’ll get a 0 for this criterion.
Is the layout consistent with users’ expectations? Can users easily navigate through the pages of the website? Are the buttons easily understandable? Do the links follow a logical order? Are the buttons easily selectable, even if users are using their fingers on a touch screen rather than a mouse?
Are the possibilities of interaction limited to an appropriate number at each page? If there are too many options, are they broken into easily identifiable divisions in the page?
Other principles, such as Recognition over recall, Errors, Forgiveness, and especially Accessibility must be taken in consideration, but they are covered by other principles and/or by the HTML/CSS part of the evaluation.
You don't need to submit anything to Canvas.
Go to your grc339/digital-magazine/ folder in your public repository on GitHub. ➤
Upload your CSS file.
Don’t forget to upload the new SVG file.
Make sure to click on your name to check if it’s working.
Check Canvas for deadlines.