Creative

Zygomatic Studios design: an experiment in one-page animated layouts

Recently I did a front-end proposal for Zygomatic Studios. They’re an animation company started up by Erik Kylen and I’ll be maintaining their website.

Given that I knew them, I had some freedom to experiment. For an animation firm, the website itself had to be showy graphically somehow. I ended up making the entire page animated on page-load: to present itself in a showy way but not interrupt the user whilst actually using the page. “Slick” was what I was going for.

Another idea I wanted to play with was the one-page site concept, which displayed the highlights of each “sub page”, which could then be expanded if interested.

You can check it out in my alpha playground.

Zygomatic

Designed with GIMP, with a little help from Blender. Personally quite happy with the experiment.

Uncategorized

GetKDE.org progress – Discover KDE!

For the impatient, here is a link to the new page, and for those who missed the last post, here is a link to the GetKDE.org homepage. Finally, here is a screenshot of the newly added Explore page:

The homepage of GetKDE is essentially a hub with a teaser. The site structure itself is split into three sections, Software, Community, and Development.

Those completely new to everything KDE will start off in the Software section, via clicking the “Explore how KDE benefits me” option.

It is then important to market only what is relevant to the user – for KDE, this depends a lot on what device you have. KDE’s objective isn’t to convert users to Linux, however happy that makes our inner penguin, but instead to help people enjoy and make the most of their computing experience with KDE Software.

As a result, this is the page they will see. It’s objective is to make it clear what components make up a computer, which are Apps, Workspaces, and Framework. Different components will interest different people, and the availability of components are also limited depending on what the user is using. For example, Windows and Mac users won’t get a Workspace, but will get Apps and Framework. Mobile users get different Workspaces to non-mobile users. And so on.

The reason this initial segregation is so important is for several reasons:

  1. They are introduced to the branding jargon that KDE users, eg Apps, Workspaces, Framework and understand how it fits together
  2. This allows highly specific and targeted marketing in the next stage – no use comparing Kate to GEdit for a Windows user.
  3. Users understand the scope of KDE development that it isn’t just limited to desktops/laptops and are flexible to bend around what people use.

In other related news, the GetKDE.org homepage itself got a bit of a cleanup, which you can check out live via the link here, or in the below screenshot.

That’s it for this post! More to come!

For those particularly interested in this project, progress is tracked via its WIPUP project space.

Uncategorized

What’s up with KDE.org & Hello GetKDE.org

It’s been a while since I last posted about KDE.org, aka the KDE-www war series. It talked about the current KDE.org design, and how to improve it. The series started with target audiences and conversion goals, picked apart and restructured the sitemap, revealed an initial design proposal with clear-cut priorities, and finally analysed the effectiveness of design.

Since then, the KDE-www team has gotten serious about rebuilding KDE.org from the ground up and has started up project neverland. However, I shall now be continuing the work on KDE.org under a new name, GetKDE.org.

You can visit http://GetKDE.org/ right now – feedback is much appreciated.

One of the most important aspects of the redesign is community involvement. GetKDE.org is built publicly online irrespective of the KDE release schedule. This is so that the community is free to visit it any time and provide feedback and leave comments.

There are a few differences between how GetKDE.org is tackling the KDE.org redo and how neverland is tackling it:

  • The Oxygen team is unpredictable. Neverland’s answer to this is to design without employing the blue-coloured KDE, Oxygen, Air, or Plasma-themed elements as part of the basic design- that way, it will still be relevant no matter what KDE looks like. GetKDE.org instead regards Oxygen’s unpredictability as a fault of Oxygen, and does use the three biggest things which make KDE’s brand recognisable as it currently stands: Blue KDE, Oxygen, and Plasma w/ Air.
  • GetKDE.org is documenting its design process outside IRC. GetKDE.org wants to be 100% transparent with the development process, making sure that the community knows what’s being done, why, and can voice their opinions. This means taking things outside the IRC channel, as well as into real life. This is because any change to a significant visual thing representing KDE may mean changing KDE’s brand. This is not something to be taken lightly. This also means that GetKDE.org doesn’t follow the KDE release schedule.
  • GetKDE.org has a much smaller scope. Only pages within KDE.org will be considered rather that neverland’s objective of a one-size-fits-all solution unifying all sites, including wikis, forums, translated versions, etc. This means that a lot of content will be filtered out, but quality should outweigh the quantity.
  • GetKDE.org is following the previously outlined target audiences and goals. Neverland is following a more rapidly developed, iterative design approach, whereas marketing objectives have been laid out from the start in GetKDE.org, and it will follow that.
  • Neverland is the currently heir to KDE.org. Although GetKDE.org will perform exactly the same functions as KDE.org, most of the team are currently working on neverland. As such, GetKDE.org is being branded as an experimental alternative to KDE.org – and will stay that way until either community or statistics prove otherwise. GetKDE.org will not become KDE.org.

