Design and coding of the new version of Jennifer Lindberg's website about pastries. The last version can be seen here.

See the new LittleDessert website.

This website has been alive since around 2009 and I have made a few iterations of designs for it. It has until now been in a traditional blog format where all posts are stacked on top of each other in one page. It has a steady growth, but we always try to improve it. Jennifer has been interested in starting a web shop for a long time, so she can sell different things that have to do with pastries and the like. She specializes in making beautiful chocolate shoes.

To make the shop release even better, we didn't just add the shop to the existing site—we created a whole new website. The earlier versions of LittleDessert have all been looking very similar in the same regular blog style. For this new website I rethinked the whole structure. When a shop is added, the complete focus of the site is not just the blog, but also the shop. To accommodate that, I changed the front page to be an aggregation of the latest things from the site and also some other things you might want to push the visitor to see. I also wanted to make the content of each post a little more special, so the content is only shown when viewing a single blog post, and not in blog indexes where many posts are shown.

In the last version of the site there was an archive page to find older posts. From the statistics I noticed that practically nobody used the archive, so that was an unnecessary page. Instead of an archive, I put the search field in the header so it's easy to find. Showing posts in a grid was also an idea to replace the archive. The categories are now listed in a box so you can easily see what categories there are and which you are viewing currently.

I wanted to keep the feeling and color theme from the last version, but fresh it up a bit. So the colors are still the same and I tried to keep some of the home made feeling. One special design feature I had in the last version was a box for the ingredients when viewing a recipe post. That makes the post design a bit easier to read for recipes, so that was one thing I really wanted to keep in the new version. There was room for improvements though. I added the ability to specify it more detailed in the back-end, so you can group ingredients with a heading above (maybe you have some ingredients for the dough and some for the filling or something). I also made it possible to make it clearer, by putting the ingredient to the left and the amount of the ingredient to the right.

Jennifer makes delicious and wonderful things, and the best way to show that is by using a lot of photos. That's why I used very large header images for each post, and also thumbnails for each post in the blog index.

oCanvas is a JavaScript library that makes canvas development easier to understand and do, by creating a bridge between the native pixel drawing approach and objects that are created and added to canvas. It is now possible to very easily create objects, change properties of these objects and add events to them—and everything just works because oCanvas handles the background stuff for you.

Development of oCanvas started in the summer of 2010. It was under heavy development for a few months and was later put on ice until January 2011 when I started the development again. It went through a total restructure and was improved a lot. In March 2011 it was ready for the first release.

Check out the oCanvas website for more info.

To start using oCanvas you need to include a copy of oCanvas either by including the CDN-hosted file, or a file you host yourself. Then in your own JavaScript file, you write the following piece:

var canvas = oCanvas.create({
	canvas: "#canvas",
	background: "#222",
	fps: 60
});

That code initializes a core instance of oCanvas, which will enable you to create objects and everything. You can also pass more things to that create() method. The canvas parameter is a CSS selector and must point to a canvas element that is present in the DOM.

oCanvas has a few different predefined shapes, but you can also create your own. To create a rectangle, you simply write this:

var rectangle = canvas.display.rectangle({
	x: 50,
	y: 100,
	width: 100,
	height: 50,
	fill: "#f00"
});
canvas.addChild(rectangle);

The object has then been created, and the last line adds it to the canvas. Besides just adding an object to the canvas, you can also add objects as children to other objects.

A big feature of oCanvas is that you can add events to specific objects. It supports events for mouse, touch and keyboard. This can look like this:

rectangle.bind("click tap", function (e) {
	this.rotate(10);
	canvas.redraw();
});

As you can see, you can bind to both mouse and touch events very easily. Clicking or tapping on this rectangle will rotate it 10 degrees clockwise.

This is just an introduction to show you what the API looks like. Go to the website for more information and documentation.

Images

DrawPad is a web app for drawing anything you like. Since it is a web app it is not restricted to only the iPhone, even though it is made primarily for the iPhone. It can be used in all modern browsers that has support for HTML5 canvas. The current release is not fully supported on Android, because multitouch is not supported in that browser which makes it impossible to hide the toolbars.

The app allows you to draw with different brush sizes and opacity, and also offers a complete color picker with swatches. You can undo 10 steps (this will increase in future releases) and redo to get it back again.

