• A$380

• 42 designs

• 3 designers

---

Web Design Brief

I'm looking for a skilled web designer and frontend developer for my mini-website design and coding that will document an interaction with a company customer support.

I'd like the design to be very lightweight, simple, contemporary, decent. Light colour palette, please.

It must be responsive and work in all desktop browsers, smart phones and tablets.

As to the code, please, make sure to keep it clean and simple. For custom Javascript, we need a single file shared among all pages. Please, use the latest jQuery and any good plugins.

Also, a single CSS file shared among all pages. Feel free to use Bootstrap.

Important: This is not a website to promote customer service of a company, it is to show how bad their customer service is.

The website has no logo.

The title in header is "Telecube Customer Support", subtitle "Do as you would be done by".

Main navigation only contains three items: HOME, FULL, ABOUT.

Every page will have a footer with a single line of text.

The website consists of the following pages:


Frontpage/Slideshow (HOME)
=================

This is the main page of the website. It displays a communication between a customer and a company, one message a time, in a form of a slideshow.

I'm not looking to have any images, extra blocks, or anything else. Just a well designed message slideshow taking up most of available space, header, footer, and that's about it.

A slide is typically very short, a few words up to two sentences. Please, use dynamic font size to use larger text for shorter messages. Think Facebook, but don't overdo it.

There are three types of "slides":
* message from company (li.telecube),
* message from customer (li.customer ),
* comment from customer (li.comment).

It needs to be clear from styling which one is which. That said, don't overdo it with colours. Slight indentation to the side to mimic iMessage might work, but be mindful.

As for the slide effect, please, don't make the slides "slide" from right to left. I'd prefer a simultaneous fade out/fade in effect or something similar. Something smooth, non-distractive.

The main slide text is in "li div.msg".

Each slide contains additional information like name (li div.author div.name), position (li div.author div.pos), date (li div.author div.date) and optional note (li div.note) and status (li div.status).

The date for each message is in format YYYY-MM-DD and will need to be used for two counters above the slide:
* days since the very first message,
* days since the last company message.

The counters need to be calculated and/or updated for every slide.

In addition to the two counters, there's going to be an Issue Status field, which will be taken from the closest previous message that contains a status change.

In case the above sounds confusing, I've got all the content in a well-structured HTML, which will give you a good idea (file attached).

The display time length of each slide will be dynamic -- based on the number of letters in that slide. The milliseconds per letter constant will need to be easily configurable in the source code (var letter_ms).

The slides with class="dramatic" will need to have some sort of subtle effect to emphasise them, plus will be displayed longer by a constant (var dramatic_ms).

On mouse over (desktop temporary), click (desktop permanent) or tap (mobile/tablet permanent), the slideshow will pause and navigation arrows will show up for the previous and next slide.

Each slide must be possible to be referenced by unique URL, either by position in the list of messages, or its "id". Use URI hash for this, e.g. #pos=10 or #id=msg12. The URL needs to change along with the slide change. If slide has an "id", it will be used for the URL, otherwise use position.

The slideshow will also contain a link to the Alternative format, all in one page, see below.


Alternative format
=============

The content is identical to the above Frontpage/"Slideshow", but is displayed all in one page. Other than that, the styling should be identical to the slideshow.

Each message item also needs to include the two counters and Issue Status, styled in a less conspicious way.

The URL hash references should work identically, and scroll the page to the referenced message.

This page is only linked to from the slideshow and doesn't have a menu item in the main navigation.


Full communication (FULL)
===============

A page identical to the "Alternative format", but with more content. No coding should be required here other than replacing the content.


About (ABOUT)
=====

Just a page with a single image and a few paragraphs of text, styled to match the rest of the website.


That's it, let me know if you have any questions.

Cheers,
Jan

Coding

Coded - Design and coding required

Number of Pages Required

3 page

---

Font styles to use

---

Colors

Colors selected by the customer to be used in the logo design:

---

Look and feel

Each slider illustrates characteristics of the customer's brand and the style your logo design should communicate.

---

Files