Well, I hope you enjoyed it! More will come soon. Just another week until semester is over and then I’m ready for a sprint :) Updates are being dutifully tracked on its WIPUP project.

Uncategorized

The kde-www war: part 4

A brief history lesson. The introduction identifies KDE.org as a wall of text with a pretty frame and explains why there is a problem. Part 1 sets conversion goals on our two target markets. Part 2 restructures the sitemap to make sense. Part 3 dabbles a bit on concluding the design criteria for the homepage, and reveals the homepage.

In this part, we’re going to take a step back to the release of the homepage design from part 3, and talk a little bit about the science and justifications behind the design. Firstly, a quick note that the design was tweaked slightly after part 3, as the tweaked version can be viewed here.

All webdesigns are made up of three vital elements that work together to make a successful design. Keep in mind that these elements should be considered not just in webdesign but also by application developers.

Notice how the criteria outlined in part 3 addressed each of those 3 concerns directly. Now let’s took at how we’ve satisfied the criteria.

Let’s just briefly skim through brand – we have addressed this by emphasizing KDE’s visual identity:

  • The design has blue and white as its primary colours, which are KDE’s primary and secondary colours respectively.
  • Every single environmental visual element (ie – headers, footers, and non-content elements) on the page used visual styles from Plasma’s Air and Oxygen styles.
  • Every single functional visual elements (ie- the content element) on the page used KWin’s Air widget style.
  • All graphical symbology use Oxygen icons, especially to thematically link together concepts across the design.
  • The radical design choice of KDE’s first non-bordered layout corresponds to KDE’s philosophies of “Experience Freedom”, “Be Free” and “Breathe”.
  • The lightened fonts after tweaking now also corresponds to KDE’s aforementioned philosophies.
  • The iconic Kabel font is used for the KDE logo.

Now we can ask ourselves when we ask “What does KDE look like?“, as soon as we lay our eyes on this design, we can firmly answer “Yes. Of course! That is KDE!

Now let’s look at the content. Content should always come before function, as it sets the scene and helps our users understand what they should expect from the page. We start by giving the most important bite-sized factoids: what is new and awesome, for our existing users audience, and what is this KDE anyway? for our new users audience. We do this by giving a large banner to represent the latest news for the existing users, as well as a large, digestible (free from jargon) definition for the new users. What is more important is if we study why we placed the elements exactly where they are. Let’s study the eye-movements as a user scans the webpage – red being spending more time looking at it, and green being quick glances:

Firstly, let’s just jump back to reality. It is important to realise that people do not scan a page top-down, they glance top-down, then return to the top then proceed to zig-zag occasionally. This means that some people might jump from 2-5, instead of 2-3 (ie- visually oriented people). Also, people do not analyse in detail whilst glancing through – they search for vital factoids and discard everything else. These have good and bad implications:

The good – this pattern and step-by-step process to grasp interest is aligned with the goals/roadmap we outlined in part 1 of this series.

The bad – we are heavily relying on the effectiveness of elements 2 and 3 to provide the vital factoids.  These must grasp interest. Element 3 will target the text-orientated people, who will hopefully see:

Notice how we have successfully separated people from product, and are marketing KDE as a community. The user is immediately not looking at “Hey, download powerful software and a new desktop interface!” (akin to “hey, get free animated emoticons now!“), but instead looking at “Hey, I’m the most important person here, and something is happening which involves me. Something to do with powerful software and beautiful desktops, which are lovely keywords which everybody can say ‘yes I want it’ to. What am I missing out on?“. This will bring them to element 5 – to Discover KDE, and start their journey.

For the picture-oriented people, element 2 is our vital grasper. As the design stands now, it is obvious that the eye lingers longer over the left side of the image (put the more beautiful part of the image there, then?) but otherwise the image is completely unenticing and uninformative. It shows a rotated desktop screenshot and that’s it. This is bad. This should be changed. The blurb is useful though, as it not only says there is some sort of release with a really long fancy name (Software Compilation, anybody? 6 syllables?), but also zeroes into the single key features why it is so awesome. However there is clearly work to be done on defining a visual style for the header image.

Finally, let’s look at the function. What the user will want to do on the webpage.

