Design Implementation

[neutraltone]

Front End Developers

This is a brief specification on building the designs for the Front End Developers website.

Designs

This is the daytime version of the website

This is the night time version of the website

Functionality

• Day time / Night time: As you can see above there are two version of the design, day time and night time. The idea was to have the corresponding background gradient displayed based on the users system time. There would be a period of 30 / 60 mins where sunrise or sunset is happening, during this time the gradient would slowly shift
• Natural language form: The signup form was following the pattern of a natural language form. Some experimentation needs to happen here as the idea was for the input to grow if it's content exceeds it's area but this could cause shifts in content to be jarring. I experimented with contenteditable instead of inputs but ran into this chrome bug - https://bugs.chromium.org/p/chromium/issues/detail?id=544935&thanks=544935&ts=1445260931
• Stars: There is a stars asset which can be found in /src/sprite/stars.svg, there should be examples on how the sprites are used in the markup with the mountains. The idea here was to have them anchored to the top left of the browser with only 1/4 showing and have them very slowly rotate over the period of 24hrs.
• Shooting stars: At night time, as shown in the design there was the idea to have shooting stars appearing in the sky leaving a trail for a second or two that slowly fades away. If you've ever seen a shooting start in a real life, just like that.

Design assets

If they aren't included in the src folders I'm sure I have them kicking about somewhere.