Webdesign - dinlydven.dk.

TL;DR:

A simple, minimalistic, fast-loading website featuring:

• Responsive layout.
• Static HTML (mostly).
• A simple, but secure contact form.
• A modern but simple design with good UX and readable typography.
• Here's the live site:

Concept:

The concept and design for a simple website offering audio-editing services.

The idea is to present a range of audio-related services aimed at Danish-language videographers and podcasters, and to do so in a way that hopefully funnels them from the front page, to reading more in-depth texts relating to their specific issues, and finally ending up on the contact page.

Who is the target-group?

This site is aimed at various professionals who are doing video or podcasting as a part of a marketing strategy, but are not experts in these particular kinds of media themselves. I know from previous experience that sound often turns out to be a complex issue when non-experts produce videos, and that good-sounding podcasts are difficult to make with smartphones and Skype-calls.

The ideal customer is someone who values good sound and is willing to pay for expert help.

I have provided audio services to people in these situations before, and hypothesize that there is more work to be found. The aim of the site designed here is to create leads to that work.

Design:

Some early paper-sketches. Here, I had the idea of using horizontal "media items" to present overviews of the services offered:

Early sketch of desktop view.

I initially wanted these media items to go vertical on small screens - like this:

Early sketch of media items.

Colors:

After those rough wireframes, I set about exploring color-schemes. I decided to constrain myself to this little gem of a book: "A Dictionary of Color Combinations" (Seigensha). It features a number of 2, 3 and 4-color combinations and a CMYK color register.

A Dictionary of Color Combinations

I knew early on, that I didn't want the design to radiate "technical expert" too much. The name "dinlydven.dk" means "your sound-friend" and so I wanted the design to reflect a kind of relaxed friendliness, while delivering the technical goods in the text. Expert help in a friendly and hopefully un-intimidating setting. I was drawn to the combination below for this reason.

I really liked this one!

But of course, it turned out to work better on paper than on screen. After mapping the CMYK colors to RGB, I felt the pink would strain the eyes too much.

They looked better on paper...

I did some more exploration, playing around with colors and visual elements, and arrived at something a little different.

I kept the light blue, but decided that the darker blue/green would still be a poor choice for typography against either the light blue or a white background. A charcoal grey looked better for this, and then a coral red for attention-grabbing elements.

These also had the same sort of "dustiness" that I liked about the first color-combination on paper.

The color-scheme evolved.

Mockups:

This project was my first serious attempt at working in Figma, and I think it went well enough in terms of that process. Once you get the hang of components and frames, it's relatively easy and fast to prototype stuff, especially for different screen sizes. Also very easy to export specific layouts as image files or PDF's.

I worked mobile-first, so here is the mobile layout of the front page:

The body font is Roboto, with a little extra font weight on the navigation - which also has the coral red underline for contrast.
I realize the "correct" way to do a navigation menu in mobile view is the famous burger, but with only 2-3 menu items, I'm betting that the user will decode them faster. It also saves a mouse-click.

"Hero" area:
Keeping it simple with the website offer distilled to it's essence. No hero image, just an H1.

Card item:
Video service presented in "card" format. The charcoal bar with the white heading was initially a sort of placeholder for a potential background image. I felt it might be too bare without any images, so I held this option open for a while.

The coral red call-to-action (button) felt right in terms of the color scheme. Too much of a warning color? Maybe. The button text says "fix it", which may take the edge off things a bit.

Code:

After brushing up on responsive design in Kevin Powell's great free course, I decided to start turning the visuals into HTML. Talking to a person with dyslexia made me rethink white text on charcoal background, as well as charcoal text on light-blue background. Both too much and too little contrast can disturb the reading experience for most people, and for dyslexics even more so. Therefore:

Changing colors a bit.

I laid these out with flexbox, which Kevin Powell goes over in detail in the above-mentioned course.

I also needed a two-column layout for a larger chunk of text below the media-items (which was now to be charcoal text on white background), and flexbox handled that nicely as well:

Two columns with flexbox.

Here's the entire front page in all it's glory:

View of entire front page.

Note that I immediately disregarded my own decision about white text on charcoal for a whole section. It is the testimonials section, and I felt it needed to look distinctively different (merely obeying the gestalt Law of Similarity here).

Secure email form:

For the contact form (on the contact page), I of course needed to go beyond HTML and CSS. Coding up an email form is easy enough, but to actually send an email takes something extra. PHP seemed the obvious choice, as most hosts will probably run it, and I'm slightly familiar with it. Taking the standard PHP function mail() I initially tried rolling my own script, which would have to include email validation and protection against header injection attacks.

Pretty soon though, somebody convinced me it would be much safer to use the popular PHPMailer library. It certainly was easier.