This is a little tricky, as the homepage is a hub, not a content deliverer. It’s function is as a signpost and not an infographic. For this the design’s function is to direct users to the right page, and allow the user to understand the structure of the webpage, so that he knows exactly what to do next and how things are categorised.

We’ve already done a bit of this by piquing new users’ interests with the blurb and having their eye naturally fall onto the “Discover KDE” part. However let’s take this a step further by thematically linking certain keywords on the page through sequencing them in the same way, as well as using visual icons to mark their similarities. This can be seen below:

This helps the user understand the site’s structure, or three main “sections”, and emphasises their importance through repeating the sequence again and again. Thus the “About” and “Give Back” sections are already given less priority as expected given our goals outlined in part 1 as well as our restructuring labels in part 2, without entirely ignoring them.

This also performs a very important function of all design: the ability to give the user the impression that they have freedom to choose a path, that they are in control, but subliminally guiding them through a sequenced, optimum path. The user is presented with – yes – the entire sitemap. They can read through every single link and understand exactly what the page contains, but are still inclined to follow the three set paths for them. Also shown in the tweaked layout is that only the Community column is highlighted whereas other sections are greyed out – this will not be so on the homepage (all will be greyed out) but this helps users understand which section they belong in (other colour visual indicators will be in play later). This achieves the structural segregation that the original redesign was aiming for, without being too intrusive or clunky.

I’m going to stop here. Those were the main points I wanted to talk about to help raise awareness of the importance of design. I hope you enjoyed this series, and I’ve submitted it as a GSoC proposal, so if all goes well, we can start seeing things live soon!

Technical

Walkthrough of a CSS3 website design slice.

Slicing is a sign of a terrible golfer. Slicing is also the process of cutting up an image design into smaller images and writing markup code to turn it into a living, breathing website. I recently got a request from a friend to slice their portfolio website. Here is the original design he sent to me (and dumped on WIPUP as well).

It is a fixed width, fixed height website design. Technically speaking, it’s a rather simple design. Most website frontend coders would just launch right into slicing, but this time I wanted to have some fun. I wanted the freedom that any slicer and designer yearns towards – perfect separation between presentation and content, and complete disregard for browser compatibility.

Yes, if you haven’t already guessed, I built this site with CSS3. The only images I used in the end were the green background image, and the splash screen background image (oh, and the leaf icons for the navigation, but those don’t really count).

Most of the layout was straightforward using things like the new border-radius and box-shadow tags. However the lump in the navigation bar posed some complications. In the end I was able to recreate it using a three-layered solution (via the z-index tag). The first layer held the navigation strip with shadow effects. The second (above first) layer created the lump in the navigation’s shape and shadow. A third layer mimicked the second except with a slightly decreased width, slightly offset at the top and a shadow of the same colour as the background to create a "fading" effect for the shadow on the sides. With position: relative, and offsetting to place them, I managed to recreate the effect pretty darn well, if I might say so myself.

Finally, I used Google’s Font API to choose a more appropriate font, applied text-shadows (with a different colour in my a:hover tags to create a nice glow effect) and stuck it up online for my friend to see. Here’s the result (output via Gecko renderer):

This multi-tab bar is a common webdesign element, so this trick might help other CSS3-yearning developers. Here’s the code for those who are interested. The design works in Firefox, Opera, and Safari. Chrome does not render rounded shadows correctly but otherwise works fine. It fails with IE8 and below. Haven’t tested IE9.

Uncategorized

Countdown to KDE 4.4 and the new KDE website

I like dabbling in web development and design and so I was quite happy to be able to participate in the redesign of the new KDE.org website due to release in conjunction with KDE SC 4.4 on February 9th. This was what I was working on during the past week and I must say I’ve learned and experienced quite a lot from trying to contribute.

So every day, including today, I will release an image showing stages in the process of creating the KDE webdesign mockup. They can be found in a newly setup WIPUP project, which can be seen in full at my WIPUP profile.

Today we start off with the original mockup (not done by me) from a user with the alias it-s. Have a peek.

Uncategorized

Webdesign usability – confusion or convenience?

Today as work is starting to pick up on the WIPUP project, I decided to tackle something that had been nagging at me for quite some time – the header of the design. Before I continue, let’s take a peek at what we currently have:

wipup_design2

