Documentation

Starters Kit

Barisco Web Designer Starter Kit


Content

Introduction

  • What kind of projects can you make
  • Device specific designs
  • The size of your project

Starting with a blank canvas

  • How to build the pages
  • Free positioning of layers and animation
  • Pop-ups and overlays: adding interaction
  • Scroll and swipe
  • A complete set of pre-programmed interactions

The interface
Barisco library
Some practical information:

  • Fonts
  • JPG, PNG and GIF
  • Video
  • Audio
  • Style settings

Publishing and Hosting
Your account details
Talk to us
Get inspired


Great to welcome you in this starter kit

We will give you a general overview of what you can achieve with barisco web designer. And a brief explanation of the basic features of this software.

Introduction

Barisco web designer is software made for designers by designers. It is our goal with this software to give you complete freedom in web design without coding. Together with you we want to make the web a more creative place. To make this possible, we created this software and make it available to anyone who wants to express themselves creatively without having to write code.
With barisco web designer you create unique HTML5 web designs that are suitable for both desktop, and tablets as well as smartphones. This is includes also iOS and Android devices. So you don’t have to worry whether your work will be properly displayed online. With our software we empower you to be an all platform device and web designer, also for your customers.

Some examples of what you can make:

  • Micro sites
  • Landing Pages
  • Mobile websites
  • E-magazines
  • Online (b2b and b2c) Presentations
  • Brochures
  • E-commerce
  • Content Sliders
  • (Interactive) Infographics
  • Content for social
  • Or  just have some online fun!

All freely designed by you. Including your desired animations and interactions. And all without code. Just to repeat ourselves once more.


Device-specific designs

At barisco, we believe that it’s important to create work which is specifically optimized for different screen sizes. This means that our starting point is not a responsive approach. We feel that the behavior of visitors and user experience ​​on mobile is completely different than for example on desktop. On mobile content needs to be shortened and made accessible in a far more clear way.

multi-screen

We offer a unique solution so you can create different views using only 1 Url so depending on the device you can push the optimized view. It’s not a must to design device specific but it is just one of the many possibilities barisco web designer has to offer.


The size of your project

In edition settings you can choose the size of your project. This will depend on the device you are developing for. We have several preset settings to choose from. For example the option to choose a device and landscape and/or portrait view.

Desktop> Landscape> 1024 x 748 pixels
Tablet> landscape> 1024 x 748 pixels
Tablet> portrait> 748 x 1024 pixels
Mobile> portrait> 320 x 548 pixels
Mobile> landscape> 548 x 320 pixels

The pages in the browser will scale automatically in height to the available space. So you can consider these presets as the best possible sizes.

A full screen desktop view is 1920 x 1080 pixels yet this format you don’t need to use due to the  scaling property of the pages. We have fixed 1024 x 748 pixels as a default setting because it enables you to publish 1:1 to desktop and tablets.  Keeping this size allows you to see if all layers are properly positioned and remain well within the tablet view.

Barico-screen-size-1

baruisco-kb-icon

For edition settings check this Knowledge Base article. http://barisco.com/knowledge-base/improved-group-settings-for-desktop-and-mobile-views-using-one-url/


Starting with a blank canvas

Within barisco start with blank pages. You are no longer limited to pre-designed templates or certain grids within which you must work. You can freely design the pages the way you want.


How do you build pages …?

You start by placing layers on the page. The principle is the same as when you create a design in Photoshop, indesign or illustrator. In addition you can position layers so they are properly displayed on different screen sizes. Moreover you can insert pictures or videos in such a way that they appear full screen in the browser. Or align text depending on the width of the screen.

There are many design features to create a design that uses every pixel of the screen to tell your story.

barisco-video-tutorial

Watch this video tutorial for a detailed explanation: Video Tutorial: http://barisco.com/knowledge-base/video-tutorial-use-position-size-panel/


 Free positioning of layers and animation

All the layers that you add to pages, whether these are shapes, pictures, slideshows, videos, buttons or text can be positioned freely, but you can also animate the layers independently. Either by using the preset animations that are available. Or by using the timeline animation. This offers you the ability to create rich web pages, which can be build or animate any way you want. You can easily and continuously make adjustments.

barisco-video-tutorial

Watch this video tutorial for a detailed explanation: http://barisco.com/knowledge-base/video-tutorial-create-groups/


 Pop-ups and overlays: adding interaction

