Ivo Mynttinen

Applovin Website

Ivo — Mon, 30 Jan 2012 22:12:05 +0000

In January 2012, I designed the corporate website of an startup company based in Palo Alto. They needed a good looking website that matched the style of their ad server interface (also designed by me). The result was a clean looking, high quality website that shows the biggest benefits of the ad network and presented the business in a modern, state of the art look.

–the home page. The home page gives potential users a quick overview about the reasons why they should use AppLovin as their ad network. It also shows a few of the partners that AppLovin are working with.

–the about page. Company related information is presented on the about page and can be navigated via the tab navigation on the left.

AppLovin is always looking for skilled people to join their company. This page offers some information about how to work at AppLovin.

–press page. Since AppLovin is a startup company on the tech scene, press and marketing are an important part of business. This page shows existing posts on popular tech blogs and shows quick information about how to contact the company for additional information and press material.

–login area. Existing users can login here.

Quick Summary:

Tools: Adobe Fireworks
Estimated time: 15 hours
Client: Applovin Corporation
Working link: applovin.com

My website has had a major optical makeover

Ivo — Mon, 26 Dec 2011 00:43:15 +0000

I launched my new website around six months ago. Even though I was really satisfied with the result, I wanted to take it to the next level, making it more beautiful and usable for my clients and for readers of my blog. Today I‘m rolling out all the changes I‘ve made over the last month. Say hello to the theme that I‘ve called White Aurora 2.5 and explore all the new details!

In previous months, I have had a lot of feedback for my previous site design; I have received a lot of tributes as well as a few very interesting ideas on how to improve my own web presentation. The most criticised part was the home page, where I had presented my latest articles and work in a way that a lot of people found kind of strange – only big teaser images glued together without any text or descriptions of what to expect behind the linked image. While this was a big help to me (especially because I found this way super intuitive when I launched the previous version of this website), I‘ve also discovered a few other usability problems myself. It took me around one month to eliminate these problems and come up with a sweet-looking and even more functional design.

So, what‘s new here?

The biggest thing is firstly that I‘ve completely redesigned the home page. I‘ve reduced the size of images – I‘m still using big teasers, but the graphics have been reduced to the important parts, whereby showing the key visuals of my work and fine graphics for blog posts. In addition, I‘ve added excerpts for each post to provide the visitor with a better idea of what he is looking at.

– the brand new home page, better check it out live.

I‘ve also improved the work section itself; there are no more endless lists of posts presented in a boring way; the new work section on my site features a filterable list of my recent work. I want to thank Alexander Trefz here, who helped me to get everything right on this page.

– the portfolio section.

The content pages, like this post or even the about and contact pages, received a new sidebar with some useful side information and important links that the visitor should check out.

An exclusive page for Internet Explorer users

I hate IE. A positive thing is that only around 2% of my visitors are visiting my site in an Internet Explorer version below 9. My site breaks on a few points and cool stuff, like animations or gradients (yeah, that‘s basic), will look strange or will not display when viewed in IE. This is why I‘ve closed this site for IE6, IE7 and even IE8 users. They now see this page and can decide to switch to a great browser or just turn around and leave this site.

– this landing page is shown to all visitors using IE8 or older.

I posted this image on Forrst a few weeks ago and it became the most popular post of the week in a short amount of time; however, as expected, an epic discussion started on why I‘m “censoring“ the web for IE users – if you‘re interested in my motives, I suggest you read and join the discussion on Forrst (you need to be logged in to view comments). Maybe I will also write a blog post about why we (as designers and developers) should drop support for antiquated browsers better early than too late.

The brand new client area

Since I‘m working with more and more clients now, I thought it might be a very cool addition to my site to provide those great people who pay my bills with their very own area. At this place, all my existing and new clients can access their final design files, testing areas for sites in development, estimations, contracts and invoices of all their projects. They can just view documents on the website or download a generated PDF file for printing and storing in the books.

The new client area is great for both sides of cooperation: clients can access all their files anytime and anywhere, while I don‘t have to deliver and redeliver documents the manual way.

All the small details…