When a fresh user views that page, regardless of aesthetic merit (after all, this is a user-based website, not a content-based website) they are instantly hit by a few things:

  • This blue box actually does not contain much information, but takes up half the screen nontheless.
  • This area below the blue box is darker and thus accented more, but contains very useless information.
  • As a new user, I would not want to use any of these features.
  • Even as a registered user, it’s unlikely I would want to use these features more than 5% of the time.
  • What are those icons on the top right?
  • Why is the “upload” and “sign in” button so ugly?

Ignoring a slightly longer load time and slight browser incompatibilities (though that is a fault on my part) we have introduced a good 15 or so new things a user could do simply in the top half of the page – most of which should be ignored most of the time. The important thing here is that no matter how feature-packed you want your interface to be, you have to deal with user myopia, addressed very well by Jeff Atwood.

One way to tackle this problem is by overlaying other web 2.0 technologies (such as this .net developer) above the website – a great example being how Google revolutionised web email clients with GMail. However mainly for personal preference I decided to tackle this one from the ground up – that is, the luddite of a webdesign itself. Here’s my solution:

sample

As you can see, what really stands out is the title of the site – like it should. I’ve cut things down such that it takes up a bare minimum of the page, will have faster load time and requires less non HTML/CSS tricks. The next point of focus is the actual content.

The implications of this are that user choice is now limited to a simple  7 choices. The 3 icons, the 3 links, and reading the main content. The 3 icons are likely to be disregarded almost immediately as there is no textual information as to what their function is. This is good as it’ll only seem important to existing users – those who know how to use them and are familiar with the site. The three text options are easy to read and disregard too – it might be improved further if the search link were turned into a small magnifying glass icon.

The end result is that the user’s focus is on the content. We don’t overwhelm the user and keep their eyes where we want them. Remember: simple sells.

Uncategorized

GIMPup a Webdesign #2.

Despite the fact I’m smack in the middle of my mock exams…or should I say “slack in the middle of my mock exams”…I’ve decided to make a generic webdesign. You know, just to keep me on my toes. This one has an utter lack of creativity, and is probably your stereotypical design found on the web. However, if any one of you folks decide it strikes your fancy, just contact me and I’ll slice and make it web readyfor a dirt cheap price of only 20USD. This is a limited offer for 1 month only. As after that I’ll probably have deleted the design files.

Well, enough of waffling. Here goes:

cleangloss

Yes, it was made using The GIMP, and it’s part of my little campaign to show GIMP really is worthy. Oh, and the thumbnails shown in the design are all from my portfolio. Comments welcome.

Uncategorized

Minimalistic.

Nothing big to update you guys on today, but here’s just a small peek as to how I’ve clunked down the content on the place where it all started: E2-Productions.com. And yet again, you see the official E2 logo which has a very suspicious knack of appearing and reappearing (that means it also sometimes disappears) at random.

Also, the services page on the website probably needs some work to make it look as though it wasn’t made by a guy trying to use Emacs to feed his pet fish (talk about geeky imagery!), but temporarily it gets the idea across that yes, we are for hire.

If you didn’t quite get the subliminal hint – that means I’ve got some big plans for E2.

(P.S: I was going to write about two sentences for this post but that would make the wonderful image on the right not line up correctly.)

Uncategorized

GIMPup A Webdesign

Seem as though The GIMP has finally gotten on my list of “Awesome Applications”. That list is basically all the stuff on the computer which I know I cannot live without. They already include Vim, Blender, Apache, MySQL, PHP …. etc – but I’ll save that for another post. All of the applications I use are open-source and completely free. Except for Adobe Photoshop.

But Photoshop rules! Why switch to The GIMP?

You’re right. No way saying The GIMP is more powerful than Photoshop. Not saying the switch over to learning The GIMP wasn’t filled with “argh! Where did my other kabillion windows disappear to“. Also not saying that all the industry professionals should switch over to The GIMP right now.

However, I like to place my faith in open-source software (Blender being an excellent example) – the main reason being that open-source development is crazy fast, and the community in general is great. So I wouldn’t be too surprised if 5-10 years later The GIMP is the ultimate graphics tool.

So, how to learn The GIMP? Simply by using it to do what I would otherwise do in Photoshop. Some methods of working I have developed is that my two panels are always set to “Always On Top”, and my window manager set that a double click on the windows title bar will shade the window. One of the external window contains the toolbox, and nothing else, and the other contains everything else that I use frequently in tabs. This way I get quite a lot of screen space for what I’m working on. I’d also like to mention that learning the hotkeys for the tools in The GIMP is definitely something really useful to do for a beginner.

Here’s a design I churned out after 4 hours of working out how stuff is done in The GIMP. I hope you like it. Click the image to get a full size picture.

Of course, comments welcome.