Standalone Interactive Widget for B2B Website
Front end web development
Primarily HTML & CSS
Knowledge of Craft CMS is a bonus
Completed within 2-4 weeks from brief
What is it?:
This is an interactive widget that sits inside its own container to bring our new product visual to life. It provides a small amount of interaction to increase engagement on the home page and to help explain the story of the product without too much being shown up front. It then also contains links to other pages on the website to aid navigation throughout the site.
The high level visual is attached (1).
How will it be used?:
It will be used on the home page, and potentially a couple of other high level pages across the site to reiterate the message. We will apply it to the website (Craft CMS) with our in-house dev team, and may make tweaks to the code if small changes are needed. You just need to provide it as a standalone piece and we will look after all implementation.
What exactly will it do?:
Initial load as per attached image without the black/grey subtitles. Ideally it would build/load on piece by piece, and be removed piece by piece on scroll.
Then can click into 3 sections; on each click it zooms in so you can only see the highlighted section. On the initial load visual there needs to be something that indicates you can click it; it could be a small infrequent “pulse” animation, a hover change (ie. greys out the section you’re not hovering over) or something else.
As it zooms, subtitles also appear. Also have a ‘back’ option to zoom back out.
Then you can click each major button and minor subtitles, each with a different hyperlink to open in a new tab. Again, something to indicate it is clickable, such as a slight zoom/font size increase on hover or similar. Clickable sections indicated here.
Other things to be aware of:
We will provide everything, such as text, colours and links, but this will all be placeholder. We may make changes to these details when we implement it, so it needs to be editable within the code. We will work the text changes for example around the animation though, so expect similar character lengths etc for animation purposes.
It needs to be kept as lightweight as possible, and using sprites if that’s an option with the design plan.
Mobile will need to work differently; the ideal is that it can be adapted to a vertical interactive version (shaped like the below), but if that isn’t possible then we can replace it with either a static or video. We will need to discuss this as it’s not set in stone and we’re keen to hear your advice.
In what capacity are you hiring?
On behalf of my company
Where are you in the hiring process?
I’m ready to make a paid hire
Would you like to state a preference for hiring from underrepresented group(s)?
Where did you find Twine?
You contacted me
Is this an independent one off job, or part of a larger project?
Single job with no follow up work
For what period of time will the freelancer be needed?
More than a week
What freelancer experience level is needed? (per day)
Senior: $600-800, Expert: $800+, Mid-level (Industry Average): $360-600
What do you need to be developed?
Is this for a new or existing website?
Do you currently own a domain on which to launch the new website?
Yes, I own the website domain
Is the current website static or dynamic?
What programming language is the current website written in?
Is the content for the site ready?
Work has begun on this job
...but don't worry, your next job is waiting for you on the Jobs page