…are important. Here are the small things that you might miss on a first view, but which are essential for a great impression to the visitor:

A new Archive page. The only page that comes with an “old“ touch. The reason behind this is that you will find everything I‘ve ever published on the Web, no matter how old this stuff is.
Live Search. Something I find really useful when you are searching for something. Why redirect the visitor to another page when you can show the results of his search directly without any interruptions?
Curriculum Vitae: I‘m not a big fan of CV‘s or formal applications; however, it happened some times when potential clients were asking me about my CV. Now they can download it if they want.
A workload indicator. Depending on my current workload, I will update this little traffic light on my contact page to show clients if I have time for their new projects.

Final words

I want to thank everyone who led me in the right direction for this update – special thanks goes to Alexander Haase, who found the most crucial points that I should revise directly after my last website launch.

I would love to know what you think about the latest changes and I’m always curious about what others are thinking about my designs; please let me know if you have found something which you think could be done in a better/other way. In addition, please drop me an email if you find any bugs.

Zanks! iPhone App

Ivo — Sun, 25 Dec 2011 18:52:20 +0000

In 2011, I designed an iOS App called “Zanks!“, which allows its users to save money at their favourite local stores and businesses. Business owners receive feedback from their customers about the service, as well as have the chance to achieve a positive viral effect when users share their good experiences with the business on social networks. The app received a friendly and eye-catching look, in combination with a few subtle animations.

– the home screen of the app displays big buttons that allow the user to check in at a store. Whenever a user checks in at a store, he receives a specific amount of points that he can save for achievements. If an achievement has been unlocked, he can get free services or products from this store.

– feedback and settings screen. On each check, the user is asked to give feedback, which can help business owners to improve their service. In addition, the user can share this feedback or just provide a quick message that he was at this store, via Facebook or Twitter.

– The App icon includes the ribbon from the Zanks! logo directly, which turns out to be super eye-catchy and which improves the brand recognition.

Quick Summary:

Tools: Adobe Fireworks, Photoshop
Team members: Bogdan Mihaiciuc (Icon design)

How to achieve pixel perfection in your designs with Adobe Fireworks

Ivo — Tue, 11 Oct 2011 18:25:53 +0000

When it comes to user interface design, Adobe Fireworks is an excellent tool for laying out your ideas and also for creating cutting edge graphics for your App/Website. Like in any other graphic software, there are different ways to create one effect. However, the result doesn‘t always look the same for each method. In this article, I want to show you how to achieve real pixel perfection in your designs.

Warning: this article is about how to achieve the pure perfection of every single pixel. If you don‘t care for one or two misplaced pixels in your design, this might not be an interesting article for you. Otherwise, please enjoy the read.

Create smooth glow effects using feathered edge

When you have an object in your design that you want to emphasize for some reason, making it shine is a great way of grabbing the attention of your users, and also of keeping the interface eye-catchy. In Adobe Fireworks, there are three main ways how to create a glow/shadow, but the result is also different for each method.

Fireworks glow effect

This is the standard glow effect provided by Fireworks. The effect can be added to any object via adding the Filter, “Glow“.

In this example I’ve used a glow distance of 0 pixels and an opacity of 50% while I’ve set the blur to 14px. This should generate a wide glow without any distance to the light source.

- a simple glow effect using Fireworks glow filter.

The problems can be seen in the image above; if you use this effect for a decent (around 0-30% opacity) glow, the glow won‘t be totally smooth and you can detect the corners in the glow – something that should never happen. The glow filter can be easily used for hard glows or glows with a very small blur (max. 6px), but you should avoid using this filter for a big glow with a low opacity.

Glow via Photoshop-Live Effect

Since Fireworks allows you to use Photoshop Layerstyles, you can also create a glow via the Photoshop-Live effect, “Outer Glow“.

The Photoshop-Live Effect offers a few more attributes then the Fireworks glow effect. In this example I’ve tried to achieve the same result like generated by the Fireworks effect.

- simple glow effect achieved with the Photoshop-Live effect, “Outer Glow“.

