Logo Dirk Beckers

Developing a Website Part 5

Developing a Website Part 5
Now that we know the structure of our website, it's time to get creative and give it unique design.

In normal circumstances, I use Adobe Photoshop to create a rough mockup of the website design and play with different fonts and colour variations. But lately, I use more Adobe XD, because with this application you can create, prototype and design real working layouts.


It's all a matter of taste

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 with sections full of animations when scrolling, parallax effects, dividers that give those sections a fluid transition and counters to show how many success the business has. Don't get me wrong, sometimes I really like those designs, but I stay away from those layouts. For me, those are trends that eventually disappear. I chose a more "Classic" look.

Choosing the right colors

The dark side of the moon

Dark website design and black websites have always been very controversial topic of discussion. Many web designers believe in pushing boundaries and are happy to adopt the concept of black web design and launch black websites. Others are still not in favour of using it in their designs. This is mostly 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 obvious that photos are more pronounced when used on a dark or black background, but I agree that light backgrounds 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 3 main colors #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.

The biggest challenge!

Grid layout

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 a basic 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 build-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 easily 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.

Until I discovered a new player!

Indeed! Just when I was almost finished with this website, I discovered a new plug-in from the same creators of The Grid.

Gridbuilder WP

Gridbuilder 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 already noticed how quick it is by visiting my Blog, Gallery or Links pages.

To be continued...

Update: Click here to read Developing a Website Part 6

About Dirk Beckers
Dirk Beckers is a hobby wildlife & nature photographer living in Antwerp (Belgium). Fujifilm is mostly the gear I prefer but sometimes Nikon has a place in my bag. Aside from some exposure, sharpening, noise reduction and basic colour corrections, I don't spend much time post-processing my photos. I believe that good photographs are accomplished outdoors, in the field, and not in front of the computer. That's the essence of my photography. Click here for more.
Bird Identification
Please be aware that I'm not an expert in Ornithology. I'm using Merlin app from The Cornell Lab for bird identification, but if you think that there are still some mistakes with the names of the birds, please feel free to contact me. I will be happy to make the necessary corrections!
Copyright Notice
For non-commercial uses, my photos are free to share but if you are interested in using one of my photos for commercial purposes in a legal way, please contact me. If you use my photos for commercial purposes without my consent, I do a regular reverse image search on a regular basis.