You can also save the image to one of two destinations: local browser storage or cloud storage. The browser storage uses HTML5 Web Storage, which means the image is stored in the browser's cache until the cache is cleared (it survives restarts and everything though, unless the cache is cleared on close). When saved to cloud storage, it is saved on the app server and is accessible from any browser through a login. That means saving to the cloud requires you to register, but only email and password are required.

For a more in-depth article about it, see my blog post Making of DrawPad.

Design and coding of portfolio for the artist Camilla Hägg, including admin system.

Camilla Hägg is a great artist who makes paintings and ceramics. She needed a portfolio where she can show all the things she creates. I designed it to be very simplistic and clean, to put the focus on the works. The home page is built up with a large cropped image of the latest work to create interest immediately. When hovering over the image a dark background fades in and shows some info about the work, and also two buttons, one to view it in fullsize and one to see the rest of the gallery. This cropped image is also used in the gallery where all images are listed.

Exhibitions can be added from the admin system and those can be seen on the exhibition page. They are divided into upcoming and past exhibitions. The upcoming exhibitions have info and a map that shows where it is. The map is fetched through the Google Maps API, by sending an address to the geocoder. When the exhibition has past, it is automatically placed in the other section, past exhibitions. This section shows images of the exhibitions, as a full gallery with navigation.

To make it easy to update the site, I had to create a full custom admin system, since it was not built upon any other CMS. The largest part of the admin system, the gallery, was made to make it very user friendly and easy to use. It uses an AJAX upload to upload the image in the background and immediately after show the image and add some controls. In this stage the user can zoom and pan the image within the cropped frame. If the image is zoomed, there is a button to resample the image to always use a high quality image. There are also two buttons for the info, one to show and hide the info box (which is laid on top of the image, just like the gallery a normal visitor sees), and one to switch side of the info box. When the info box is shown, the user can just click on the title or description text to edit it. When clicking the publish button all the info is collected and saved through AJAX and the page is then reloaded. The image is then uploaded and will show up as the latest on the home page.

The rest of the admin system is relatively simple, but adds functionality to easily update news and all the texts on the site. Exhibitions are added easily, by just typing the info and saving. Images can be added through normal upload fields.

Design and coding of WordPress theme for Fiona Kwan's personal blog.

Fiona Kwan is a friend of mine who wanted a new blog design, but didn't have the time to create one herself, so she asked me to do it. I was pretty free to do whatever I wanted, except that it should involve silver gray and purple. I ended up with a really clean design, that was enhanced with CSS3 in supporting browsers.

I tried a different comment list style than I've used on my eariler WordPress driven sites. This style was made more compact, by wrapping the whole comment, including the name and all, in a small box with the avatar on the left. It also allows threaded comments a few levels. The comment form also got a new and improved style compared to my older themes.

The archive is the same that I used on Little Dessert v2, which is an AJAX based archive that updates the results automatically when changing an option. You can filter by year, month and category, and also choose how to display the posts in the results; as full posts or excerpts.

There is also a simple portfolio on the site. It is built with custom post types in WordPress, which makes it easy to manage the portfolio content. In the portfolio you can filter by category in the top right corner.

Fiona uses Twitter besides the blogging, and the five latest tweets are fetched and shown in a loop in the top of the page. This was made with some JavaScript, partly using jQuery.

This game was made in the course Interactive Multimedia during my education Graphic Design and Web Development. It was a project where the task was to create something in Flash. The requirements weren't that strict, you could do pretty much anything you wanted, in a few specific categories. One being Game, which I chose since I love programming. The game could be very simple, but to challenge myself I went for a larger and more advanced game.

My choice was to make a tower defence game of some kind. In this kind of game, there are enemies coming from one point and moving towards another point, usually through some kind of maze. The player's task is to stop the enemies from reaching the target, by placing towers on the map. Those towers will then shoot on the enemies and for each killed enemy the player gets one point and some money, which can be used for buying new towers. If too many enemies reach the target the game is over and the player's score is shown.

The theme wasn't set until pretty late, so I started with building the structure and basic functionality first. I use an alpha map behind the scenes to sense where the path is, which makes it easy to create new maps (just one graphic image and one alpha image). In my implementation of this though, the path had to go in straight lines, not curves or diagonals.

