My on-line presence began somewhere in 2001 and it was under the ROBO Design pseudonym. ROBO Design was a web site where together with my twin brother, we presented our work and what we can do. This page presents the different iterations of the web site.
- The birth (v1.0)
- ND4SPDWorld era (v2)
- robodesign.ro (v3)
- Intense fairytale (v4)
- More personal (v5)
- The separation (v6)
Version 1 (2001-07-25)
The first site version had two versions, one in Flash and the other in HTML, both non-dynamic and really ugly :). You can notice the "very old" logo. When people entered the site, they had to choose which version they want.
Version 2 (2002-07-27)
ROBO Design v2 web site was released on 27th of July, 2002, at 15:50. Quoting our news back then: "This is a database-driven web site using mySQL and PHP.". It didn't had an administration module to manage the content. Features: comments, image rating and collapsible panels - this one alone was cool for me :). This was the first PHP and mySQL web site made by my twin brother.
This web site was hosted for free, thanks to some friends we had back then at nd4spdworld.com.
At the release date, the site had a slightly different interface. This one was created on 12th of June, 2002.
After several months, in October 19, 2002, we released an improved interface, which was really acceptable and it had a menu structure that we liked at that time. More details in the blog entry from back then.
As you may notice, for this small new version, I also created a new version for the ROBO Design logo. As unbelievable as it sounds, this logo was painted in details using MS Paint. After several weeks, it was repainted in Photoshop and made to look shiny. By May 14, 2002, this logo was completed. For those using instant messaging services. or forums, I made a simple avatar too.
This version "featured" an annoying splash/intro page with a huge image where users had to click "HTML version" to get to the site and they were told that a Flash version of the web site will be released. :) This never materialized.
Version 3 (2003-07-14)
Related blog entry: ROBO Design v3 release announcement.
Regarding graphics, design and usability, this brand new site was pretty nice when we released it. It was more advanced than the previous version, but still no Content Management System, thus it was a hurdle to update it. Features wise, it had two interface templates: v2 and v3. The back-end was completely rewritten, adding support for multiple languages, and interface templates.
Beginning with this version, the site moved to our own domain: robodesign.ro. It was hosted by a friend at S.C. Mobius Solutions S.R.L for a few years.
Version 4 (2004-12-17)
Related blog entry: ROBO Design v4 release announcement. This announcement featured a lot of new content on the site.
This version was graphically over-worked. The interface was looking pretty good for those times, (IMHO). It was built like some kind of a magazine, entirely graphical. The whole site had a fairy-tale theme, a summer night. Thus, I've designed an image to emphasize the site theme: Fairy-tale - still available on the site. Because of the intensive graphics, dial-up users had to have patient to load it. The new site had many new features: RSS 2 feeds, 35 emoticons for comments, a new voting poll system, the site was conforming to many web site standards and guidelines, a new rating system and keyboard shortcuts for accessibility. The site used the same back-end as version 3. It also had an option to enable a Flash version of the top bar. It featured a long animation of a summer night sky.
All the emoticons were painted in Photoshop, mostly pixel by pixel. I've been inspired by the ones found in MSN, hence the color scheme, and the ones found in Yahoo IM. They were all finished by 7th of August 2004.
Here's an early version of the interface, but I never finished it. The menus were supposed to have a mini-Flash game :).
The ROBO Design v4 logo avatars:
Version 4.5 (never published)
We worked on further improvements to the ROBO Design version 4 interface. Initially, the interface did not fit on the 800 x 600 resolution. The new version 4.5 had a completely reworked CSS layout. Even if the page looked the same, the interface was capable of dynamically rescaling to lower resolutions.
Also, version 4.5 served as a very good testbed for the new Opera Voice feature added in Opera 8. The site had a complete Voice navigation system which worked quite nice.
This version also had permanent links into the site engine.
The site was not released due to lack of time. When we had time, we no longer liked the site - it was way too bulky.
Version 5 (2007-02-13)
Related blog entry: ROBO Design v5 release announcement. A lot of new content was published this time as well.
This version had an entirely reworked site back-end. This version no longer allowed rating images, posting public comments and had no emoticons. This was all on purpose. We no longer wanted to deal with spam, so we decided the new site must focus more on the content - not community-like features. What we did instead is to give users just a simple contact form which allowed the visitor to quickly send us an email regarding the page he/she was viewing.
The site was done during high-school and we participated to some school contests with it.
Main features of the 5th installment: our own site search, a Google site map, permanent links - easy to remember, a blog with Atom feeds, and a nifty CMS made by Mihai. I was able to update my site in an easy way, phew ;). All the previous site were cumbersome to update.
The interface of this version of the site was not professional, because we wanted it more personal, subjective, more open.
We initially thought we should split the site into different "sides". I designed the interfaces and ... while I designed the front page, a shiny idea came. We dropped both interfaces. These are the initial designs, made on 11th of January, 2011:
Here's the interface of the web site, at the time we released it:
We wanted to have in the site dedicated sections for both of us, in a single site interface. So, it's quite clear that by having many menus, we would have cluttered the whole site. We took the decision to hide the menus under two named parts/sides. We are aware that this choice makes it harder for some people to browse the site. Over time, this proved to be a wrong decision and the biggest culprit of this version.
This site version had keyboard shortcuts and it was working in text-only browsers.
I tried to make a clean interface. The color theme was inspired by the colors used in earlier versions of the Ubuntu Linux distribution.
To some extent, the interface is within the same "fairy tale" vision as ROBO Design v4 was. The new interface of ROBO Design v5.5 emphasizes this aspect.
Version 5.5 (2007-07-23)
This update added several new features in the Content Management System. Awebitor, the WYIWYG editor from the CMS, got a good set of improvements, related to the layout.
The entire graphical user interface has been reworked, adding the "eye candy" factor. The interface is a lot more glowish, and technically more advanced than the previous one.
Back then, when we released the new version, we were very proud about a "universal search" field Mihai implemented in the site. The search field was allowing the users to easily access different pages and search through their titles with auto-complete or even leave the site by entering an external URL.
When you were moving the mouse over the title bar (below the logo), users were able to see the current page address, like a breadcrumb. By clicking on the search icon, the address would change to a "universal search" field. The entire user experience was flawed and cumbersome to use, counter-intuitive.
In version 5.5, Mihai improved the compatibility with Internet Explorer 6 and 7. We also made an interface specific for hand-held devices. We did our best to ensure users of portable devices will enjoy browsing this site (try Opera Mini or Opera Mobile). Yet, the cumbersome menu navigation, was not ready for touch devices.
We also provided the users a print style-sheet. The web browser is using the style-sheet to print the page how the designer choses. When you print a web page, you only get the content - no navigation, no fancy graphics.
Additional screen-shots (the hand-held and print styles):
Below we have some wallpapers and an avatar, published on July 30, 2007:
Version 6, current version
Since 2007, our web site stagnated. We only updated the contents of it, sporadically. We slowly grew unhappy of it, because the navigation system of the web site proved to be too difficult for users and prevented users from navigating the site and to discover the great amount of content I had in it. As the Web progressed in time, it was becoming more noticeable how outdated the UI is for ROBO Design v5.x.
In June 2010, I started working on a new web site interface. This time we decided to separate our web sites to prevent cluttering the interface again or to make a complicated navigation system. We also decided to use an Open Source CMS and not waste time and efforts into our own CMS. Initially we thought of MODx, but Mihai decided it was not good enough and we decided to use Django framework.
The design of my site had several iterations in Photoshop. The initial designs of the new site are the following:
Finally, we agreed on these designs:
By November 2010, I implemented the site interface in HTML, CSS in an early instance using MODx CMS. Mihai was too busy to help me implement the gallery and blog features needed. So, the project got suspended for some time. Here you can see how it looked like. In the following image, you can notice quite some differences between the Photoshop version and the CSS, HTML implementation.
Beginning with 2011 and slowly through to 2013, Mihai worked on a Django version of my web site and migrated the UI I did in MODx and actually worked on the features for the blog and gallery pages.
I've read various resources on UX, accessibility and usability of interfaces and I implemented some of the guidelines. In the new design of the web site I made my best to make an easy navigation system with fixed position of the menus, repeatable navigation actions through different pages of the gallery or blog pages, etc. So, the design for the site, suffered even more changes.
This is how the site for marius.sucan.ro looked like at release:
Please keep in mind that the site changes its look based on resolution and zoom factor. These screen-shots are just to give you a general idea of how the site looked at release.
We implemented a fully flexible interface that adapts to almost any screen or device. This is a fluid responsive design. The main focus is the content. The design uses specific colour schemes for gallery pages and other pages. The top section is very dark for gallery pages, to make the images standout, and the written content is in the inferior section, on white.
This site interface features an always visible menu bar. It also does not change its position when navigating from one page to another, making navigation easier. The sub-menu bars are also always in the same position when you start navigating between their specific menu items. The blog posts and the images can be navigated using repeatable mouse actions. The previous / next buttons remain in the same place between pages. "Related" column is populated based on relationships between blog entries and images. This should facilitate the discovery of content on the site.