defn: back to the beginning, to start again.
From the beginning,
Simple fundamentals…
Reboot.
A site redesigned,
right from scratch.
Site coding and front-end development for the reopening of NosHaven.com.
I am pleased to be involved in the relaunching of NosHaven, a fansite for the mmorpg Nostale. The forum on the old NosHaven site had experienced problem with hacker attacks. To prevent from further attacks, the site needed a complete overhaul. Jenna, the fansite owner, asked for my help in the re-making the site. A new content management system, Joomla! was brought in. This was my first time dealing with CMSs. I was pleasantly surprised at the smoothness of the transition and the system’s relative ease of use.
Overall, the NosHaven project was a test of my creative problem solving abilities. It is a great deal more complex than my usual, fairly static, page design. I had to wreck my brain to come up with workarounds for the various problems that popped up throughout development. It has been a great learning experience for me though.
Version 6 of a mockup for a site design intented for a nostale fansite NosHaven.
A layout design intented for a nostale fansite NosHaven. I’ve started incorporating more vector elements in my work, e.g. wavy lines, flower-like pattern in header bg, design on header bars etc. This design was scraped though because too much purple was used. Nonetheless, it's in a different style than most of my other work.
Version 2 prototype design for the NosHaven fansite featuring the pajama class in the game.
NosHaven is a fansite of a mmorpg called Nostale. The site owner, Jenna, was in need of a new look for the site. So I tried my hands on creating something that resembles a game site. The theme is taken from the landscape and interface within the Nostale game.
The previous layout for nightning.breathtaken.net in the theme of psychology of the mind.
This is a white background layout almost taking the idea of stark simplicity to the extreme. It’s an acknowledgement to the wonders of the mind. How something composed of simple networks of neurons can generate our complex thoughts. So no fancy Photoshop manipulations for this design. Nothing but the unusual angles provided by the framing of the hands. Yes, this is the first time I’ve used my own photography in my work. It’s also the first time I use photographs of myself. They’re only hands but, nonetheless, a first for me.
This layout is the direct result of taking too many psychology course on brain, cognition and behaviour. The joy of university learning… =] It came to me while I was in my biopsychology class… daydreaming and doodling on the margin of my notes rather than paying attention. Cognitive Framing was thus borne.
In any rate, the frame created by the hands was suppose to represent our perception of the world. That we seldom see everything out there… that we only focus on one specific part of our environment at a time. The fingers covering part of the title also illustrate another point I have learnt in class… our minds often fill in parts of what’s missing in our vision for us. Sometimes to the point of filling in something that we think should be there when in reality, what's there is something completely different.
A MySpace page design.
A layout I created using Photoshop and Illustrator CS2 for myspace page in Fall 2006. The idea of the “Mostly Harmless” Earth was inspired (you guessed it!) while reading the Hitchhiker's Guide.
Layout version 2 for nightning.breathtaken.net in the theme of the study of motion.
This is an attempt to create a more “technical”, sleek look. All my previous layouts graphics are much less structured compared to Anatomy of Motion. The layout structure is based on the Emily Carr Institute of Art and Design site.
On the more technical side, I have finally made a complete transition into pure div-based layout design after so many years. Bye bye tables! It wasn’t easy using css on div tags to account for screen resizing. There’s still a kink or two with this layout when viewed in IE. That is, when the screen size reduced to less than 800X600, the layout breaks for IE. I wish they’ve implemented max-width etc like Firefox does.
In addition, I have also scripted a simple layout selector from scratch in PHP. The layout selection is stored in a cookie. The server checks the cookie in order to load up the correct layout. The system also has header and footer caching abilities, to reduce page loading time.
The first layout at nightning.breathtaken.net.
This was my very first layout design here on breathtaken.net. It’s been a long while since I made a full site design. As a start of something new, I decided to work on cross-browser, cross-screen resolution compatibility. This layout has been tested on IE and Firefox across all screen res from 800X600 upwards. While the coding meets industry standards, I fear the rest of it: graphics and layout style doesn't. Header image is huge... black background is frowned upon... have I missed anything else? Well this site is suppose to be a feature of my graphics and webdesign, however pitiful they are. Fragmentation can be looked at as a statement. Why be a conformist at everything?
I have been wanting to make a layout design using “fragmented bars” for a while now. It’s just that I have not had the time (was too lazy to) create it. The idea for the Nav sidebar is new though. I thought of it while reading through a list of valid tags on W3C. The <pre> tag... never knew it existed until then. You may ask, “How does a html tag that allows you to insert preformated text directly on the page leads to the sidebar design?” Well, by itself it doesn’t. However, if you were thinking about the fragmentation layout while reading about the tag, it does if you are the good old scattered-brain me.
The original <pre> tags has been replaced by css positioning properties. It makes the coding cleaner, plus it gives me flexibility of changing layout designs using purely the linked stylesheet.
My old personal website. [Taken down]
This was my brinkster website prior to getting hosting from Prissi. It was created in 2003 using tables and CSS. In hindsight, the theme of the site seemed to match the carefree joy I experienced as a freshman in undergrad. Despite my less proficient skills in Photoshop at that time, the design, nevertheless, reflected on my need for simplicity in design. The lessons from Mr. Yuill in high school has stayed with me even past so many years. I believe what he taught me has shaped my approach to web design positively and I am grateful to have attended his Info Tech classes.
Nightning.breathtaken.net is the personal creative playground and design portfolio for Cheryl Chung. It includes, among other things, digital drawings, logo, flash, website design and development.
For additional information about me, please refer to the About page.