The PS-Live effect works very similar to the Fireworks filter. The main difference between the Fireworks filter and the PS-Live effect is the blend mode of the applied glow. The PS-Live effect uses negative multiply as its default blend mode, which cannot be changed, while the Fireworks filter uses the normal blend mode as its default. The difference is minimal and, personally, I don‘t see any difference. The problem remains the same; you can also see the corners of the glow.

Glow using a second shape with feathered edge applied

This method requires a second shape, which is slightly bigger than the shape you want to apply the glow to. It should have the same attributes, like your original shape (e.g. color, other effects), and you have to place it behind the original shape. When you change the edge-mode to “Feather“ for this shape, you can achieve a very smooth glow effect.

- the result we want – a very smooth glow without any visible corners.

Since this method generates the smoothest result, I recommend always using this way for decent and extremely wide glows. You can only use this effect if you‘re working 100% with vector shapes. If you want to use this method for text, you have to convert your text to a path first, because text doesn‘t let you change the edge-mode.

Another way to generate a glow effect is using the Filter, “Gaussian Blur“. However, it seems like this filter is using the same algorithm to render blur, like the “Glow“ Filter. What this means is that you are confronted with the same problem described above, when choosing to use gaussian blur to create a glow.

When to dither your gradients

Since the Creative Suite 5 update, gradients can be “dithered“. Basically, this means that the colors of the gradient are mixed a little bit on a subpixel level. This results in a very decent grain, which blurs the color gradations.

The Dither tool is a great feature, which allows you to create smooth gradients with a small amount of colors between the different color stops. While this is the main purpose, you shouldn‘t use dither for any gradient. On smaller gradients with enough colors between two stops (which means ideally one color per pixel), there is no need to dither. If dither is used on such gradients, it will interrupt the natural flow of the gradient because the position of the color stops will be manipulated.

Get the most out of your text

While font rendering isn‘t the thing Fireworks does best, you can do a lot with custom anti-aliasing settings, in order to get your text looking right. Of course, there isn‘t one rule you can apply to all your text but if you use standard sans-serif fonts, such as Helvetica, Arial or Verdana, these settings should work effectively:

For serif and script fonts, it can be a bit tricky producing decent results because the little serifs are often rendered too hard or too soft. Just try and find the middleway here, through dragging the sliders of sharpness and strength.

When you create very large headlines (around 56px or larger), for example, for a huge title in a website‘s header, which uses sans-serif or pixel fonts, I recommend to always convert the text into paths. If you can detect some half-transparent misplaced pixel then just use snap to pixel to achieve a sharp, yet smooth and anti-aliased text.

These were just a few tips I wanted to share with the pure pixel fetishists out there; I will share some more via Twitter or maybe on another blog post in the future. Please also let me know what you think about these little details and if you know any more tricks in getting the pixels right.

Bränslesmart iPhone App

Ivo — Sun, 09 Oct 2011 18:00:34 +0000

At the beginning of 2011 I designed an iPhone App for locating gas stations while driving a Car in Sweden. The App also shows the types of gas available as well as the prices. It also shows any additional services offered at particular gas stations such as car wash facilities, coffee and much more. I’ve completed a design which maintains the conventions given by iOS but also adds some subtle eye-catching uniqueness.

– the home screen. On the map you can see your own locations as well as all nearby gas stations. Touching the logo of the station will open all available details with regards to this gas station. While you can view your nearest gas station on the map view, you can also see them listed by touching on “Lista” in the Tab-bar. Filtering and sorting can be adjusted for both, the map and list view in the settings.

– the detailed view shows the types and prices of gas sold. In addition, here you can find out which additional services are offered by swiping the screen to the left. Touching the Map-Icon on the titlebar will actually open the Maps App which will give you detailed directions from your current location to the gas station.
Download App

When workload is going crazy I have some talented partners to outsource some work to meet the deadline. In this case, Bogdan Mihaiciuc, a great icon designer helped me with the App Icon for the Bränslesmart App.

Quick Summary

Tools: Adobe Fireworks, Adobe Photoshop
Teammembers: Bogdan Mihaiciuc (Icon Design)
Estimated Time: 2 days

Kazoo Analytics

