Perhaps I should begin with what I consider as web design. I’m not sure if a one day to a week of work using premade templates can be considered web design as mostly the results are generic, at least it can’t be considered as your web design. Making something special, individual with graphics etc. takes a month or months for that matter depending on what to do. But these both approaches have different usages. The problem isn’t that simple though, and it is closely intertwined with the idea of information. Think of a nearly blank space that functions, that is a container for information, or mainly today for entertainment. In my mind the idea of communicating and transferring information is a misconception and over/underrates the human capabilities, but this is a complex philosophical discussion that we will perhaps take some other time.

In my opinion information is bound to it’s context and the context is information. With todays almost sterile platforms you are addicted to “new” information or the feed that in many cases don’t even have anything informative about it, only addictive aspects, a fix of sorts. My goal or aim is to drive web design towards bigger wholes where content and context cooperate and make a greater whole with real information, real content and real experiences and I don’t mean intuitive swiping, skimming, blazé type of addictive semi-experiences. I mean experiences that demands something from your mind, soul and even demands some time, but which also gives something with a greater worth, that builds something other than just giving you the fix or saturating the addiction.

Ok I’m extremely naive, but I’m honestly conserned about the way things are going and with the effect it has on our capacity to think and feel complex things. The way is more towards reactions/counter reactions in a very primitive manner. This amounts to a lot more wastefull consumption, you consume a whole lot more with simple primitive powerful reactions than with more complex demanding stuff and as these primitive reactions in the end don’t give you real “nourishment” you need to have more and more of it and faster because your hunger is not satisfied. But I see a way out, but it is not a fast way, that’s the whole point! And yes it demands something of you also…

Enough with semi-intellectual ramblings. My approach to web design is: do bespoken context for bespoken content, so simple. I try to use graphics, images, animation, video, sound, storytelling etc. to achieve this, but the journey has only just started…

Some MiMaVe-Design-Photo web design examples

Below I’ll go through some web design I’ve done that tries to incorporate the above mentioned ideas and the ideas from the SlowWeb ten commandments by MiMaVe-Design-Photo.

MiMaVe-Design-Photo.net loader animation

These loader animations can be thought as unneccessary, but in my opinion they are extremely important, they immidiately give you the feel of the site. So they can say a lot. This is done with svg and css animation and a JS timeout function. Using the logo for the base. It also functions as a page transition effect, even if there wouldn’t be that much to load. The possibilities are endless.

MiMaVe-Design-Photo.net site navigation

MiMaVe-Design-Photo.net site navigation takes the post images as the links for the pages etc. but also taking the link names as alts for the images with a click to “page”. It can also handle dropdowns and submenus within submenus. The menu system could be augmented with for example tag images etc. if there is a system for handling them etc. The menu is built with a custom walker.

Some visual (css) effects include a slight transformation for the active page. The non active item images are filtered with a grayscale filter, that is deactivated on hover etc. and when the page is the active page.

Visual and graphics on MiMaVe-Design-Photo.net

As stated before my aim is to make bespoken visual appearences to embrace the content accordingly. Here are some examples of it.

           As stated before my aim is to make bespoken visual appearences...

Using animated svgs

On the home page of MiMaVe-Design-Photo.net there is my “portait” as a quite simplified linedrawing with some tiny css animation involved layered between the backgroud image and the content.

What’s great about svg as code is that you can control the individual paths, groups etc. but also the graphic as a whole. Here you can see an example of a drop-shadow filter that follows the paths of the drawing not the bounding box. What’s absolutely great about this is that it can be also animated, not animated here but it’s a possibility…

On the MiMaVe-Design-Photo.net Ars Graphica page there is a perhaps more complex svg “package” using more the possibilites of the z-dimension. I find most webpage layout and visualization quite boring and one way to add some adventure is to add layers on top of the content. This poses a problem as you can’t click through layers. To escape this you can use two methods: use pointer-events:none, which renders the targeted layer unresponsive to pointer-events so the layer/layers under get the events instead, but this might have problems. The other way is to use graphics that only cover parts of the viewport, this blocks only the access to layers direct under. One important point is that the pointer events are on the bounding box of the graphics not only on the visual/opaque parts, so this needs some design consideration. On the Ars Graphica page both methods are used, but it works also without the pointer-events:none and I like it more that way, more interesting, but for the users convenience it’s backed up by the pointer-events:none also. As you can see from the image the content goes in between the tree branches. There is also some “wind” movement animation on the tree…

Another playful svg graphic can be seen on your right. Using a sroll events js function to rotate the WebDesignBoys head, he’s thinking 😉 , and moving him vertically while scrolling.

Video elements on MiMaVe-Design-photo.net

There are a couple of video backgrounds on MiMaVe-Design-Photo.net. On Ars Phtographica some Moon footage. I especially like the effects the variation between the black sky and the “white” moon makes on the content. And of course there is the background of this web design page with an quite basic 3d animation “snippet” as a background. I especially like the effects the big planet makes when it appears from darkness on the upper left corner of the screen. The background video does not work on all smartphones/browser because of that it’s of importance to have a placeholder for it also. But when you have the possibilities and capabilites to make individual video material for the site and the bandwidth capabilites of the users become less hindering and mobile gadgets become even more broadly welcoming the possibilites for nice video effects are bewildering…

MiMaVe-Design-Photo.net content layout considerations

As using a cms (WordPress) as a base. It gives a lot of possibilities for content layout, at least with the new versions with Gutenberg as part of it. I tried to make the most of what the current WordPress offers concerning layout possibilities. Inline images, video material, columns, verse etc. effects etc. Individual separators for the different pages, site spesific design for the comments area etc. Wp 5+ gives a lot of possibilities.

Problems in web design

Web design isn’t problem free and the more you try new things and try to do interesting stuff the more the problems come forth. Every operation system has it’s quirks, but Ios like systems are a constant problem, there is almost everytime something broken or “funny” on these devices, often on all browsers, I think that they have to use the same engine on the system, this happens even with the “safe and tested stuff” that should work/have worked, and new quirks come as often as the “updates”. And what’s even more odd is that with even the same software versions on Ios there are quirks between the different hardware, something works differently on this version of an Iphone than on another, same with Ipads, need I say more… Android, Win and Linux function much better in these regards, I don’t have constant access to a mac, so the testing on these is a bit more sporadic…

Then there are the browsers, their functionings are as myriad as their names. So web design isn’t just sketching something nice. Most of the work is in making it function and testing, testing and testing with different OS’s, different hardware and with different browsers. There is always and I mean always something unexpected. There is often bugs on the most prominent web pages also, this does not mean that the problem is in the page, often it is in Ios or Window’s Edge. Just for the fun of it do a test of a big site with all the hardware/gadgets you can get your hands on with as many a browser as possible… What make things worse is that it’s not easy to find the problem on Ios as you can’t use the developer tools without using another machine for this… Edge has become much much better, Explorer was terrible and Edge partly also… But there is a point in why I’m ranting about this: web design isn’t that simple! For better web experiences use Firefox, it functions most of the time as expected, but even on Ios there is the Ios problems, there is also chrome, but… So once more: The point I’m trying to say is that it’s not that easy and then there are all the different sizes of hardware 🤪… For example there is still some visual missbehaviour in Edge and Ios on these pages that I’m not satisfied with. For example had to use a hack to get rid of an Extremely ugly Edge problem, but that ended up in a less nice version for Chrome… So even with stuff that should work and checked with Can I use or from mozillas developer site, can have quirks, mainly on Edge and Ios though… But this is something you just have to live with when doing web design… 😄

Try, test and Enjoy!