Dolphin PRO Responsive Design Prototype

Work on Dolphin PRO is resuming alongside with Dolphin U development. As we've announced earlier among other things Dolphin PRO will be getting a responsive design overhaul. There are many ways to make website interface "responsive", though. In Dolphin U, for example, we are experimenting with more unconventional, but compact main menu and adaptive popups, while pages content relies on either masonry grids or adaptive resizing. Dolphin PRO is a different beast, however. Menus are multi-level and there're so many various content types that no one trick can tackle it all. 

"Clear" Design Language

Clear - "easy to perceive, understand, or interpret" ; "free of any obstructions or unwanted objects".

We've been exploring different options, putting together different sketches and testing various solutions. We start off with what a "Clear" principle - what doesn't have to be there, mustn't be there. Thus, we should do away with unnecessary shadows borders, textures, gradients, etc. More importantly, we should remove any cognitive load where it's not helping the end-user. Links and menus should only show when necessary; options presented only if needed; meta information minimised, etc. 

For easiness of perception, we should look for removing any unnecessary action steps; abridge text explanations; simplify forms. UI design decisions should rely on recognisable conventions that make interaction with a site as intuitive as possible. 

And, naturally, we should seek for the design to be absolutely mobile-friendly. So, again, testing on mobiles and tablets first, and then adjusting for desktop.

First Prototype

Today we'd like to show you what we believe is going to be a very close approximation of Dolphin PRO visual design. Let's take the homepage with basic elements...

This is a "desktop" view. So you can see extra elements like search box and notifications icon in top menu. In mobile view they would hide into side menu and member-menu. 

Other elements, like buttons and blocks are as simple as possible. Splash screen is a classic "template" for just about any type of community site intro.

Now, let's take a look at the main menu...

Since Dolphin PRO has so many modules with multi-level menus we decided to opt for vertical side menu that also incorporates site search. This method has become reasonably conventional, so we may expect users to grasp the idea quickly. Most mobile versions of social networks, online newspapers and web stores use some form of slide-out side menu now. 

Side menus can work in many different ways as well. They may "push" the whole site or overlap (like in our example). They may also appear static when there's enough screen space. At this stage we believe that simple overlap is the most straightforward way, but live testing may bring more ideas. 

Walking The Walk

Despite ongoing development of Dolphin U we decided to ramp up active development of Dolphin PRO now (by popular demand). In part this is because Dolphin U development process often births ideas that just should be implemented in Dolphin PRO. And if not done right away, they may be easily forgotten or overlooked. 

Actual release or even Beta versions are still months away (think Spring 2015), but SVN is always there for enquiring minds. We will also keep you updated, even during planning/prototyping stages like we do now. Times and times again we see how community input (especially on early stages) navigates us towards the right direction. So, do let us know what you think, please!