Ivo — Sun, 09 Oct 2011 17:00:06 +0000

In September 2011 I’ve designed & developed the front end of an analytics tool for adsimilis, called Kazoo. The Web App is built for analyzing and comparing statistics of advertisements on the web. While the user interface was designed in a very modern and slick style, the front end relies on some of the latest technologies, such as HTML5, CSS3 media queries, hardware accelerated animations and SVG charts.

– the main Dashboard of the App. The Dashboard gives a quick overview about all metrics. The user can add new Widgets and rearrange the position of them via drag and drop. On the top of the page, the latest campaign news is shown as little notes; the user can view this news in full size or just delete it.

– maximized news – shows all the information on the same page within an overlay. Users, which are using Safari or Chrome as their Web browser, can have the custom scrollbars, which fit perfectly with the notebook style of the whole overlay.

– bubbles with additional information appearing on mouse over. Each metric-Widget gives the user the option to export and download the shown data. The export menu is hidden by default, but pops up when clicking the small document icon.

Because the small graphs only provide the course as information, an extended version is shown on mouse over.

– overlay that shows table formatted data. With clicking on the title of a widget, this overlay pops up and provides the in-depth data of the widget. For huge tables, a horizontal scrollbar appears. All tables can be sorted by any attribute – ascending and descending.

– Settings page. Every user of Kazoo can adjust the settings for his/her own needs. All operating system specific controls, such as checkboxes and dropdowns, have been replaced with custom controls that fit the style of the whole App.

Quick Summary

Tools: Adobe Fireworks for design, Coda for development
Technologies: HTML5, CSS3, jQuery, protovis
Estimated time: 2 weeks
Client: adsimilis
Working link: for internal use only

The Endless Fireworks vs. Photoshop Battle

Ivo — Tue, 09 Aug 2011 20:10:13 +0000

During the last months and years we have seen countless posts on popular Blogs about which application is better – Fireworks or Photoshop. In some cases this was just useless bashing of one product, whilst in other cases there were some good points regarding when and why to use one of these Applications rather than the other.

Since I launched the website FireworksLab (a free resource page for Adobe Fireworks files) some weeks ago, I have received various mails from people looking for a reason why they should use Fireworks instead of Photoshop. I have never answered any of these mails due of a lack of time but now I’m going to tell you why I use Fireworks instead of Photoshop for interface design and why you could do too – or why you should continue to use Photoshop. In addition I will show you why most of these “Fireworks vs. Photshop” posts are completely taken out of context and what I think about the Pros and Cons of both Adobe products.

The right tool for the job

Fireworks was made to build and export web graphics in an elegant way. Following the popularity of mobile devices like the Apple iPhone it is now often used to mock up and design user interfaces for apps.

While inDesign was made only for print, Fireworks was made only for Web. Each attempt to build something for print (like a flyer or a poster) will fail from the beginning – by default (this limitation can be bypassed) your documents cannot have a higher resolution than 6000×6000 pixels and after adding some objects to your canvas, Fireworks will become slower and slower until eventually, Fireworks will crash, of course. This is one of numerous reasons why you should never use Fireworks for print (I’ve tried it more than once).

Photoshop works kinda different – you can work with CMYK-Colours, high resolutions and filesizes bigger than 2GB (the biggest Fireworks *.png I’ve ever seen was 50MB) but with Photoshop this is not a problem.

You can guess what Photoshop was made for. Correct, Photoshop was primarily built to correct and manipulate photography. While Photoshop offers many ways to manipulate photos, it has a lot of built in features that can be used for web/interface design. You can use Photoshop to produce screen graphics but also for advanced print stuff.

Photoshop became popular as a big, mighty tool for creating and manipulating digital artworks over time. Everyone knows you can do anything with Photoshop. I guess that’s the reason why so many web designers decided to learn Photoshop instead of another design application – good marketing Adobe!

The little big differences

Vectors or Bitmaps

When you create an object in Fireworks (whatever it is), this object is basically a vector object. This means that when you scale up or down you won’t loose any quality. This is great but even more awesome is that when you’ve applied an effect (e.g. a dropshadow) to that object and you scale the object up, the effect will scale too. Fireworks will not just change the dimensions, it will also change the attributes from the applied effects. This feature can be a huge advantage when you are designing Apps for iOS.

