Step 4 

Techniques

There are many website builders and tools out there that can help you build a website. In order to find the most unique way to build your website, you need to explore all the existing tools that will help you to find your sites desired behavior.

Combine

Once you figure out what the desired behavior for your website will be, it's not always easy to create it with the existing tools. Sometimes you need to combine different tools or even use a frontend developer to build your online story. ​

 

For example, this website was built through a combination of a Wix template containing iFrame elements. The iFrame content is an HTML5 canvas that was created using Adobe Animate CC and allows you to create animations and add interactive elements. ​

The Low-Budget Approch

The most common approach to building an interactive story is to plan it out, then mock it up, and then execute it using an outsource company that will build it for you. ​

 

The approach presented here is aimed towards low budget projects that can't be outsourced to a frontend development company. So for all the UX designers out there that want to express themselves, this is for you! ​

 

So instead of outsourcing the project, do it yourself. Learn what areas you can add your own magic to using the available tools. Learn to combine the use of the existing tools to create something unique all by yourself. ​

 

This means that sometimes you will need to make minor adjustments to your original plan for your website in order for it to fit your knowledge of the different tools your using. ​

Website Builder Tools

thumb_66wix.jpg

Website Builder

Wix enables users to create HTML5 websites and mobile sites through the use of online drag and drop tools.

Wix

>

thumb_66elementor.jpg

WordPress Page Builder

Drag and drop WordPress plugin that allows you to easily create custom WordPress layouts.

Elementor

>

thumb_66squrespace.jpg

Beautiful templates

Software for website building. Create webpages using pre-built website templates and drag and drop elements.

Squarespace 

>

HTML5 Canvas & Online Storage 

thumb_animate.jpg

Create HTML5 Canvas

Adobe Animate is a multimedia authoring and computer animation program developed by Adobe.

Animate CC

>

thumb_netlify.jpg

Online Storage

Netlify offers hosting and serverless backend services for static websites. 

Netlify

>

Continue to

Next Post

Thumb_05.jpg
Frame it

Step05