English
DeutschBefore people do anything on this website they should probably understand the design philosophy behind it first and for this I'm making this tutorial.
Most people should not need this, because the design philosophy should be obvious as it is simple and genius, but some people still seem to have issues understanding it and I admit, there may be some twists that are harder to figure out.
Logo:
So let us start with the most obvious thing, which is the logo on the top left, this is just there because I thought I need a logo because others have it and it is common to have one, so I put on there, it looks nice and it shows you where you are at at any time, genius isn't it?
User login bar:
Let us move to the top right now, you can see a user login bar as the website was originally intended as a multi user website, but as people turned out to be unreliable and lazy, there never have been many users and I disabled the registration, because I don't want to deal with idiots or spammers or legal issues, so for now it is just there for me. What people without an account don't know is, that when you are logged in, that login bar disappears and turns into a user menu, where you can edit your profile, add content and logout. Maybe at some point I will remove it, but I just wanted to clarify it.
Language Selector:
Right below the login bar there is the language selector, where you can switch between "English" and "Deutsch" (German), additionally you have the flag right next to it, to make it even more idiot-proof. The whole website is multi lingual, so it can be in all languages at the same time, but I limited it to two languages, the most important ones, German and English, but honestly even this is too much work for me, so most website content is only available in english, most of my visitors are english speaking anyway.
Search bar:
Below that there is the search bar, where you can search things on the website, kind of obvious. Maybe too obvious for many people as the search function is more a last resort, since the content on the website is already sorted and can be further sorted by using the menus I will explain later.
Main Menu / Top Navigation Bar:
This is the most important part of the whole website and of most other websites as well, as it allows you to navigate between all the content of the website quickly.
You can see items like "Blogs Art Uebergame Communication Wisdom Tutorials Links About" - Those are the major categories of this website, when clicking on one, you get to a sub category, which will then be navigated through the sub category navigation bar on the left side. By default the website opens the "Blogs" category, so by entering duion.com you in reality are going to duion.com/blogs as duion.com does not exist.
The website itself is a content management system, so it has no websites by itself, it is a system to display different content types, so you have to go to a sub category in order to see something.
Secondary Menu / Left Navigation Menu:
You are probably on duion.com/blogs now, if not go there, you will notice in the left block which is the secondary navigation menu items like "Blogs Art Games Communication..." etc. This is one of the potentially confusing parts for many people, because why should you go from the main menu to a sub menu with the same items again? Well that is simple, because what you clicked on the main menu defines the primary content type, so everything in the "Blogs" category is a blog. So you will have blogs about art, blogs about games, blogs about communication and so on, that is why you have all the items that were in the main menu there again.
Sometimes the secondary menu has less items than the main menu, often more. The menu entries often repeat, because I try to keep the same sorting categories, which should make it more understandable.
You have to think about what the content type is primarily, everything under "Blogs" is primarily a blog post and everything under lets say "Links" is primarily a link, even if you have under "Links" a sub category that is called "Blogs", that is how everything on this website is sorted. It is all about main attributes and secondary attributes.
Main Content Window:
In the middle which should be kind of obvious is the main window, which is used to display the actual website content. However in case of being on duion.com/blogs category it does not display the actual blogs, but just a preview version, so you have to click on the actual title of the blog in order to read the full blog post article. I chose that design, because it keeps the website smaller and you don't have to scroll that much, but still can see a lot at the same time and even read the teaser which is a short description what the full article is about.
If you look at the top of the main content window you can see "items per page" and "offset" where you can even specify how many items you want to preview, so theoretically you can preview all the content items in one sub-category at the same time.
Responsive Style:
I just mentioned that you can theoretically preview all the content of a sub-category at the same time, but you may notice that your screen may not be big enough for this and/or you have to scroll a lot, well for this you can just zoom in or out and the whole website is designed to adapt to almost any resolution.
Mobile ready:
The responsive style kind of makes the website also mobile ready, but I have not optimized it for mobile, as I'm not a big fan of mobile devices, but it should work, more or less, you should turn your device sideways, because computer monitors are widescreen as well, which is what the website works best with.
Color coding:
As you may have noticed, the whole website is color coded, background is a grey similar to what you have in dark themes of artist tools like Blender and text is a darker white. Menu items are gold, everything that is a clickable link is blue and everything that you can interact with and gets highlighted becomes orange. There is also a grey text sometimes, that is less visible, which is used to display more unimportant informations like date when the post was made or who made it etc.
90s style:
Some people said, the website looks like it was made in the 90s, well that is intentional, I think the 90s were a great time, kind of the golden age of the internet, which is why I made my style like that. It is also a unique kind of style, which is only obvious to certain people, but I keep it as kind of an easteregg. I don't know why people criticize the style, it is unique, why should a boring flat metro style layout be better? I don't want to be everyone else, I have my own style.
I also like the idea of having the background space, so you only focus on where the actual content is, but still everything has low contrast and soft edges, so it does not hurt your eyes, through under certain conditions I admit the contrast is too low.
Back then computers were usually with black background and white text, so I wanted to reproduce that, for some additional retro feeling.
Some people think a product is bad, just because it looks old, but the fact is, the technology is from today, but the looks is from the past, I tried to combine some of the good parts out of both eras.
All in one:
My original plan was to make only one website and integrate everything else into it, kind of similar to Uebergame, but now I feel that there are limits with doing that and separating different features into other projects/website may become necessary in the future. I have also a lot of unused features, which I don't know if they will ever be used. When I was developing the website, I just wanted to try out everything you can have, so I integrated a lot, but many features I did not use or hardly use them.
The all in one design was a hard decission, because if you do everything you do on one storefront, people associate you and everything you do with your products, which may be a disadvantage, because if you for example state your opinions publicly, there are people who will not like you because of that and boycott your products as a punishment for having the "wrong" opinions, kind of insane, but that is how people are.
Same style/design as Uebergame:
As some may have noticed already, Uebergame has a similar visual style and menu design as this website, I kind of intentionally made it that way, because both are connected and share a lot of the design philosophy behind it, so I wanted to also make it look like that.
Uebergame is similarly designed as this website it is one ueber/above game with many unter/sub games, but all in one, like this website, which is basically an ueber website for many unter/sub websites. The folder structure of Uebergame is also partly similar to how content types on this website are sorted.
Well I think this covers most of the basics, I may need to make separate tutorials anyway on how to use each sub-section or different features, so look out for them.