As I am adjusting to the new semester, I am working on getting back into the habit of writing blog posts every Monday. This past weekend, I drafted a list of potential topics that I have not yet covered that would be important for understanding the thought behind this site beyond WordPress basics. The first topic is web design: while building a WordPress site is easy, how do you make it look good? WordPress provides a safety net for new web designers by offering pre-made themes, fonts, color schemes, even set templates to copy. However, because my project displays a lot of information in different ways, I wanted to customize and have nearly full control over how my site looked.
Overall Design
The first thing that I considered was how I wanted my site to look overall, and how I wanted the different parts of the site (font, buttons, layout) to be somewhat standard. As you can see from the image below, WordPress gives you a few set ‘styles’ to choose from. I selected the one the top left style but customized the colors. As I mentioned in my last post, I based my website design off of a painting that, at the time, was my website cover image. While that has since changed, I still wanted my website to have a neutral look with colors that would match images from the time period I was studying. In order to test out how the theme looked across webpages, I would make changes (such as changing the background color) and then browse various pages to see how I liked it. If I didn’t, I would go back into the site editor, make a change, rinse and repeat.
Theme Settings and Templates
Another important element that I grew to appreciate more in my website design process was consistency across web across webpages. Going from one webpage to another and having the font size or layout drastically change is jarring for users. WordPress’s full site editor allows you to customize blocks across the site so that they do not change from page to page. Beyond that, I also set standards for myself so that each webpage would look the same. When I created my first web section, I also set the standards for how every other webpage would look, and when I made my subsequent sections I tried to stay with the layout as much as possible. However, as I built more, I also found better ways to structure things, causing me to go back and make changes to older sections occasionally. For example, every page starts with a heading that is set at H2. Every page also ends with a navigation option that is in H5. Spacers, which are used between sections and around larger elements are either 25, 50, or 100 pixels high. Sub-sections always have a 50-pixel spacer between them, while navigation options at the bottom of the page always have 100-pixel spacers above and below them. These rules help to give the site a consistent look, while still allowing for lots of variation within each page.
Block familiarity
Another way that I have developed the site’s look is through my growing familiarity with the way that blocks can be used creatively to achieve the look I want. For example, there are a few different ways to display multiple images in a block, such as with the tiled gallery block through Jetpack, the columns block, the gallery block, and the slideshow block. At first, I defaulted to using the gallery block to display one, two, or three images side-by-side. However, as I looked closer, I could see that the caption covered parts of the images and cropped them. I then switched to the tiled gallery block and made my own caption using a customized paragraph block below the images. I also experimented with different ways to display quotes, especially multiple quotes that came one after another. I settled on using columns that would automatically adjust in mobile to stack on top of one another, though this took some trial and error to perfect the settings.
In terms of text, I have gained more knowledge as to how to use text blocks to organize information.
Heading blocks are a great way to highlight the main points.
Meanwhile, quote blocks make primary source material distinct while still being accessible to text readers.
Me, January 23, 2022
Calls to action can also be highlighted with the text block background feature to make them stand out. This particular call to action was made with a group block.
I used the same block to set aside information that was interesting, but not vital.
You can also use WordPress’s presets as a basis for your own layout ideas. For example, across the site you will see boxes that feature sections of the site. I first copied those from a WordPress preset that looked like this:
And changed the presets to model if after how I wanted it to look:
Trial and Error
Lastly, website design ultimately requires a lot of trial and error. Throughout this process, I have tried to get second and third opinions on my website design: other people tend to notice things that you might not, and they also tend to be more impartial. I also like to revisit older sections a few weeks after building them so that I can give it a fresh look. Beyond that, it also takes a lot of tries to get certain elements to look exactly how I want them to. This trial and error process can be stretched over an hour or multiple months, depending on what I am trying to change and what knowledge I have available to me at the time. This website has gone through a lot of stages in terms of its aesthetics because I am finding new ways to make it look even better.