Look and Feel
Colors
Colors of the Photo Archive are fixed. Part of the reason for this is because
the <body> element needs to specify the overall background
color, in order to completely fill the screen.
The UI theme is dark blue based, where the blue is a more gray-ish version rather than pure blue. There are three shades of blue that can be used:
- Lighter blue: used for the canvas color on the website (not used in the app).
- Middle blue: used for the page background.
- Darker blue: used for the header and footer, can be used for other accents.
Foregroud color is used for text. Links are white.
Fonts
The main font is a sans-serif font, which must be optimized for readability on websites and phones. There are several common options to consider:
- Roboto is Google’s default font for Android, so it is guaranteed to look well on mobile devices Wikipedia. Google Fonts.
- San Francisco is Apple’s default font Wikipedia. However, it is not available on Google Fonts
- Segoe UI is Microsoft’s default font Wikipedia. However, it is not available on Google Fonts.
- Open Sans is a Google-designed font for digital screens Wikipedia. It has the advantage of not being the Android or Apple system font (so it looks different), but still a high quality font. Google Fonts.
- Montserrat is repeatedly recommended as a popular web font Wikipedia. Google Fonts.
- Lato is labeled as professional and highly readable Wikipedia. Google Fonts.
- Inter comes recommended as one of the most effective fonts for mobile content [source] Wikipedia. Google Fonts.
To choose the font to use, I created a font test page.
Sizing
The photo archive is expected to be displayed on a wide variety of
devices, with different screen sizes and pixel densities. However, there is
no attempt to customize for that variety. Instead. the archive relies on the
modern browsers to adjust to the physical device details, and standardizes
on the logical pixel px unit for its “absolute” sizing and
percentages for its relative sizing.
Sizing is done separately for text and for images.
The preferred text size can be set in preferences. We will start out with three options: Small, Medium, and Large. The selected option will set the default font size at the root; the rest of the system uses percentage values to get larger or smaller text. The default text size is Medium, which is set at 20px. Large and Small will be determined later.
The preferred image size is also set in preferences, by defining the thumbnail size. The thumbnail is the image that gets resized; the full photos are displayed based on the available space. There are five thumbnail sizes to choose from: Extra Small, Small, Medium, Large, and Extra Large. The default thumbnail size is Medium, except for high-DPI displays, where the thumbnail size will default to Small.
Graphical elements like arrow buttons and “X” close buttons are sized based on the chosen thumbnail size, not the text size, even though they are rendered as text elements (Font Awesome icons). The reasoning here is that these elements really function as graphical elements, rather than text elements.