Why is your screen so small?


Catch Me If You Can:

Design Exploration

I set to work brainstorming as many good concepts as possible. To keep my mind on its toes, I would brainstorm in many different situations like bus trips, just before bed, and while playing video games. It paid off, as I was able to present many concepts to the group in the next contact session where majority of the ideas were mine.



Many of the ideas were simple and likely to be the same as similar concepts thought up by other groups. After comparing the concepts to find which was the most unique and used the databases in the most interesting/engaging way, we decided to go with the memory/quiz game inspired by 'Where In the World is Carmen Sandiego', noted in the previous picture as 'Game.'



In the next contact session we refined it as our final concept, discussing the concepts aims, goals, purpose, and how it was going to work.



For the first presentation I offered to make the poster as I had the most experience with photoshop.

The first report was written in parts, and I combined them into the final report. I wrote about the scope and description of the concept in the report, as I had thought of it I had the best idea of it.



In the future I now know to make sure every single person in the group knows the ins and outs of the concept at this early stage, otherwise it can cause problems later on as it did for the implementation.

Work In Progress

We received positive feedback from the first presentation, especially about the narrative element of the game, as long as we did it well. I feel like the first assessment was a success because of the quality of the concept. At this stage the group and I divided up the workload and tasks between members of the group.



I then started on the Javascript for the game, creating the 4 classes needed to create the game and cycle through the levels. I started on the most important method for the Level class, the process to compare cards and flip them back over if they didn't match, the most important game mechanic of memory games. It started comparing values in the list generated when the postcards are created, where their positions are randomly assigned (so the postcards are shuffled with no pattern).



The method was very simple, but had many exploits.



The paper prototype session came during this time, and the interface design at this stage had not been worked on, so the interface I designed for the first presentation was the basis for the paper prototype. The session went well, testers liked the flow of the game, and we received helpful feedback to add a button to show players were ready to start a level, and make sure players definitely knew the goal of the game.



I continued to work on the Javascript, hoping to have the the Javascript classes working together and the cards working as they should in a memory game for the work in progress presentation. I was happy enough with what I was able to show in the presentation, as work for that presentation had stopped me from being able to do any more with the Javascript.

I think the entire presentation could have gone better however if I had known I would be doing almost all of it earlier. I was able to show the randomisation of the cards and some basic matching. I'm still not sure to this day if some of my group had seen the criteria, and for the work in progress presentation I made the digital prototype while also having to design the interface further, as the design had not gone past rough simple sketches. I did my best with Open Office's PowerPoint equivalent.



Again I combined parts for the report, where I made a more detailed division of tasks among group members along with deadlines for each, the list of implementation issues and solutions, and the updated concept. For this assessment it asked to decide on leadership, which I found I had been given by default because of my confidence and eagerness to the project.



In the future I know to clear up details of management very early on, so I know exactly what to ask of people. This will bring even more accountability to members who don't complete tasks, and leave no confusion about what is actually required from each individual.

Final Delivery

After the work in progress presentation, we took on board the feedback from question time, so I asked Jarrod to help me out with the Javascript. Splitting up tasks for the game logic was very difficult, so Jarrod continued to work on the splash page and other tasks, but made sure he knew what was going on with the Javascript.

I continued to work on the Javascript, starting with the flipping of the postcards, where I used CSS3 flipping at first, which didn't work in the HTML structure I'd made and made me feel seasick. I used a to a JQuery based flipping animation instead called Flip!



The button to show a player was ready was implemented, calling a method when clicked to start the timer. I found a major bug through my constant testing where players were able to flip cards and guess the city around the prompt before clicking 'OK.' To stop this I used a blank div that covered the entire window called 'block', with the mouse click bound to it using JQuery, using 'preventDefault' to cancel out any action of the click.