The possibilities with barisco web designer allow you to make complete and user-oriented designs. Group layers and set specific interactions to create pop-ups or overlays. This feature allows you to create a specific calls to action or display content if requested by the user.  You can integrate this within the same page design so no need for a separate URL request. Basically you can create an optimal experience for the user.

baruisco-kb-icon

Watch this video tutorial on pop-ups and overlays: http://barisco.com/knowledge-base/video-tutorial-create-overlays-pop-ups/


Scroll and swipe

As already mentioned, you are free in the layouts of your pages.  You can choose to create a simple pages or pages with a scroll elements. The scroll component can serve as the base layer of the page. This makes it possible to create vertical scrolling page but also horizontal, or diagonal if you want. Feel free to add multimedia into the scroller component for an even more rich experience.

baruisco-kb-icon
See this Knowledge Base article about dimensional scrolling: http://barisco.com/knowledge-base/new-dimensional-scrolling-features-landing-pages-micro-sites-presentations/

barisco-video-tutorial
Watch this video tutorial on using the UN Scroller.http: //barisco.com/knowledge-base/video-tutorial-use-scroller/


 A full set of pre-programmed interactions

There is to set a comprehensive set of interaction settings accessible at the interaction panel. You can create an interaction on each layer individually or grouped layers. This allows you to set in detail the desired  interaction offered after click or mouse over.

barisco-video-tutorial

Watch this video tutorial for a detailed explanation: http://barisco.com/knowledge-base/video-tutorial-use-interactions/


 The interface

The interface is the environment in which you pages will be displayed, this may be the menu items or general information that you want to make available on each page. The set up allows you to design device specific. And the process  is just as simple as designing your own pages. Again, you are completely free to create the interface you desire.  Position logos, menu items, and social media buttons where ever you like. Or create a visual site map for that matter. Barisco web designer offers number of standard and customizable interfaces to give you a quick start.

barisco-video-tutorial

Watch this video tutorial for a detailed explanation: video 1 and 2. http://barisco.com/knowledge-base/video-tutorial-interfaces-12-using-default-interfaces/


Barisco library

Barisco software is a hosted cloud solution. You therefore need to upload your images and video files in the library of your account. You’ll find this under the Library tab. You can upload several files at the same time or individually. Your files can be managed by creating a folder structure in the library. By selecting content in the library, the formats and sizes of the selected content will be displayed. The standard space of the library is 20 GB. We know from experience this is more than sufficient for 99% of the projects.

tip

Tip: You can also drag images directly from your desktop on to your page. When you do so, the images will be automatically stored in the library.


Some practical information

Fonts!

Barisco web designer has the unique feature to use free fonts. You can simply upload them and  use the font separately or within text fields. This feature allows you to respect brand manuals or to  create original own designs.

JPG, PNG and GIF.
Barisco supports JPG, PNG and GIF files.

Video
Upload your own videos or embed YouTube videos. There is an extensive set of video settings; so you can customize the video player and adjust to the desired IOS settings.
Videos can be uploaded as MP4 files.

Audio
Insert music or sound behind a project or specific pages.

Style settings
There are various style settings are possible on the different layers. Settings like transparencies  or eg drop shadows and glows can be applied.


Publishing and Hosting

The hosting of your work is automatically arranged by your barisco account. For each account,  hosting is included. We have a worldwide network of servers that will distribute your work worldwide. When you publish using a free account, our brand logo is shown in a bar at the top or bottom of your work. At all times you can upgrade to a premium account. In this premium account, no barisco ads will appear and you can also set your own desired URL.
When you use one of our offers such as an agency account or student account, other specifications may apply. In case you have any questions on this subject,  please contact us.


Your account details

Account details can be retrieved in barisco web designer under my account or from the control panel on barisco.com under edit profile.


Talk to us!

Thanks for reading this Starters Kit. If you want to learn more please contact us or sign up for one of our webinars.
You can reach us by:

  • Mail: Contact@barisco.com
  • Ticket support:> Barisco.com> help center

Be inspired!

Visit our community page and see what other designers have created with barisco web designer. Have you seen the design of Berry for the Efteling, one of Europe’s most famous Theme Parks? Moving pictures give an amazing 3D effect. > Linkje> to the corresponding page.

tip

Barisco Community 

We wish you success and most of all lots of creativity and freedom! We are curious with what you’re going to create….