Photshop generally works with bitmaps, not vectors. Sure, you can create vector objects, but Photoshop is always less intuitive than Fireworks when it comes to this job. Effects in Photoshop will always stick to their attributes and won’t change their dynamic when you scale up something.

Font Rendering

This is one of the big disadvantages of Fireworks – as a graphic design software made for the web it’s unable to render fonts as they would look in real Webbrowsers. The default anti-aliasing settings which can also be seen on Photoshop (sharp, strong, smooth) are nearly unusable and you have to set up your own custom settings for font rendering for different fonts and different sizes.

While you can create and modify objects like rectangles or cirlces faster with Fireworks than with Photoshop, you end up having to play around for a long time with font rendering settings if you are working on something with many different fonts (and font sizes) and you care about how the fonts look on your design.

Image Compression

There have already been some comparisons on the web between the image compression capabilites of Fireworks compared to Photoshop. The result: Fireworks does a better job on saving flat png files at higher quality but lower file size.

Personally, I totally don’t get the point of those comparisons – when you export graphics from your primary design software for use on websites or apps you should not care about the filesize. The reason behind this: there are tools which do a much, much better job when it comes to compressing graphics for the web than any Adobe software out there! While Fireworks has a good image compression technique, tools like ImageOptim or the webservice PunyPNG will still beat it.

Updates, Patches and Features

When reading changelogs of major releases of Fireworks you will (if you’re just a common webdesigner) find around three or four cool things you are happy about. In addition you will read that Adobe has added some new super ugly templates which no one uses as well as more Web 2.0 glossy gradient styles, some Flex-Export-Thingy (that the majority of users never need) and enhanced (but still not usable) CSS-Export.

Here are some examples of what could be really useful features for the common Fireworks user:

Mac Trackpad Support
Insert layer styles directly as CSS3, export Layer styles directly as CSS3
Folders for Pages
Improved Layer styles and/or better integration of Photoshop Live-Filters
Bugfixes!

I get jealous when I see which new features Photoshop-designers implement with every new major release of Photoshop – cool things like content aware fill, smooth edge detection or live colour comparisons.

Stability& Bugs

Fireworks definitely crashes more of often than Photoshop but actually I can see the light at the end of the tunnel. Since the release of Creative Suite 5, Fireworks chrashes less than in previous versions. I’ve also noticed the Mac version is way more stable than Fireworks for Windows.

Regarding the Bugs… you fill find a lot of them in Fireworks, they are simply part of the product. You have to learn how to avoid them and how to fix your document when they destroy parts of your design. After some time you will be familiar with most of them and you will know how to bypass them.

– you will see this dialogue very often as a regular Fireworks user, ways too often.

Photoshop also contains some bugs but it’s way more bug free than Fireworks.

Developer-friendliness

A big advantage of Fireworks is it’s simplcity and how it handles selection of layers. Photoshop files can become very messy when you want to design fast. If you don’t clean up your files at the end of your work it will be really hard for the developer to find the correct layers and groups to export.

I have worked with several web and app developers and all of them learned the basics of Adobe Fireworks (in general that’s selecting, dragging and exporting) in less than ten minutes. Trying to explain to a total newbie (and non-designer) how to handle layers and countless masks in Photoshop can become a day job.

User Interface and User Experience

While Fireworks looks like an Adobe product, it still feels like something made by Macromedia. The overall style of the UI is the same in PS and FW since CS4 but the way the user interacts with the app feels totally different.

Overall, both Fireworks and Photoshop have the common elements every graphic design software has: tools, layers and a lot of windows/panels for colours, gradients, vector tools and much more. In my eyes there are only two huge differences between both apps: the way they to apply effects to objects/layers and how they work with gradients.

Effects

In Photoshop there is one common way to apply effects to a layer: you click the -symbol and a window pops up which allows you to apply and change all the effects for the layer. You can apply one effect once to one layer.

