Tag Archives: Webdesign

A Fresh New Start

Arvid Bräne - April 11th, 2014 - #Responsive, #Webapp, #Webdesign

Old PortfolioFor the last, I don’t know, 4/5(?) years I’ve had the same old portfolio; a simple “one page, scroll a lot, no content“-kind of website. It was really nothing fancy about it; no CMS, no PHP, no nothing. In my defense I knew nothing about web development when I created it, the idea was to have something temporary till I learned more (yeah right). During it’s rather long lifespan I’ve given it absolutely no love, only updating it only about once a year with new projects, mostly due to the lack of time and interest. Well, not any more.

I started designing this new website during Christmas break and it’s finally, somewhat, finished (I know there are still bugs) for an initial release, even though the “Resume”- and “Links” pages are far from complete. I actually started the redesign process sometime in 2011 and since then I’ve started on at least 6(!) different designs, none of which have been finished.

The New Design

iPhone WebappThis new website will not only be a portfolio but more importantly a medium for me to share my thoughts and “be more available”. This new release also forced me to update my old and out dated graphic profile; and therefor also my logotype. I’ve finally taken the time to look into learning the basics of WordPress (never really used it before) and the building of an actual theme (using twentytwelve as the base). I’ve also taken the responsive part a bit further by allowing the user to use the app as a web-app. A lot of effort has been put into trying to make the site feel like a native app; making the statusbar transparent, having a iOS 7-looking menubar etc. Here are some simple, yet very useful, JavaScript snippets that were very helpful:

//Detect if user launches the web-app from its homescreen:
if (window.navigator.standalone) {
	//Code
}

//Detect if user changes device orientation:
if (window.DeviceOrientationEvent) {
	//Code
}

//Prevents the user from leaving the app when navigating around
var a = document.getElementsByTagName("a");
for(var i=0; i<a.length; i++) {	
	a[i].onclick = function() {
		window.location = this.getAttribute("href");
		return false;
	}
}

//Fast-click (check out github.com/ftlabs/fastclick), for a more native feel
window.addEventListener('load', function() {
	FastClick.attach(document.body);
}, false);

//"Fixes" hover events 
document.addEventListener("touchstart", function(){}, true);

If you find anything that does not look right or if you have any feedback you’d like to share; feel free to comment below!

Fotbollsresor.nu Website

November, 2013 - #Freelance, #Photoshop, #Responsive, #Web, #Webdesign

Fotbollsresor.nu is a website where users can not only compare ticket prices for football events, for example a match between Sweden and Denmark, but also choose to book a matching air ticket. Since there are hundreds of games every day worldwide, the website needs to be able to filter these events in different ways.

I had the opportunity to re-design their whole website experience with a deep focus on coming up with a new, fresh, and responsive look and feel. I came up with a couple of different mock-ups for the site, but also added some components to their already exciting graphic profile.

Macintosh 128K

May, 2013 - #Code, #Open Source, #University, #Web, #Webdesign

TapeIdag & Inatt is often referred to as “the most important event of the year” by the students of Interaction and Design so when Albin Hübsch and I where put in charge of the event website we knew we had to deliver. Since the theme was set to “Retro” we decide to look at some old tech to get inspired. After a lot of research we decided on using the iconic design of the Macintosh 128K from 1984. I was also in charge of creating the logotype for the event and after consulting the rest of the PR-group we decided on using an old Cassette Tape (more on that here), which was a perfect match to the old Mac.

The “Hardware”

hardwareMaking a Macintosh in Photoshop and then putting an “interactive iframe” on-top is as simple as it is ineffective, so we agreed on making it a bit harder: no images, only CSS & HTML. The Mac chassis (and the floppy disk) is created using over 100 divs all styled, rotated and positioned to give the user a realistic feel. For the boot up process some simple Javascript generates a couple of printouts and then pushes the floppy disk into the slot.

The “Software”

softwareAfter the computer has been turned on and done it’s startup procedures, the “application” enters fullscreen mode. The user is then presented with an almost identical graphical user interface of the old Macs, all built on web technologies (such as jQuery UI, CSS, HTML, etc.). Yes, we “had” to use some images here. Here the possibilities are pretty much endless, but we chose to only include a Registration-“application”, a Nomination-“application”, and a Astroids game that we found here.

Finally

At the moment the code is quite cluttered an uncommented, but we have plans on releasing it on GitHub in a near future, structured and commented. For now, the project can be found, and tested(!), here.