lab
code
Web Apps
Development or coding, originally started with BASIC and LOGO, progressed to MACHINE CODE, PASCAL, FORTRAN, C, C++, PERL. More recently we have focussed on the PHP web framework of CONTAO and the AJAX library of MOOTOOLS.
Our approach to coding is that of solving a technical design.
It's easy to develop custom web applications for the Contao CMS using its Web Application Framework, because it's light, easy to code, extendable, object-oriented, multi-language support, uses and integrates with MooTools.
Contao's uses an amazing LiveUpdate feature, which upgrades the CMS over the web using the Back-End system alone. In addition, all third-party extensions are listed in an Extension Repository, from where you can automatically web-install any extensions with a single click.
We have written our own extensions which are available to install using the Integrated Extension Repository.
Gallery
Create collections of artwork, photographs or galleries with filterable list and detail viewer with comments.
Catalog
Define multiple unique catalogs, custom field types and various front-end display formatting.
Quick Poll
Create multiple quickpolls: create, vote, results, list.
Image Headline
Dynamically replaces any CSS elements with image-rendered fonts.
Other Extensions
We have developed other useful extensions including:
- Catalog Mailer — Send selected catalog items in a pre-defined mailer
- FormAuto — Automatic Form - auto-create table, storage, advanced form validation
- Unzip — Adds unzip to the File Manager. Unzip selected or all files in zip file.
- Invitation — Group your designer invitations (e-vites) in groups for preview, bulk sending
For the entire list of all our extensions, widgets and utilities, click the link below.
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.
Basically MooTools allows you to code in JavaScript without having to worry about whether it will work in a particular browser. We use MooTools to code Contao CMS Widgets that have AJAX requirements and to write website special effects using Periodical, FX, Tween, Morph, Transitions, Accordion, Scroll, Slide, etc.
Furthermore, we combine these with HTML5 and CSS3 to create beautiful animation effects comparable to even Flash. We can customise any downloaded MooTools Class library and modify it to suit our particular need.
We usually include a few MooTools animations by default into all our websites, and the Thyon Design website uses exclusively MooTools Animation effects.
No matter what anyone says, Flash is not dead yet. Flash remains a great interface to design keyframe animation.
Animations created by Flash can be exported as video for self-playing DVDs and over-layed on other video effects. Flash can also be used to write interactive applications for environments like Kiosks, Computer Screensavers or interactive elements on websites in the header or as interactive banner advertising.
We can develope a range of Flash requirements:
- Full Flash Websites — using Contao CMS for content
- Flash Animations on Websites — menus, drop-downs, complex mouse-over effects
- Flash Animations for Video Adverts — multi-layers combination effects
- Flash Interactive elements on Websites — using combinations of mouse, physics and particle animation
concept
Applied Imagination
A concept is a piece of imagination that has started to crystalise into a concept, an idea. Taking this idea further, is what design is all about.
Refining the concept until it creates a replicating harmonic flow, which is easily recognised, then you know that the concept is sound.
Every client starts their concept or company from an idea, an origin, germination point, seed-crystal or a starting point.
We realise that the client is the source and we simply observe, listen, question and write down the outflow of these ideas. The result from all the answers, form a kind of puzzle (and we're so good at puzzles), which we put together until it forms a map.
We then explore the map with the client and assist them in navigating through the various areas of the map. Each area of this concept map provides an outflow for design.
Since the origin idea is the source of all of the design, it remains a sound source upon which all of the company's activities are based, and provides the starting point from which we can create basic prototype draft designs.
In design prototype, we do an extremely detailed brief with our clients. This leads to a very well defined concept before any design on paper or computer is even started.
Then we work on a binary tree method of design. Whereas many designers will offer multiple varieties of designs, we tend to stick to a single root design with minor variations. This root design is then commented on by the client, and we replace that which the client dislikes, until the design gels.
With the root-binary method we have achieved a hit rate of 90% successful design for the first prototype. The second prototype usually has very minor layout size adjustments.
Website Prototype
For website design, we use a graphic prototype method. This method ensures that the visual created can be easily moved into production and will look identical to the original prototype.
The prototype usually doesn't include detail content section design and will also include latin text to fill blank spaces. Once a client is satisfied with a prototype, it leads to rapid deployment into image slices, CSS code and MooTools animations.
Below we've included some prototype screens with that of the final design.
|
|
|
|
|
|
|
|
Backtracking
One of the important things to remember with design is to always keep a trail of all the designs, variations and iterations. You never know when you or the client wants to return to a previous version.
Sometimes the work done in another variation is exactly what is needed later on in the project, or possibly even in a completely different project for another client.
Weeds
In any design process, the client needs to see the design stand out. Even when we know for a fact a design is correct one, we always add variations and minor color or shape changes into the preview presentation. This allows the design that is most suitable or the design that is the best, to really stand out.
This process is like taking out the digital weeds and is a very important step, not only for the client, but also for the designer — it allows both clearly to see the way forward.
Concept Variations
colour
visible spectrum
Colour is defined as a wavelength of light reflected off object surfaces, but colour also influences us in subtle ways. Colour sets the mood, binds a space or design together through harmony and creates powerful associations.
Colour through the ages has always been used to identify: sun, trees, sky, minerals, crystals, gemstones, war paint, flags, etc. Colour can also be used for healing.
Colour Gamut
The colour gamut is a range of colours that can be reproduced using:
- a projector or printer: a colour device
- selected range of colours: a color space like RGB, CMYK, L.a.b or Pantone®
Examples from largest to smallest gamut:
- Laser Projector
- CMOS Digital Camera Sensor
- Photographic Film
- CRT Monitor
- LCD Monitor
- PAL, NTSC (less) Television
- Paint
- Pantone® Printing
- CMYK Printing
- Monochrome Display/Printing
RGB: Additive Colour Space
After research into colour, it was discovered that our eye's retina have physical receptors for Red, Green and Blue, called trichromacy and the RGB colour space was born. To create a colour in RGB, you specify the amount of color light to be used for each Red, Green and Blue, which when combined create the colour. This standard is used today when defining colours for images in Photography, Monitors, HDTVs and Projectors. The background color for RGB is black.
CMYK: Subtractive Color Space
At the same time, the printing and chemical industry was hard at work to create stable synthetic pigments that could be used to create colour-printing with only 3 or 4 inks. Since the background color for printing is white, the color space was inverted to Cyan, Magenta, Yellow (CMY). These inks on white paper would subtract until black was reached when all three colors were used. Since very dark black was never achievable, they added blacK (K) to ensure a pure black, or rich black was achievable.
L* a* b*: Color Space in 3D
Unlike the RGB and CMYK color models, L*a*b* color is designed to approximate human vision. It aspires to perceptual uniformity, and its L component closely matches human perception of lightness.
Since the L*a*b* model is a three-dimensional model, it can only be represented properly in a three-dimensional space. This color space is now used as the master color behind most printable colors.
Pantone® Colour Matching System
The Pantone® Colour Matching System is largely a standardised color reproduction system, so different manufacturers in different locations can all refer to the Pantone system to make sure colors match without direct contact with one another.
Most of the Pantone system's 1,114 spot colours, cannot be simulated with CMYK but only with 13 base pigments (15 including white and black) mixed in specified amounts.
The Pantone system also allows for many 'special' colors to be produced such as metallics and fluorescents.
Visible Spectrum
The universe we live is perceived through vision using the visible spectrum of light, from Red ~700nm to Violet ~400nm. These form the familiar colours of the rainbow, which is caused by white light diffracting through rain droplets acting as prisms.
The colour of an object is both the combination of its properties of surface diffuse color, specular reflection, refraction, absorption (and more) and the color of the light falling on the object itself. A red object illuminated by a blue light will appear black.
To create colour in our daily life, we use lights with colour filters, pigments or dyes, and reflective materials.
Colours can also be created using interference:
- random patterns in a substance produces scatter, e.g. blue sky
- patterns on the surface of an object produces iridescence, e.g. bird feathers, mother of pearl, opals, butterfly wings, soap bubbles, films of oil
Color Blindness in Design
Whereas birds and some women are able to perceive 4 primary colours including ultraviolet, it is also necessary to consider that large percentages of the population are in fact color-blind, so certain color combinations on website, posters and flyers, may simply not be visible at all.
Although there are many types, the most common hereditary type is red-green color blindness, between 7-10% of the male population, with females unaffected. The percentages for dichromacy (see only 2-colors) are around 2.4% and anomalous trichromacy (1-color deficient) is around 6%.
Good graphic design avoids using color coding, or color contrasts alone, to express information as this not only helps color blind people, but also aids understanding by normally sighted people.
Color Tools
Click on the more link below to see the Color Scheme Sesigner online tool. It includes a simluation of color blindness to ensure your design remains visible.
Color Healing
Colour has a strong association with certain emotional states. Red is a colour of warmth and comfort, blue is calming and cooling. Colour is also used in many alternative healing methodologies where they are associated with certain healing aspects.
The Chakras
Many Eastern healing modalities, including Indian, Chinese and Japanese base many of the healing on the existence of the chakra.
A chakra is believed to be a center of activity that receives, assimilates, and expresses life force energy. The word chakra literally translates as wheel or disk and refers to a spinning sphere of bioenergetic activity emanating from the major nerve ganglia branching forward from the spinal column. Generally, six of these wheels are described, stacked in a column of energy that spans from the base of the spine to the middle of the forehead, the seventh lying beyond the physical world. It is the six major chakras that correlate with basic states of consciousness.
Anodea Judith (1996: p. 5)
The combination of healing modalities of Reiki, Shiatsu and Chinese Acupuncture together with Crystal Healing, all base their properties that certain colours promote healing effects. The chakras with their associated colours, are linked with endocrine glands, emotional states, crystals with similar colors and therefore form a holistic approach to colour healing.
In the design process, we have to be aware that our eyes can be fooled in many ways. The following is a list of optical and color illusions we sometimes have to explain to our clients, avoid, or use to the benefit of the design.
Shade of Gray
The two orange dots on the picture, are placed on identical shades of gray (as verified in any image editor). The combination of alternating squares and the shadow casting, interferes with our ability to see the correct color or shade.
Gradient Illusion
The block in the middle of the gradient is actually just a solid colour of gray. This illusion is often in place on websites with gradient backgrounds and solid content blocks.
The Lilac Chaser
The lilac chaser produces 3 different illusions. Stare at the center cross for 30 seconds to see: 1) a gap running around the circle of lilac disks, 2) a green disk running around the circle of lilac disks in place of the gap and 3) the green disk running around on the grey background, with the lilac disks having disappeared in sequence.
The Café Wall Illusion
The café wall illusion creates angled appearance on perfectly straight horizontal lines. This is created by staggering the alternating tiles, moving left and right. The horizontal "mortar" appears to be at an angle.