Developing a Website Part 5

Now that we know the structure of our website, it's time to get creative and give it a unique design.
Now that we know the structure of our website, it's time to get creative and give it a 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 much 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 topics 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 or Gallery page.

To be continued…

Update: Click here to read Developing a Website Part 6

Like it? Share it!

Find out what
I use

Look and think before opening the shutter. The heart and mind are the true lens of the camera.

Yousuf Karsh