Now that we know the structure of our website, it’s time to get creative and give it a unique design.
Usually, I use Adobe Photoshop to create a rough mockup of the website design and play with different fonts and colour variations. But lately, I have used Adobe XD because, with this application, you can create, prototype and design accurate working layouts.
If I need to describe the style of my website, I use the words “Clean”, “Business-like”, “Traditional” “Modern”, etc.
Designs are always a matter of taste, of course, but lately, I see more and more websites with designs similar to each other. Those one-page websites have sections full of animations when scrolling, parallax effects, dividers that give those sections a fluid transition and counters to show how much success the business has. Don’t get me wrong, sometimes I like those designs, but I avoid those layouts. For me, those are trends that eventually disappear. I chose a more “Classic” look.
Dark website design and black websites have always been controversial topics of discussion. Many web designers believe in pushing boundaries and are happy to adopt black web design and launch black websites. Others are still not in favour of using it in their designs. This is mainly based on concerns over design and readability or brand fit.
According to a recent poll, the general audience prefers light designs because of better readability. For me, it is evident that photos are more pronounced when used on a dark or black background, but I agree that light experiences are better for readability. So I went for the best of both worlds; whenever text is present, I use mostly a light background.
My website uses only three primary colours: #202020 (dark grey), #e0e0e0 (light grey) and #f8b000 (yellow). It’s a good idea not to have too many colours in your design, especially for a photography website; it distracts the viewer from the photos.
Landscape, portrait and square photos come in different sizes or ratios. This was the first problem to solve: “How do I show them in a nice layout” without compromises? If you build an essential grid in HTML and add photos with different ratios, the result will be ugly. I wanted a kind of Pinterest layout for my blog and gallery. The obvious choice was to use Oxygen’s built-in repeater field and some PHP/Javascript code, but I chose a plug-in instead. Many plug-ins can accomplish this layout, but two products stood out: ThemePunch Essential Grid and Theme-One The Grid.
The most powerful and popular one was Essential Grid, but it is bloated with code and slow. So I tried the faster and cleaner one, The Grid. With this plug-in, you can quickly build a masonry layout and give every thumbnail of my blog and gallery post a unique look with the skin builder. Additionally, it’s easy to replace the main query of WordPress.
Indeed! Just when I was almost finished with this website, I discovered a new plug-in from the same creators of The Grid.
Grid builder WP has almost the same features as The Grid but has one significant option: Faceted search or filtering. It’s an Ajax-based system that can quickly and efficiently filter content asynchronously without page refreshes. It’s so good that I used this plug-in on almost all pages where I needed to query the database. Maybe you have noticed how quickly it is by visiting my Blog or Gallery page.
To be continued…
Update: Click here to read Developing a Website Part 1 / Part 2 / Part 3 / Part 4 / Part 5 / Part 6
Copyright © 2023 - Dirk Beckers - https://www.dirkbeckers.be - Privacy Policy - Terms & Conditions - Disclaimer