This same block div was used when I found that players could click as fast as they could, flipping all of the cards over in one go without any flipping back over. Clicking very fast was restarting the method called when a card is clicked before it could process the test for the number of cards flipped over. The block div was shown at the start of the method and hidden at the end to ensure it would always reach the end unhindered. At this time the method called when a card was clicked had been worked on to test for previously matched cards, where it would show a window with a larger version of the image, and to test if two two cards clicked were the same card. Before this it was possible to click the same card over and over for 100 points each time. Other ways to cheat which were removed included dragging images (to the URL bar or new tab) and right clicking on images (to show in new tab). In the future I'll save time by adding these anti-cheat methods early on, and the blocking div process will come in handy for projects that aren't games as well.



I created the text input at the bottom of the screen for players to enter guesses along with the button that uses this input to compare it with the city featured in each level. Each level is given a city (in all lower case) to use to compare with what a user guesses, the method to check if they're correct also displays hints to the player for each city, changing by how much time they have remaining.



I created a countdown timer as a method of each level to countdown from a given time, and clear itself and end a level when it reached 0.



Methods were made to the top level game class to change the score, which changed what was displayed to the side of each level when it was called as well as changing the next high score tier if a score passed to the next tier.



Disaster struck when we found out that our original image querying process was timing out, so it was changed to require image size processing client-side. This turned out to be easier than expected, I discovered and used the CSS properties of max-width and max-height to force images to appropriate sizes. When cards were matched the method was changed to simply display the image with a larger max-width and max-height value, instead of loading another image from the server. We would have saved a lot of time implementing this to start with, instead of our original server side script. In the future I will look hard to find any simple solutions to save lots of time and effort that could be put to other parts of a project.



I had implemented AJAX functions to load images that had been used for a very short time before the PHP responses were timing out, then removed for reliable testing of the new PHP script and client-side image processing. Once the scripts were working perfectly I wrote the AJAX functions for image loading, one when the page loads, and one to start loading the next level in each level.

I used a JQuery AJAX completion handler to make sure that loading bars were replaced with buttons to continue when images for a level were loaded. It also iterates through the image results from Flickr, loading them to a hidden div, so they're in a user's cache, ready to display in each level. After each new level is loaded, the hidden div is cleared so the game does not use too much of the client's computer's resources.



It was within a week or so of the final presentation when I discovered that Trove's results for international locations had changed over time, and now weren't relevant pictures. Instead they were images of Australian places taken by people that lived in the queried city. This required a complete change of story, instead of international locations, the game would now focus on Australian cities and landmarks. I wrote 30 stories (15 winning, 15 losing, 2 paragraphs each) in half a day for the change, replacing the short 2 sentence long stories written by the group used previously. They were too short and simple to use, and there was so much pressure in this aspect from what Lorna said in the first presentation about the story being good. I will definitely be checking returned queries very regularly for any projects based on updating databases in the future.



It was scaring me at this stage how little had been done in terms of visual design for the site, so I stepped in to make sure vital parts would be finished before the trade show. I made the backgrounds to the various parts of the game to suit the visual design and context of the project.

It occurred to me that the screen that displayed the story was missing something, so I created a map showing the featured city for each level.



I created the highscore and prize code page element at this stage, using cookies to save the player's name, score, and prizes for the simple, printable prize code page to display. The prize code page uses an encryption algorithm to generate a code on the page, to be used in the simulated aspect of the project where children could show it on entry to the Queensland Museum. I then added the highscores element using simple AJAX funtions to save and retrieve highscore information from PHP scripts, which is displayed on the very last page of the game.

It was very late, the night before the trade show, and everything major was complete, when even the new, faster PHP script started timing out. This was devastating, thankfully neither I or Jarrod had altered any code that dealt with the PHP or Trove queries, so the fix would either be a change of API key (in case we exceeded their limits, as I refreshed, queried and tested a lot), or a technical issue out of our control. Sure enough the day before on Trove's service blog they explained their technical issues that were ongoing. Trove's API service only came back online at 7:30am the next morning, so in the half hour I had before I had to leave, I polished off some last minute issues as fast as I could.