In Fireworks there is a totally different way to work with effects. You can apply them via the properties panel in the effects section which you always open. To add an effect, click the “+” and choose your effect. Adjust all the settings for the effect and be happy. No extra windows or dialog boxes. I think the way that Fireworks handles this is much more intuitive than the way Photoshop does. More great things: you can apply the same effect as often as you want and you can’t just delete your effects.

Gradients

In Photoshop, gradients are handled as simple effects. You can apply them like all other effects via clicking ““. There you have the settings and you can play around with these to achieve your desired result.

In Fireworks gradients are not applied as effects but as gradients! There is a main section dedicated to gradient settings. After you’ve applied a gradient to an object you can drag, cut, rotate and squeeze gradients via the gradient handler – a special control that is used only in Fireworks.

- If you’ve never used Fireworks before, you probably don’t know how to handle gradients. Here is how it works.

Finally, should I switch?

If you have worked your whole life with Photoshop then lot of things will look unfamiliar to you in Fireworks. The same is true for Fireworks power users who try to use Photoshop for the first time.

In terms of user interface design, I think Fireworks is just the right tool for the job. If you have never worked with Fireworks before, just give it a try, watch some tutorial videos and try out some simple stuff. If you still think you can achieve better results faster with Photoshop, then just stick to Photoshop.

This advice also applies to actual users of Fireworks: you shouldn’t think that Fireworks is the best piece of software and that there will never be a better tool to get the job done. Personally I love to use Fireworks for Web and UI Design but when it comes to illustrations, icons or something to print I think it’s better to drop your good ol’ friend and start learning something new.

What about you?

Do you use different Apps for different jobs, or do you stick to one software? Do you prefer Fireworks to Photoshop and if so, why?

The iOS Design Cheat Sheet

Ivo — Tue, 28 Jun 2011 14:09:43 +0000

When you are designing a lot of applications for Apple’s touch devices like the iPhone or iPad you often have to follow some conventions regarding sizes or radii of Icons, Buttons or Tables. Because it is always a big time loss if you have to search on the Web for this information again and again, I’ve put the most important specifications into a nice iOS Design Cheat Sheet.

Download the iOS Design Cheat Sheet

You can download the Cheat Sheet as printable (300dpi) PDF or as normal sized PNG.

While I’ve found out some information on my own, these guys provided some very helpful details via Forrst or Twitter too: Sean Nicholls and Fabio Basile.

Some Tips that can be useful

The Help Sheet offers the most important information but the devil is in the detail. When designing for the iOS (especially when you have to design for all kind of displays) there are numerous details you have to care for.

About pixels and points

When scaling your design up (for Retina) or down (e.g. for 3GS) you don’t have to change the DPI for your document in Photoshop or Fireworks – you have to absolute double/half the resolution (ignore the DPI and stay at 72).

The Points are more similar to Points for Apple’s devices, more information about the Resolution Independence can be found here.

About automatically added effects to App Icons

There are some effects that will be rendered automatically for App Icons, such as:

Rounded Corners – this effect can not be removed turned off. You should save your Icons as squares without rounded corners because they will be added by the system itself.
Default gloss effect above the Icon – this effect can be removed if needed, use the UIPrerenderedIcon plist settings to disable.
Dropshadow – can not be removed.

About automatically added effects to Tab Bar Icons

Tab Bar Icons are handled differently than other Icons; you don’t have to provide normal and active states for the Icon, just the basic shape with transparent background. iOS will add all effects to these shapes. That includes gradients, overlays and dropshadows for both, normal and active states.

About image formats

When exporting images you should always choose to export as PNG (24 or 32 bit).

Any additions?

I hope this Cheat Sheet is a useful resource for everyone who designs iOS Apps. If you feel I’ve missed something, or have a tip that should be added to the post, please let me know in the Comments section below.

Website Redesign “White Aurora”

Ivo — Tue, 21 Jun 2011 18:18:06 +0000

After around two weeks of late night, Energy drink-fueled, designing and coding, I am very proud to unveil my latest website today. The old site has been completely redesigned and you can see the new design live now. I’ve called the latest version “White Aurora”.

What’s new?

