Create a Minimalist Website Design using Slides Framework


Hey everyone today I will show you how
to create a minimal style website using slides framework in this video I will
explain how to work with the slides app how to use the manual how to use the
examples and how to edit the code in less than 30 minutes we’ll create a cool
website with good design and animation start by opening the slides app here I
will start to build my website by choosing from designs and effects the
first thing I will do is switch the background option to white because I
want a minimalistic website and don’t need background images and effects I
choose the desired slides one by one I’m trying to choose different types of
slides to show you how to work with each of them free animation I will select the
chain effect I think this effect is perfect for my
website style I will ignore the menus and navigation and will leave the
default style of the website because it is perfect for what I want to build
let’s see the preview of the actual template to be sure I have finished the
slide selection and I can export them to my local computer okay the animations look good and all
the selected slides are here but I think I will make changes to the slides order
and we’ll swap one slide with another one I want to remove slide 82 for this I
open the selected slide and remove it and I will select another one slide 87 the order of slides is not good now and
I will change the slide location by dragging and dropping them right in the
slides app let’s preview the result this is better because the slides are ordered
logically and I can make additional changes to the order later now let’s go back and export the
template to my local computer find the downloaded zip file and export it right
here all files are located in this folder here are the first step files
manual files CSS HTML files and more open the index.html file in your
favorite code editor you can see the code is well organized open index.html
in a browser this is our website with all the selected slides and effects website images are located in the assets
folder so let’s start to customize our template I will open the first slide
image in Photoshop and change this image with another one in this tutorial I will use the images
and text from one of the projects from Kickstarter called new row take a look
at this minimal watch it’s very cool ok let’s start with template customization
I have saved a few images from new row watch I will copy these images to
Photoshop and adjust it to the size of the previous image refresh the page and
here’s the new image I will remove this play button because I don’t need the
video function for this image in the code I will remove the part of the code
related to Vimeo and the video thumbnail class refresh the page and it’s just
what I want to see now I want to remove the link to the image also go back to
the code editor and remove these classes the result is good let’s change the text
on the page I can copy/paste the text because I have prepared it from the new
row watch campaign the result is good but I want to fix the
description because the word yet is orphan and is not good so let’s remove
it now it is perfect let’s go to the next
slide I will change this image and remove the open effect open the image in
the same way in Photoshop remember you can change images how you want I just
show my workflow here you might do this another way drag-and-drop the new image and adjust
it to the size save the image let’s see ok I don’t like how the watches are
positioned I will adjust this in Photoshop yes now is better next I want
to remove this effect open the code editor and let’s see where to change the
code here is the data action and I will remove the zoom effect and Link refresh
the page good this is what I want now I will change the text and move forward
the video in order to not lose the time for these simple and repetitive changes now in the same way refresh the page and
check the changes good for the next slide I prepared something new I will
use a Jif image instead of a static image for this I will copy and paste the
prepared jiff image to IMG folder let’s rename it and open the code editor here
we’ll change the file extension to jiff remove the video thumbnail code save the
file and check the result I think the image is too big so I will remove the
shadow back to code editor and remove the rounded shadow and paste the height
and width of the jiff image right here I will make the image smaller refresh the
page the results is not very good it seems we should remove a style open the
code editor and here we’ll remove the wide class and also I will change the
height and width size to 500 pixels change the text of this slide and
refresh the page to check the final results yes now this is good let’s move
on to the next slide okay for this slide I will use the
slides manual because I want to use a background image here open the code
editor remove the code from Vimeo from the previous slide and change the text
on slide 4 in this slide I will use the information about the red dot design
award because this watch was awarded in 2010 for the best concept I need a
background image here open the slides manual find the background section and
copy this part of the code open the code editor and paste it before the section
now copy and paste the background image to background folder located in IMG
folder change the name of the image directly in the code and save I will
refresh the page and check the result the page looks good the background has a
perfect fit for the typography colors and grid
scroll down to see the next slide in this slide will change the text and
icons and you will learn how to change icons without image editing open the
code editor and edit all the text I will move forward because it’s a repetitive
part of our tutorial save the file to see the live result the text is changed
and fits well now for the most interesting part how to change the icons
for this purpose I will use the manual open the manual and scroll to material
icons you’ll find detailed information about how to use the material icons and
slides open the material icons website which includes all the icons supported
by slides each icon has a name so we’ll use this name to change icons on our
slide I have selected a few names of icons and I will change them directly in
the code material icons have a dedicated class so it’s easy to find them
just change the name with your desired icon name refresh the page to see the
new icons in this style you can change any icon you want more details are
available in our documentation page scroll down for next slide in this slide
I will change the video and thumbnail open the code editor and find the code I
will change the text and remove the blue button to change the video you need to
copy and paste the ID of the video from Vimeo insert the ID here and that’s it
we have changed the video next I will change the thumbnail do this in the same
way as before open the image in Photoshop resize it to fit the previous
image and save the file go back to the browser and refresh the page to check
the changed file here it is let’s play the video very good
in the next slide we’ll create a small gallery with three images open the code
editor and start making the changes first I will edit the text and remove
the unnecessary part of the content from our design also I will remove the second
row of images open the folder with images and remove
the unnecessary images now it’s time to change the existing three images and
insert ours there I will use the same editing process in Photoshop as we have
previously used I will move forward the video because the process is exactly the
same as before you save all the changes and open the
browser to check the images are here I think the gallery looks good it all
works well now let’s go to the next slide here I want to mention the
creators of this watch I open the code editor and remove this text and change
the next one also I want to add a background image
for this I copy the same code as before and I change the title of the image save
the document and refresh the browser here is the result it looks good but I
will change the font to bold for this open the code editor and add the class
bolt let’s see the results great you can leave the default style of
the font if you like our website is almost ready but I want to add a slide
with a video background I want to create a spectacular intro to my website
because now it’s a little bit static this slide will be the first open the
slides app and in the footer of the page you will find examples click here copy
and use the ready-made code for different services tools or a new
functionality for your website I will use the Vimeo background for this
example here is a preview go back and copy the HTML code or you
can download it I have copied it and will paste to our code before the first
slide here is the step by step instruction on how to use this example
and integrate it on your website first we have to add this script to the head
section of our code just cut the code and paste a head second insert this code custom Dutch es
file copy the code and open the custom das file located in J’s folder and the
last step is to cut this CSS code and put it to the custom CSS file located in
CSS folder okay clean the unused code now and let’s change the text and video
in this example open your video on Vimeo and copy the ID of the video now paste
it right here in the code and change the remaining text to the name of the watch
in description save the file open the browser and refresh the website the
first slide is here and is attractive with a nice video background in a short
description of what about this website is about I want one more small change I
will make the title of the watch bolt for this I have to change the class of
font the light parameter to be bold refresh the website I think it’s better
now after watching this video you should be
ready to use slides to create a website fast for an advanced customization just
use our detailed documentation page and ready-made examples which will help you
integrate different services and options into your website I hope you enjoyed
this video see you again soon

2 Comments

Add a Comment

Your email address will not be published. Required fields are marked *