To make the whole project structured I coded everything in separate .as files with classes for different things. Everything was loaded dynamically from the Flash library, so the .fla didn't contain any code or anything except the library. I also tried to optimize the perfomance of the game as good as I could.

I created three different towers with their own specific properties: crossbow, catapult and cannon. All towers allow one upgrade and you can also sell the tower. The enemies change color for each level, and they also get increased health to be harder to kill. The reward for each enemy is increased at a little slower rate.

Although the game wasn't the easiest thing I've coded, one of the hardest things about it was to set the difficulty levels, so they weren't too easy and not too difficult.

Please, try the game below!

Design and coding of WordPress theme for Jennifer Lindberg's blog about pastries.

This is a new and improved version of the blog I designed before, Little Dessert v1. It was time for a renewal of the design, and to make the blog even stronger we got an own domain for it and switched to WordPress as CMS instead of the blog network Blogg.se.

The design is still supposed to give a little home made feeling through the background, but it is now a lot more clean and simple. Instead of locking the content inside a box, everything floats on the background, but controlled through a grid used in the design process. I wanted to emphasize the categories in this design, to make it simple to find recipes of different kinds. This was done by using a small square photo as a background for the category link, and place the categories two in a row as squares in the sidebar.

Since many of the blog posts are recipes, I added a feature where she can write ingredients and get them formatted as a notepad in the blog post. This makes it easier to see what you need to follow the recipe, than if you would just write it as normal text in the blog post.

There are a few different ways of finding posts. You can navigate through the posts on the front page, but sometimes that is not the easiest way. The categories help sometimes, but for some posts that could be hard too. The site offers a search box in the header that can search for all the post content. If you want to find a post by specifying some parameters, you can use the archive. It allows you to choose year, month and category as filters and also the view mode (full posts or excerpts). The results update automatically through AJAX when options are changed, which makes it easy to navigate.

The site uses some CSS3 things like @font-face, border-radius and box-shadow, but is only used to enhance the site for browsers that support it.

She also uses Twitter for this blog (@LittleDessert) and the latest tweet is always shown in the header of the site. The blog has grown in popularity lately and is at the time of writing having around 200 visitors per day.

Design and coding of WordPress theme for a blog about the Winter Olympic Games in Vancouver 2010.

A friend of mine, Pontus Karlsson, is really interested in sports. He combined this with his skills in SEO and social media and started a site for the Winter Olympics together with me. He handled all the content and SEO things, while I did the design and coding.

As for the design, I chose blue as the site's background color to give it a cold feeling of the winter. To enhance that feeling I made the top of the background a little frosty and added snow flakes in the header. I also added some snow to the olympic rings. I chose Steelfish as the font for the headings because it's both strong and condensed and fits well for headings. To use a custom font like this, I used Cufón.

The site is mainly a blog, but offers other good information about the olympics too. Pontus collected all the times for the Swedish TV broadcasts, as well as the whole event schedule, and I converted it to XML and coded a script to show the times in a better way. You could also see info about all the Swedish competitors. The last part was a live Twitter feed which fetched all tweets with a predefined hashtag and updated them at a short interval. The sidebar also featured today's TV schedule and Pontus' latest tweets from @OS2010Vancouver.

This design was an assignment in the course Graphic Design and Technique during my education Graphic Design and Web Development. The task was to find an article and make a new design for it. It could reuse parts of the original design, but some things had to be different.

Since I like web development I chose Practical Web Design (or .net as it's also called) issue 195, with an article about the production of Yahoo's new homepage. The original spread was very white and didn't really catch my eye on anything. So I made my header in dark gray and also moved the timeline from the bottom to the top as a good contrast to the rest of the article. The original spread was mixed with both interview and showcase of the site. I wanted a more structured approach, so I put the showcasing on the right page and the interview on the left. Instead of using a light gray background for the questions in the article, I used the green accent color as text color to both make it look a bit better and make it easier to read.

This illustration was an assignment in the course Graphic Design and Technique during my education Graphic Design and Web Development. The task was to make a vectorization of a thing, with a photo placed as a background for reference.

I chose to illustrate my MacBook Pro 15″ because it is very clean and simple in its design, but still a challenge to vectorize with all the buttons and such. The keyboard labels and the speakers were set in the right perspective using the Illustrator feature Envelope Distort.