juweNTUs

Current version

2010-03-01T02:44:00.000-08:00

After the research chose colour sample 2 I'm going to upload and update the current version here regularly:

Jump to the ISG website!

(View it with Google Chrome)

Flash Slideshow

2010-02-11T12:40:00.000-08:00

This is my first flash slideshow which I will use for the ISG website:

Click me!

Color Samples

2010-02-01T08:27:00.000-08:00

By using Adobe kuler I created three individual color samples:

Project Take-Off

2010-01-26T10:46:00.000-08:00

Steps:

encode general design (done)
text & pictures (in progress)
colours & buttons
visual effects

Further development:

flash image slideshow (in progress)
login & database

Current status can be viewed here.
(please use the newest Firefox)

Software Engineering

2010-01-21T05:34:00.000-08:00

To develop a good and stable software you need to plan the whole developing process carefully. A good and often used concept is the so called waterfall model. It consists of six major steps: problem definition, requirements analysis, prototyping, implementation, testing and maintenance.

That means you start with a feasibility study. In this first approach you describe the problem, develop first methods of solution and estimate costs and other ressources which is also part of the second step: the requirements analysis. After you are certain about your goal and the required ressources you start designing a prototype (e.g. a mockup) before implementing. The implementation should go step by step with the testing to prevent bugs which are not retraceable. The last step is to provide a good support for your product which could also take a lot of time.

Another method of developing software is the so called whirlpool model. Actually, it is the waterfall model, but modified. The idea is to loop and overlap the different steps whenever you face a problem and go back to earlier steps.

That causes on the one hand a more complex and expensive model but on the other hand it prevents unrealistic estimations which could be dangerous for the whole project (risk reduction by iteration).

Gallery Sample

2010-01-20T17:42:00.000-08:00

Nice example for a useful gallery: nicolawalbeck.com

1st Sample encoded

2009-12-10T09:42:00.000-08:00

This is the first design sample encoded with CSS:

Klick me!

JavaScript Practice Quiz

2009-12-09T16:58:00.000-08:00

1. Define what constitutes a statement in Javascript (JS)?

A statement consists of at least one command which can be enclosed by curly braces. Moreover, at the end of a statement there has to be a semicolon, e.g.


a=1;

equals


{a
=
1;}

__________

2. Name three different types of JS variable?

The first one are numbers, divided into integer (which can be expressed in decimal, octal, or hexadecimal form) and floats (or doubles which have decimal points). Boolean values can be true oder false and strings are sequences of characters.
__________

3. Using JS array myarray, what is the syntax to access the 5th element?

The syntax to access the array at index 5 is myarray[5], e.g.


myarray[5]='Hello World';
document.write(myarray[5]);

__________

4. How would you use a string class to change some text to upper case?

The syntax to change some text to upper case is .ToUpperCase(), e.g.


mytext[0]='Hello World';
document.write(mytext[0].ToUpperCase());

__________

5. What is a class and how does it relate to the JS document object model (DOM)?

Classes are not that important in JS as they are in other programming languages. A class is a group of similar objects. These objects are called instances and can be e.g. variables. That means the number 3 is part of class object with the subclasses number and integer and two methods: toString() and valueOf().

Wonderwall

2009-12-09T16:50:00.000-08:00

Wonderwall uses a very interesting method of interaction navigation which reminds of the Mac navigation bar.

3rd Design Sample

2009-12-08T10:24:00.000-08:00

Track my T

2009-12-08T08:44:00.000-08:00

Track my T is a very funny website on which you can follow up the way your T-shirt went through until you bought it. Nearly everything is interactive and flash-based. Moreover, there are some hidden facts. For example, did you know that it takes about a third of a pound of raw cotton to make one medium-sized T-shirt?

Hangman V1.0 BETA

2009-12-02T13:06:00.002-08:00

It is actually playable but a very raw version ;)

Play me!

2nd Design Sample

2009-12-02T13:06:00.001-08:00

1st Design Sample

2009-12-02T07:53:00.001-08:00

Hancock

2009-11-26T01:14:00.000-08:00

Found the official Hanckock website. I really like the design of this page as well as its navigation. That is very close to how my website should look like.

Hangman

2009-11-25T17:02:00.000-08:00

I want to code the Hangman game in Javascript. Therefore, I divided the whole problem into smaller ones:

Create an array with several words (DONE)

Get one word out of the array randomly as well as its length and return it as a string (DONE)

Print a '_' for each letter in the word (DONE)

Get a letter from the user and start the function to search for this letter within the string (DONE)

If letter can not be found in the word start function to draw the first line of Hangman

Write a new line in the document with replaced letters

Start debugging: allow only single small letters to be entered, more than one letters can be the same in the word

Dodgeball!

2009-11-19T01:50:00.001-08:00

While surfing I found this funny dodgeball website which reminds me of the movie with Ben Stiller and Vince Vaughn. There are some impressive lights and flash animations. Check it out!