Without trying to exaggerate; nearly everything! Here are the most important facts of this big step:

Completely new Design
The new Design has been coded from scratch relying on techniques like WordPress 3.2, HTML5 and CSS3.
Complete Language switch! My old site provided only a german language option. As the majority of my clients and readers are english speaking, I wanted to make my site more accessible to readers from all over the world so that they can understand what I’m thinking about ‘this and that‘. The german version is no longer available but the posts of my old Blog can be found in another place soon.
A new domain. While my old site used a German TLD, the new one comes shipped with an international one. My Website can now be found at ivomynttinen.com while the new RSS-Feed can be found here.
New Comment system that relies on Disqus. This allows you to connect with nearly any popular thirdparty services, such as Facebook or Twitter, and means you never have to type your name and email address if you want to leave a comment on the Blog.

Due to the switch of language on my Blog and Portfolio, I’ve also started to write English on my Twitter account and also on my Facebook page.

The Improvements

While I wasn’t that satisfied with my last site when I launched it, I’m really happy with the new one now.

Personally I love the new, clean look and the fact that I can present huge images on my Landingpage now. The old design was filled with too much text and too few images. Finally, and most importantly to me, the dark has gone away and my new site is presented in a beautiful light theme now.

– the new navigation bar is fixed on the top of the page and provides only the most important links. You can switch the kind of presentation of articles between “Landscape-Image” and “Grid-View”.

– the whole Newsstream uses WordPress’ custom Posttypes to show which kind of content you’re viewing right now. The content of different Posttypes are presented in different ways.

– when scrolling on the Homepage new Articles are loaded via Ajax automatically.

– I really hope you will never have to visit this page out in the wild. For the people that are looking for old content I’ve built a nice 404-Page.

What happens to the old Site?

– the website design I’ve used for my old Site.

As I said, the Blog posts will be republished on another Blog (I will tweet about this). The old design will become rusty on my HD but some parts of the source files will be given away on Fireworkslab.com – a small side-project of mine.

Feedback?

I’m always curious about what others are thinking about my designs, so please let me know if you like it or you found something you would do in a better/other way. In addition, please shoot me an email if you find any bugs.

Thanks and happy browsing!

The Socialbit CMS

Ivo — Fri, 17 Jun 2011 19:07:50 +0000

In 2010 I worked on the User Interface of a CMS by a German software company called Socialbit. The Socialbit CMS was built as a base for numerous web projects by the Socialbit UG. The intention I had with the whole User Interface for the CMS was to design something that is highly customizable, scalable and easy to use for everyone.

A smart system that relies on Widget based Dashboards allows the User to configure it’s own Appearance on the go. If the User often needs to edit Users or Groups, he can create a Widget and drag it to his Dashboard showing a nice looking and well formatted user list.

– the Login Process when you’re accessing the Dashboard. Minimal forms for maximum UX.

– the Navigation Bar placed on top of every Page. The Navigation of the CMS is Tab-based and easily extendable: a click at the “+” adds another Tab to the Navigation. Every Page has it’s own Subnavigation which offers simple to use Dropdowns for more navigation elements. The Navigation was designed to use up to four levels of Subnavigations.

– how the User can access his personal Messages and Settings. If an Admin receives important Messages by Users or the System, the red circle appears over the Mail Icon and shows the actual User there is something that needs his attention.

On the upper right, a place best known for Register/Login/Logout-Links, the User can Logout or go to his personal Settings.

– the Dashboard and Landingpage of the CMS. The whole CMS is based on Widgets which can be added and removed from the Pages of the CMS. If a client needs a custom Widget it can be built and added to his Account. The client himself can decide then where the Widget should appear.

– next generation file upload via drag and drop.

– creating a new User is made as simple as possible. Live validation of input fields are telling the User if everything goes well.

– the WYSIQYG-Editor which is used to create and edit Pages and Posts. All Forms I’ve designed for the CMS are easy to understand for everyone, even for non technically minded people.

Quick Summary

Tools: Adobe Fireworks, Adobe Photoshop
Estimated Time: one week
Client: Socialbit UG
Working link: for internal use only