The trade show went incredibly well, everyone who came to our booth liked the game, and left happy and impressed. Also, the game looked really good, I brought in my monitor from home (because it's 6 inches bigger than the other monitors in the room) and it really helped to make us stand out in combination with the orange tablecloths and candy we were giving out. We recieved a lot of positive feedback, so I feel the the assessment was a huge success.

The next week was spent writing the final report, I wrote most of it but didn't mind this time, as I felt really good about the probject.

On the whole I feel that this semester was a huge success, I've learnt so much, and I feel so accomplished seeing a concept of mine grow into a fully functional game.

Portfolio

I've only ever made one other portfolio website, but I was already tired of everyday web design, especially in the case of portfolio websites. As this site is representing me, my style, and my skills, I decided to start fresh with every element. I started with the navigation, clearing my mind of any image or expectation in my mind, I treated the piece of paper in front of me as a canvas and sketched out what came to me, as if I was starting an artwork. This became the blue shape in the corner of the home page with the navigation.



My grand design for the page involved one of my street art concepts, a simple bird, and I wanted to use animations to bring it to life, and let the site represent my individuality this way. I used the bright colours of my art in the site, as they represent my loud nature well. I used animation to transition between the home screen and other sections, revealing the nature of the shape in the corner as the bird, with the face appearing at the same time, and the hat (if it was wearing one) following these other animations. I simultaneously animate all three elements to the top of the screen where they recreate one image that sites beside the top navigation.



I had an idea for a cyclic navigation pattern when I was working on the previously mentioned animation, where a shape in the corner would offer a way to reach 'home' that when clicked would grow to become the original shape on the home screen. I used animation to grow the shape to the size of the original shape, then the original is placed seamlessly over the top, so the cycle can start again.



The hats used in the page are used to help distinguish between pages, and relate to the context of their relative pages. In place of hats, the about me page uses animation of many smaller bird shapes, and the 'what I do' page uses a background that fades in and out. These elements of the site reflect my nature, the many smaller birds representing my like for controlled chaos (sometimes), and my love of geometric shapes and patterns.



As I only make money through photography, I'll promote my work any way I can, so a photography page was nessessary. I like the new web design many sites are using for images, letting the images fall into place in a paragraph instead of being forced to evenly divided sections. I decided to use this design in my site, as the resulting cluster of colour is impressive, and I can always be sure that all of the images are being displayed.



I chose to use small scrolling divs for content, as scrolling down the page would break the cyclic effect I was going for. I chose to write my own code for collapsing text elements, as I didn't like the existing libraries for this purpose like readmore.js. I styled the scroll bars to match the visual design of the site, I'm really grateful I don't have to put up with the ugly default scroll bars. I decided to use Helvetica in the site, as I'm stuck in 2006 and can't escape stereotypical design elements when they look this good.



The site includes various easter eggs and tricks, reflecting my sense of humour, and appealing to anyone who enjoys these kind of things. If an employer is going to hire me for my style, they're going to appreciate these elements, and they will know I have a sense of humour from the start. If an employer is simply looking for someone who can write menial code, they are most likely not going to find these elements, so no harm is done by their existence.

This is a selection of some of the best photos I've taken. I use a Canon 7D for my professional work, and a selection of film cameras for my own amusement. I refuse to stick to one niche of photography, preferring to master them all. My professional experience includes being contracted by Griffith University, food/product photography for local restaurants, and photography for Nanette Lilley Property Centre, where I regularly take real estate photography along side special projects requested by agents.

Click on any image to see it larger, and click outside the image to close it.

Thumbnail image. Thumbnail image. Thumbnail image. Thumbnail image. Thumbnail image. Thumbnail image. Thumbnail image. Thumbnail image. Thumbnail image. Thumbnail image. Thumbnail image. Thumbnail image. Thumbnail image. Thumbnail image. Thumbnail image. Thumbnail image. Thumbnail image. Thumbnail image. Thumbnail image.

DECO1800

I really liked this course.

Big thanks to Lorna and the tutors for an awesome semester, sucks that a bunch of you are finishing this year! I loved DECO1400, and I liked DECO1100, so this course was a combination of the best parts of both, I could run wild thinking and creating with the design elements, and code to my hearts content in my favourite language, Javascript (and by extension HTML and CSS). I've learnt so much in this course about every part involved, especially the design process. I hadn't ever considered the possibilities of the specific issues I encountered during the semester, and thanks to being thrown in the deep end I'm ready to handle these in the future.

At the start of semester I naively thought two kinds of people existed in my program (from what I'd noticed from the past), those that wanted to do well and those that didn't care. But I've been shown that a whole spectrum exists. Influenced by personal opinions and the confidence of others in the group, I know now that most people need a clearly defined manager/management with clearly defined tasks to work well in a team. Before this semester I assumed (wrongly) that in these kind of projects, when anyone was given a task they would ignore personal issues and take it upon themselves to make sure it was 100% done, and done well. I know there will always be a spectrum between the extremes of people, but now I know that if my confidence in a project has my group thinking I'm the manager, I know what to do and how to do it. I've learnt how to organise many people, delegate tasks, lead a project creatively and functionally, and deal with the responsibilities of this kind of position.

For the technical side of the project, I've extended my abilities in Javascript/HTML/CSS exponentially, learned how to write and use AJAX and JSON, and query PHP scripts to use what they return. The skills I had in web development from DECO1400 were a good basis for the project, as I had used animation and JQuery, and knew these would be used heavily in the game. Before starting the project I hadn't ever thought about web browser games existing outside of Flash, so I attempted to use Javascript as I would Python. The implementation was more straight forward and successful than if I used Python for the game, with the HTML and CSS comparable to a GUI library with incredibly simple and effective processes, and many ways to do one thing.

I really love the way the three languages all combine to form what I consider to be the ultimate blank canvas. Each of the languages can do so much, and the way they overlap creates so many possibilities for style, for functionality and for fun. In this portfolio website, you're seeing the way I choose to use this blank canvas; an extension of my visual art style to display information in an environment that represents me and my style. This portfolio site is my favourite aspect of the course.

August/Month 1

The semester began with our introduction to the problem (instead of a brief); there's too much data on the Trove and Queensland Museum databases, with no important/interesting/cool/engaging way to view or deal with it. It was really important that the concept we decided on was something unique and interesting, something boring and not challenging wouldn't be 7 material. The first week or two was spent brainstorming like crazy, coming up with as many ideas as possible that weren't cliche. The first prac was based around photoshop, something I know really well from my photography experience. I spent the time well:



The following weeks involved more intense brainstorming, difficult, as there weren't many concepts that didn't seem 'done.' We decided that whatever our final concept was, it would use the images on Trove, as the images category is the most interesting category of the database. The problem was that most of the images on Trove are buried behind many links, so the actual .jpg file isn't easily accessible by a program or script. It also means a program would not be reliable in the future, as Trove updates and gives new results for old queries over time. Some Trove results however are Flickr links to images added to the Trove group on Flickr, which opened up the possibility to use these images using Flickr's API. Zane in the group was a PHP genius before the course even started, and he set to work right away to get Flickr returning URLs of images from queries. He finished his script in only a few days.

Not long after this we finalised our concept, one of my ideas. It was a kids memory/quiz game inspired by 'Where In the World is Carmen Sandiego.' It would be a web browser based Javascript game using Trove's collection of Flickr images of international locations. Our criteria for deciding on the concept was centred around how interesting and engaging it was, and this was the best by far. I spent the rest of my time before the first presentation finishing up incomplete tasks by my group and freaking out about the concept. My group's attitude at the time was worrying me and my self-esteem about my concept was getting to me. More about this in the next section.

September/Month 2

After the first presentation I really didn't know what to do, I'd never been in a group where no one questioned or criticised anything, they just waited on orders. It really threw me out and had me realising that in situations such as these, leadership can be assumed through subtext, leaving someone like me at the head of a project without ever wanting to be a manager. In my eyes design should be a round-table situation where everyone is equal, everyone has a say, and everyone criticises and questions a product/concept until it's polished to a blinding shine. My inexperience meant everything blew up in my face, tensions were high and my poor management skills caused jobs to be needlessly repeated. I eventually figured out how to manage, but not before members of my group started to dislike me personally. This would normally be ok, but it caused them to actively avoid some work. At first I thought they were just lazy, but a combination of issues caused their dislike to effect the project, something I hadn't expected, as it would effect their grades.

At this point the work ahead of us was divided between members of the group. Half the group did not want to do any coding at all, and one hadn't done any coding at all in any language. This ended up with tasks being widely distributed, which would leave everyone to become experts at what they were assigned. This was a delusion of grandeur on my part. I was allocated the Javascript game logic, the heart of the game and the largest aspect of the implementation. I loved it though, I could get writing and master this part of the project.

To start the implementation of the game, I decided that classes (in terms of object oriented programming languages) would be best to use, as there were many repeated screens and elements of the game. It turned out that Javascript didn't have classes like Python, but functions could be used in the same way, with methods. I started out by finding the requirements for the project, resulting in 4 different functional classes, one for the cards, one for the levels, one for the story, and an overall game class. The game class used the level and story classes in a cycle from the first to last level, resulting in a very involved and un-modular process, the kind of thing that Lorna warned us not to do in a lecture weeks later. Thankfully there were no problems because of this. The cyclic nature also allowed for easy editing of difficulty and number of levels in each game, which helped for testing and demonstrations.

Shortly after this was paper prototyping in the contact session. Other group members were assigned to design the basics of the interface before the first presentation, but they hadn't gone past rough simple sketches, so I had to improvise the interface back then, and this same design was used for the paper prototyping. Luckily it worked out OK, as testers liked the flow of the game, with a few suggestions coming in for a ready button and to make it an app (this would have limited our audience though, so we didn't).

At first I had used CSS3 flipping transformations, but these required convoluted HTML code with results that made me seasick. Instead I used a JQuery plugin called Flip (http://lab.smashup.it/flip). The hardest part at this point of implementation was the memory game aspect of cards flipping (or not flipping) in pairs depending on if they match. I used a list generated when each card was created, and used it for comparisons between cards, it worked well and surprised me with how many lines of code it required.

Preparation for the work in progress assessment was difficult, once again the differing work ethics and personal dislike came into play, with many of the tasks set out for others not completed, or unusable. Half my fault for not educating others of the concept, half theirs for not asking, there was a lot of confusion about the concept that would have been cleared by a few questions. Again I had to improvise the (now more detailed) interface, as well as try and make my work on implementation something that could be displayed. The preparation for the work in progress also meant the creation of the third and most official implementation plan, outlining tasks and deadlines for each member of the group.

After the work in progress presentation it was suggested that we use pair programming in case of something bad happening to members of the group, so in the case of the Javascript, Jarrod made sure he understood and knew what was going on. At this stage of implementation I moved all of my sleep, commitments, and other uni work to fit around working on the game. I didn't care anymore if people in my group weren't as obsessed, I wanted to see the game turn out amazing.

October/Month 3

Lorna told us to start the integration of PHP and Javascript using AJAX as soon as possible after the work in progress presentation, and when we started it was ok, but after a day or two we found our new best friend, error 504 (Nginx timeout). The loading process at the time started with a Trove query for Flickr links that were sent to Flickr for the .jpg URLs, which were used by the PHP to download them to the server, where a program installed called ImageMagick resized them and supplied them to the clientside machine. It turned out that this took over 60 seconds each time and exceeded Nginx's timeout limit, thanks to slow Trove and Flickr responses and UQ's internet. I hadn't been involved with the PHP so I hadn't known there was another option where Flickr could return smaller images to be processed clientside. The system was quickly changed, and the AJAX started to work again. I used CSS's max-height and max-width values to edit the images clientside, which worked out really well. I used a div hidden behind all other elements that loads all of the images supplied by AJAX in place, so theyre in the user's cache when each level starts. This when combined with the new (much much faster) PHP script created a seamless experience for users from level to level, as they would only see the loading screen if they finished a level within the first 10 seconds or so.

The days got hectic as I rushed to implement remaining features and fix every single bug and way to cheat I could find, including an incredibly devious cheat where as player could click on the same card over and over, getting 100 points each time. It was at this stage that all of the AJAX was working, the levels were loading correctly, the cards were behaving as they should, and the mechanic to guess the city was working. It was a disaster when I discovered the Trove results for international locations had changed over time, and now weren't returning relevant pictures. Instead it was returning images of Australian places taken by people that live in the queried city. This required a complete change of story. Jarrod had done some good work in this week creating the splash page for the game, it really made the game so much more inviting and professional.

It was less than a week before the final presentation, the trade show where we would need to pitch to and impress visitors to our corner of the room with our product. More than 5 hours sleep a night was unthinkable at this stage, as I finished the last touches to the game logic. This included the highscore system, using more AJAX and PHP to save and retrieve highscores, and cookies to prepare data for a printable page. As expected not much more work had gone into interface design since the sketches, but a background image and button styling was decided on, so I used inspiration from Pokemon for the frames around each element of the game, translucent white with a black border. Lorna had made it clear she didn't like how overly colourful people make websites to appeal to kids, so this sleek design remained kid friendly while not being ridiculous.

My favourite part of the semester started at about 11:30pm the night before the trade show. We were getting a 504 error (our old friend) from the server, and the loading bar would load forever. I promptly freaked out, nearly exploding at the thought of all the hard work going to waste if it didn't work by the next morning. Jarrod and I hadn't changed any code to do with PHP or AJAX at all, so after making sure it wasn't our fault, I tried a different Trove and Flickr API key, and finally checked the sites of other groups. Turned out they were all receiving the same issues, some timing out or receiving 'Service Unavailable' errors. I was not done polishing the game and I think I lost a few years of my life to stress in that half hour of terror. Not knowing what else to do, I decided to get some sleep, wake up early, and see if it was working. Bed at 12:20 pm, back up at 4am, I jumped back onto the computer and tried the game. It had the same error, so I slept for an hour, came back, same error. Determined not to give up, I spent the next few hours refreshing every minute or so, until 7:30am when Trove fixed their error (as explained on their status blog). I have never written anything in my life as fast as the code I wrote in that half hour before 8, when I had to leave for uni.

I had finally polished the game ready for the pitch, and left for the trade show. Taking hints from a site linked to on blackboard, our booth was impressive, using coloured tablecloths (unlike any other groups in the room). My monitor which I brought along distingushed our booth from the others even more with its bigger screen. The candy we gave out to each visitor to the booth went over quite well too. The trade show went really well, everyone who played it liked it, was impressed by our game, and got into the competitive highscores (which Sharde topped the entire time).

It felt good to see everyone enjoying the product of so many hours of work and overcoming problems. I'm really happy with the game and how it came out. I've learnt so much about web design and the design process this semester.

Hello!

I'm Alex Balson, a student at the University of Queensland where I'm enjoying my Multimedia Design program. I've been interested in both arts and anything to do with computers for quite a while, and in combination with my ridiculous number of hobbies including photography and street art, it gives me a unique perspective on design as a whole.

I like to make street art, make music, take photos, play video games, watch science videos on youtube, read, hike, and mess around with JavaScript. The pressures of a university semester get in the way of these hobbies, so my holidays are insanely busy.

I can write Python and HTML/CSS/Javascript code, and I'm a fast learner. In the past I've written programs to search documents for strings, plot graphs, tag and display images in Python. I've also built websites for my real estate photography portfolio, a classic car hire company, and this site you're looking at right now.

I can be contacted at alexander.balson@gmail.com, and on 0412278454.



This site was made using jQuery, Konami-js, and jqueryrotate.

I design and develop websites with a unique approach to design. I enjoy animation and non-standard navigation, and I use them to create interesting and different sites.

I use HTML, CSS and Javascript, and can write Python programs, for small to medium projects.

I've also been in the professional photography field for over a year now, and have been involved with photography for years. Professionally I've worked in Real Estate Photography, Portraiture, and street photography. This gives me a sense of composition for the visual design of my work, using photographic aesthetics.

I compose music for movies and for myself, using guitars, computers and a combination of both.

logobird
logobird logobirdface

A L E X N D E R
B A L S O N

  • Hi there, welcome to my website! Here you will find previous projects I have worked on in RECENT WORK, my experience during this time in REFLECTION, my photographic portfolio in PHOTOGRAPHY, and information ABOUT ME and WHAT I DO.

  • This site is best viewed in 1080p.