Colour Impressions

2009-11-13T01:55:00.000-08:00

Different colours are used to stand for different moods and meanings. For example, red is the most eye-catching and aggressive colour whereas green stands for health and hope.
You can fairly mix up colours of the same type like warm colours (red, orange, brown, yellow) or cool colours (blue, grey, white).
One of my favorite "colour" is black which looks serious and noble if you use it for backgrounds with other appropriate colours. When it comes to light colours I like a light green (e.g. #99ff99) which fits with white, grey and black in the right relation.

Since colours have different meanings logo colours are not chosen randomly. For example, the SAP logo is blue.

Blue stands for loyalty, reliabilty and security - essential for the world's biggest business software provider. But what does it look like when we change the colours?

The light green is not as strong as the blue but seems on the other hand more familiar which not necessarily fits their image.

A combination of red and brown stands for aggressivity and nature/aged. So it is supposed to catch your attention as well as to mean experience.

First JavaScripts

2009-11-11T17:15:00.000-08:00

Below the links of some JavaScript examples I have been working on (enable scripted windows):

Calculating cost including VAT

V with variable rows

V (using a function) with variable rows

X with variable rows

Image Changer

Guess the right number!

Wireframe Mockup #1

2009-11-04T16:00:00.000-08:00

I want to design my homepage very clean and therefore I want to use whitespace. But it is very hard to create a good-looking and easy-to-use interface only by means of space and fictive dividing lines.

This website sample looks ok. But if I just delete the boxes...

... it looks very boring and you can get lost easily. I will try use different colours and some visual effects like brushes, patterns, etc. to make it clear and assessable.

Inspiration

2009-11-04T12:30:00.000-08:00

While searching for some inspiration for my website I found a very funny Flash-based website made by bigbossstudio.

This website is very action-packed because of five little animated and interactive figures which guide you through the content. Moreover the different pictures, which are used as a kind of building blocks, are animated as well and.
But nevertheless the website is still assessable and well-structured.

User Generated Content

2009-10-27T09:00:00.000-07:00

Wikipedia is maybe one of the most well-known examples concerning user generated content. But that's why it is not accepted as a source for scientific researches or even any school work. Every user can change the content of the articles. There are thousands of examples of wrong information at Wikipedia like the article about John Seigenthaler. It said that he murdered Robert F. Kennedy and maybe John F. Kennedy as well and was online for several months. Nevertheless, it is a good choice to have a quick look.
Another website which consists mainly of user generated content is Facebook (or any other online community). These communities are living on their users. But what disposes the users to publish private information/photos/videos/etc.? Of course, it is a good opportunity to arrange meetings and events or keep in touch with each other. Moreover Facebook offers a huge variety of programmes and tests to spend time and to keep the users on their site.

My Project

2009-10-27T08:44:00.000-07:00

During my semester abroad I will create a complete website for a research group of the NTU, which works on new scanning techniques and 3D imaging.
I will use HTML (& CSS), Javascript and Flash during the first term and enhance the website by integrating more interactive Flash and a database and publish the single steps here.

effAct - a bachelor project

2009-10-21T10:50:00.000-07:00

This video presents our bachelor project we did in the last year. We connected a motionsuit via different protocolls (e.g. DMX, MIDI) to some interfaces and created effects in Processing which can be controlled by the motionsuit and switched on/off by an effect-tool in real-time.

Joel Schafer: 'I'm into minimalistic clean design'

2009-10-21T10:15:00.001-07:00

The interview with Joel Schafer got one important main aspect: "make a manuscript before you starting to produce". That is not how I started my work in the past but i think it is very difficult to develop a whole project with more than one person working on it without planning propperly. Projects (like software engineering) need a detailed plan about research, available resources and contain enough time slots for testing and debugging as well.
I think it is worth to try :)

Read it!

Dan Saffer: 'Interaction design is an applied art'

2009-10-21T08:12:00.000-07:00

Dan Saffer talks about the development of his view concerning Design and how that changed during his studies. Therefore, typography has been an important factor to broaden his mind.
The same thing happened to me during an internship. I had to create animals which consist of the single letters of their names, e.g. a monkey consisting of M, O, N, K, E and Y. That was very interesting and made me think about other ways to integrate typography.
I agree furthermore to the statement that in order to work professional and precise "you have to understand the properties of the medium you work in". That means you have to work out the basics (programming) to know what is actually going on when e.g. clicking on a link. This accompanies with the ability to discover different possibilities to reach your goal and be able to use them. Saffer mentioned two major mistakes a newbie could do: "one is not coming up with enough variations—or, more accurately, not being able to come up with more alternatives" and not to pay attention to the small (but important) details as well.
In my opinion Saffer is right in what he is saying about what is important and what could be done better, because a lot of it applies to me as a young designer.

Read it!