Ask a Question ?
Design & Publish Websites Faster

How to Create a Minimalist Website from Scratch

Getting Started with Minimalist Website Design

Today we’ll be presenting you a step by step tutorial on how to make a minimalist website, also known as modern site design,  from scratch.  Using basic images, text and simple to use applications we can create a functional multi-page minimalist website that is both clean and visually appealing.

We’ll be dividing this tutorial into sections for easy reading, that way, you can always come back into a specific section.  We have also included  video and images for each section, that way every step is documented carefully through out the tutorial.

Sections presented will be the following:

  • The Homepage
  • The Sliding Gallery
  • The Static Gallery
  • How to Use transparency
  • Using Text
  • The About Page
  • The Link Section
  • Creating a Navigation menu

What We Will Be Building

Site's Preview of All Pages

Paul Rand Minimalistic and Clean Website Design

 

This is what your site could look like in the end. Keep in mind this is just a tutorial on how to design a simple website, with Breezi, the possibilities are endless so use your imagination! As a subject we’ll be presenting you with some of the work of famous graphic designer Paul Rand, his contributions to swiss and minimalistic style design have been praised now for decades. The site will be built through several short videos, each section also containing files that were used and tips to follow, feel free to use them!

Creating The Homepage

Home Page

Video Tutorial:

 

This is what we would be building today, under this preview you’ll find the images used for this exercise, feel free to use them, upload your own and play with your site.

Elements used to build this page:

Creating a Minimalist Style Homepage

Let’s start at the very beginning, The Homepage. This page has to summarize your whole website identity and has to be simple and light on the eye, but also catchy and easy to navigate. Also one of the main aspects, if your sites contains more than a few pages or sections; is a  navigation menu, which, thankfully to Breezi, can be done using our Text App or the Navigation App for more options, click on the video, and download the files that were used to create this homepage, you’ll see how easy is to start using Breezi!

This are the steps that we will be completing:

  • Creating a site
  • Installing apps
  • Replacing images
  • Changing font’s style
  • Add background images
Install and app

Open the shelf and drag and drop the apps where you want them to be, you can always move them again!

 

Replace an Image

Replace and image by clicking on it, click the replace button and choose your source, this time we uploaded an image from our computer.

 

Change the Font

Once you install a text app you can always change its style and the font you’re using, click on the drop down menu and take a look at our selection.

 

Select your Text and change it's color

Change the font color also, simply select the text and click on the black square, a color picker will be opened, you can choose one of the presented color, use the slider to change it’s luminosity or place a Hex Code once you’ve clicked on the plus sign to add a custom color

 

Add color to the background

Use the background dot to change the background color, the process is the same used for the font color. This time click on the dot found on the upper left corner and you'll see a modal. Click on the little square to open the color picker

 

Add an image as texture to your background

dd a background image, you can always blend it with the background color. Play with dots, add and remove spacing, borders and shadows.

 

Creating The Sliding Gallery

Corporate Identity

Video Tutorial:


Elements used on this page:

Just because we are                   designing a simple website that does not mean that it has to be static. Using our Slideshow App you can create a moving gallery, perfect for dynamic websites that want the user to enjoy some eye candy while looking at your work.

On this step, we will be using one of Paul Rand’s more important contributions to Graphic Design, that is Corporate Identity, using actual logos he created we will be presenting you with a peculiar moving gallery.

On top of this paragraph you’ll see what we would be building today. Using the Slideshow App to add movement and at the same time dynamic simplicity to our site can be easily achieved. Under this preview you’ll find the images used for this exercise, feel free to use them, upload your own and play with your site.

This are the steps that we will be completing:

  • Removing Sections
  • Splitting Columns
  • Using the Slideshow App
  • Duplicating Apps
  • Add background images
Split Column

Hover over the lines to show more options, split your column in three pieces. Blue feedback indicates area to be splitted and a preview of how the new columns will look like. Don’t worry, you can resize the columns after using the resizer lines by clicking on them, dragging them and dropping them!

Add a Section

Hover over the right resizer line to show more options, add a section, one on top, one on bottom using the little buttons marked with the “+” sign. Blue feedback indicates where the section will show. Sections can always be removed later

Place text

Now you just need to add the text. Place your page title on top of the newly created section, place the menu under this title. Remember to open the shelf that you can find at the bottom of our editor and click on apps, then drag and drop the Text App using the install button. Arrange the text in any way you like, you can always come back and edit it’s style.

Select Line Height and Letter Spacing

Select your text by clicking on the app and double clicking on the paragraph, click on our Line Height and Letter Spacing option, you can find it on the top bar when you edit the text (It’s the little a with the arrows on top and on the side). Use this option and play with your text.

Letter Spacing & line Height

This is how you can manage your text Letter Spacing and Line Height

Font Selection

You can also change your font by using the drop down menu on the top bar. We are using Arvo for the page title and Open Sans for everything else. Take a look at our font selection!

Slideshow App

Now comes the next step. Install the Slideshow App from our App Store by clicking on the tab that says Apps on the bottom Shelf, drag and drop it using the Install New button and place it in the section that was splitted into three columns. The Slideshow App allows us to present images while sliding or fading. You can change the speed and the way the slide by clicking on the Wrench Icon of the App Toolbar. We have to change and insert images, so now we move to the next step.

Image Replacement

Click on the image of the just recently installed app and open the Cropper, hit on the Replace button to replace your image, select your source, this time we’ll use the images we already have on our computer.

Use Full Button

Click on the Use Full button to use the full image, otherwise if you want to keep same proportions of the previous image leave that option untouched.

Adding Entries

We will be adding more entries to the app, do this by hovering over the app and clicking on the New Entry button on the App Toolbar, this will bring a new entry with a new image that we can replace like we just did before. Do this until we have all entries created and replaced, as soon as this is done you’ll see the entries sliding on the editor.

App Duplication

Now that the entries have been added, we have to duplicate this app. You can do this as many times as you need. Hover over tje app and click on the Duplicate App button, this will create a completely identical version of the Slide Show app. Do this four times since we need to use this app 5 times (Check finished version of this page at the beginning)

Site Preview

Since we duplicated this app, the new ones will stay on the same column that the one that they were duplicated was from.

Drag & Drop

We have to move the apps around, do this by hovering the app again and clicking the Drag & Drop Me! button and dragging the app to other columns,drop it on the same section and arrange them any way you want to. Now we need to modify the Slideshow App again on our next step.

replace Images

We are gonna replace our current entries on this duplicated app with our logos. We’ll be using Paul Rand’s logos to complete our page. Create 3 apps each one with two or three different entries. Drag and drop them around until you feel satisfied with the arrangement. you’ll see hwo the page looks much better now.

Preview

This is how our app arrangement looks like. now we need to add some background color and background image.

Background Color

Add some background color by clicking on the bigger Dot on the top Left Corner, this dot controls the options found on our Block. Add some color to it and some light background too. You can choose from our Backgrounds our upload your own. We are done with this page. Click on Preview Mode by pressing the Eye Icon on the shelf at the bottom of the editor and see how your page looks like. See how the sliding effect gives it a dynamic look!

Add a Page

Now, we are gonna use this page to create our next one! Click on the Pages tab at the Shelf on the bottom of the editor and select the option “Add Page”

Page URL

Type in the name of your page, automatically, the page urls matches the name, you can click on it and change it if you want to.

Clone Apps

Our editor automatically asks you if you want to use the same apps you have on this page, meaning, it will clone the page for you using the same apps. Hit done and watch how your page is created. We’ll continue this tutorial on the next step and will show you hwo to create a static clickable gallery!

 

The Static Gallery

Poster Design

Video Tutorial:

Elements used to build this page:

For the next step we’ll be building a static gallery on which images can be expanded when clicked on. This is perfect if you want to present your or someone’s work in an aesthetic way without compromising image sizes.

We will be using our Image Gallery App. On this app,  when thumbnails are clicked the  actual images pop up and show as large as the original file or as the screen allows them to, you can include a caption and some info about the image and even links.

We will be using Paul Rand’s posters designs which were a trend setter for the Swiss Style Design and showed how abstraction can be used to represent a meaningful idea. Check the video and see how we use the same app in three instances and how you can show great HQ Pictures without compromising size and space within your web page.

This are the steps that we will be completing:

  • Eliminating sections
  • Replacing and styling text
  • Replacing Images
  • Resizing Thumbnails
  • Adding captions
  • Adding backgrounds
Remove Section

Now that we just created a page from our previous one, we have to remove everything we don't need, we start by removing the previous section where our Slideshow Apps are contained.

 

Duplicate Apps

We can still use some of the apps, but we have to duplicate them (Since changing any content of the current apps will change it on other pages also). We duplicate the apps the same way it was done before.

Preview

This is how it will look once apps are duplicated. Eliminate the apps by clicking on the X at the right side of the App Toolbar, make sure to remove the top ones since those are the original ones (We reinstate the importance of this, since changing any content will also modify other pages).

Preview 2

This is how it will look like after removing the apps.

Replace Text

Now replace the text for the correct one.

Image Gallery App

Now let’s start building this page. Open up your App Store using the Shelf and Drag & Drop the Image Gallery.

Initial Look

This is how the gallery will look at the beginning. f course is our job to style it. Remember, with Breezi, you control every pixel.

Replace Entries

Now replace each one of the entries with one of the images we have provided, remember to click the image to open up the Cropper, click on the Replace button and select the source.

Add a section

This is how it will look like now that images are replaced. Next step is to manipulate the section where the App is at so we can center it, for that, we need to create a section for it’s own. Hover over the resizer line at the right and click on the Add Section button (That’s the one with the “+” sign).

Split Column

We have to relocate the app to that new section, we do that by using the Drag & Drop Me! control found on the App Toolbar, once thats done, we have to splict the section into three diferent columns, do this by again hovering over the left border line and clicking on the Split Column button. Do this again with the new column and you’ll have three columns now, place your app on the middle one.

Split Column 2

On this still you see how the newly created column is also split by using the previous process.

Resize Column

Once the app is in the middle, we’ll manage the reziser lines (Caught inside our red frame on this still). Click on them, drag and drop them. Our editor will tell you the size of each column, make sure both the right and left columns are the same size so our middle column and ergo our app are centered.

Resize Entries

It’s time to work on the app itself. We’ll resize the thumbnails by hovering over one of them. Once that done a green overlay and feedback will come up over the image and you’ll see a grey corner on the bottom of the image, click on it and play with it, you’ll see how the size of the thumbnail changes. Once you are content with it’s size, release your mouse click and you’ll see the other thumbnails resizing as well.

Final Result

This is our final result for the thumbnail size for our Image Gallery. Make sure all three thumbnails fit on it’s column. If more entries are added a pagination arrow will be added too.

Add borders

Hover over the first thumbnail and lcik on it’s dot. This way you can manage the thumbnail’s style. We willll be adding borders but you can play with the options for a while before deciding. Once you are on borders, click on the Link Icon, that way, any change done to the color of one border will change the others too.

Duplicate App

Once the app its styled, we have to duplicate it. Click on the 2x Icon on the App Toolbar, do this twice, automatically you will have two more extra galleries identical to the first one.

Preview

This is how it will look like now that apps are duplicated, next step will be to replace current images with new ones.

Prevew

Once images are replaced, the gallery will be almost complete.

Add background

Add a background using the Upper left corner dot

External Action

The next step is to edit our image’s caption. Click and hold your mouse over one of the thumbnails to activate it’s external function, this will open up the actuall image and the Gallery View.

Caption

This is how the Gallery view looks like. Click on the cation at the bottom of the image to change it. This is what the user will see once they click on each one of the thumbnails.

 

Using Transparency

Books

 

Video Tutorial:


Elements used on this page:

On this video we will be presenting Paul Rand’s work as a book cover illustrator. This time we will be showing the importance of transparency and how this can be used to present objects that include transparency and shadow.

This will be a fairly easy step and we will tell you how to use our Dots to color containers in order to add importance to text. See the next video and find out how transparency works with Breezi!

This are the steps that we will be completing:

  • Removing Sections
  • Adding Images
  • Using Image App
  • Taking Advantage of Transparency
  • Add background images
Create a page

We’ll start as before, creating a new page using the old or current one, place the name of your page and your url

Remove Section

Remove the section we used to place our Image Gallery

Duplicated

Duplicate each one of the apps and then remove the original ones, that way any modification done won’t affect the other pages

Preview

This is how it will look like after original apps are removed, now you can replace current content with the correct one for that page.

Add a section

We’ll need to add a section on top of the bottom one, do this by hovering over the righ border line and clicking on the Add Section button, we’ll use this to insert some images later.

Install Image app

Open up the App Store on the Shelf at the bottom of the editor and install an Image App on the first column of the newest section, replace the image as we’ve done before with a transparent PNG file (Click here for more info on Transparent PNG files).

Transparency

This is how a transparent PNG file will look like, letting the background image go through it and show.

Duplicate Apps

Duplicate the image app by using the 2X button found on the App Toolbar, we need 3 Image Apps

Arrange Apps

Now arrange each one of the apps on each one of the columns, do this by using the Drag and Drop button on the App Toolbar

Insert Text App

Next step is to use the Text App, open up the App Store by clicking on the Apps tab at the Shelf on the bottom of the editor and drag and drop the app using the Install New button. Drop it under the first image from right to left.

Use dot

Use the box dot to add color and style to the app itself

Style app

Replace the default text and style the app. Click on the App Dot and change its color, select different options until you feel satisfied with the result, then, duplicate this app twice.

Move apps

Move the duplicated apps to each one of the columns and change its text, style should be the same, you can always change it by opening up the App Dot.

Background

It’s time to add a background to our page. Simple but properly designed backgrounds can help our site look better. Use the image given on the resources section or upload your own. See how the whole page changes once a proper background is used. Add a background by using the Block Dot found on the Left Upper Corner of your editor, play with background colors and blend the background image with previously selected tone by blending them.

Text Grid

Quotes

 

Video Tutorial:


Elements used on this page are:

Sometimes, and in this case it does apply, less is more. If you want to showcase a large piece of text on your website and have no idea how, there is something that you can do. Using simple text with a few modifications arranged in a grid gives the feeling of order and simplicity, and can help you categorize text without the use of images and external features.

This time we will use the Text App, changing font size and style will aid you into understanding more the importance of font as a main aspect of website design. Try from our wide selection of fonts and experiment with sizes and styles.

Here on Breezi What You See It’s What You Get (WYSIWYG), meaning, editing your text trough Breezi avoids abstraction and shows you the text exactly as it will look on your actual website. Click on the video player to see the process and how something so simple can still work pretty well on a webpage!

This are the steps that we will be completing:

  • Removing and Adding Sections
  • Adding and arranging Apps
  • How to add borders
  • Bulk Editing
  • Text Editing
New Page

Create a new page using the previous one

Eliminate Apps

Start eliminating the apps on the columns by clicking on the X on the App Toolbar

Duplicate

Duplicate apps that you need it’s text to change in order for the original ones not to be affected when edited

Reorder section

Reorder previous section, you need to have one section with one column on top of the others

Add sections

Add two other sections, we need to need to create a grid that has 3 sections each one with three columns

Split Columns

Split each one of the section into three equally sized columns, do this by using the Split Column Button

Install the text app

Install a new Text App from the App Store. Open the App Store by clickin on the Apps Tab on the Shelf ich you can find at the bottom of the editor.

Settings

Edit the current app with this settings. Do this by clicking on it’s dot and playing with the sliders. You can also enter numeric values.

10 versions

Duplicate the app until you have 10 different versions, place each one on when of the columns from the grid we created and another one on the section on top of the grid that has one column only.

Replace Text

Replace the text with the proper one on each app, this is how your grid should look like by now.

Bulk Style Editor

In order to style all the apps at the same time, you can click on the Styles Tab on the Shelf, click on the Text Tab on the Styles Modal that just popped up, any modification will change the text on all the apps of this page at the same time (As long as the Merge Selected Block Control options is checked). We are changing all the fonts to Open Sans.

Site Preview

In order for us to have a better perspective on how the site will look like, we can change the background already. As we have mentioned before, change the background color and the background image by using the Background Dot on the upper left corner. We do this before we continue to have a better view of how our site will look at the end.

Add borders

Now we add borders to our sections, we’ll do this to the first and last section of the grid, and will only do the top and bottom ones. Do this by clicking on the section dot and marking the check box for borders, uncheck the ones for left and right and change its color. Take a look at our video for further explanation.

Preview

This is how our site will look like now that we have added borders, the next step and last of this page is tetx styling.

 

Final

We have changed the size of some fo the text, using different font sizes and bold on some places. Play with the options until you feel satisfied. On the next section we’ll create a page that even tough has a lot of elements it feels cohesive thanks to the use of color!

About Page

About Page

 

Video Tutorial:

Elements used on this page:

Now we are onto the final pages, and one of the most important ones, your About page.  On this one you can write a lot of information and let users know who are you or who runs the website.

This may be one of the tricky ones since showcasing lots of information can eliminate the minimalistic factor. But no worries, there are still ways of showing a lot of elements on your page without seeming like everything does not add up. If there are a lot of different apps and elements you want to use, you just have to think about making it cohesive.

If elements are not that much related to each other or you find that most of them are different you just have to find the way to make them similar.

One of the easiest ways will be to use color. In this case we’ll use grey and red, grey will allow us to set a formal tone to our page, and with red we add an notoriety of certain aspects of the website. On this video you will see how to arrange this elements in a symmetrical way as possible, that way giving the user a vision of order and unity. Check the video now!

This are the steps that we will be completing:

  • Removing and Adding Sections
  • Adding and arranging Apps
  • How to Insert Videos
  • Text Editing
  • Image Resizing
New Page

Start by creating a new page using the one we had before.

Eliminate Apps

Eliminate Apps

Remove Borders

Eliminate all apps from the quotes section but do not eliminate the sections themselves, wel will need them in just a minute. Also, open dots for the sections and remove previous borders if you want to. check the video for further info.

Install an Image App

Use the image app and install two of them, one on the top section where one of the text apps used to be and another one on one of the columns of our previous grid.

Apps Installed

This is how it should look like, you’ll see next how we modify this apps on our advantage.

Replace images

Replace each one of the images with images provided on the resources section. Duplicate the image on the gri, will need two of these.

Move apps

Once app is duplicated, move each one of the new versions into its own column.

First Look

This is how your site has to look so far. As you see the three images are the same, so we must replace them later, but first, we have to change the background to something that resembles more to the images that we are using. Remember that we are not using many colors in this one.

Replace Background

Open up your background and change its color and replace your background image. Use your own images or the ones we have provided for you. For this website we are using mainly grey with a few touches of red.

Merge Columns

We need to modify the second section of the grid. Now we are gonna mege its columns into one using the Merge Columns button you can find while hovering over it’s resizer lines.

Site Preview

This is how the site has to look like so far. If you notice, using mainly grey with a few touches of red gives it a more cohesive look. Its time to color some containers.

Duplicate

We need to have oen of these apps on each column of this section of the grid. Use the Duplicate App button twice. Then we’ll need to re arrange those apps into the other columns.

Drag and Drop

Use the Drag & Drop Me! button to re arrange them. Drop each on of them into its column.

Preview

This is how our site looks like until now.

Replace URL

Now we need to replace our placeholder videos with actual url. Click on the video itself and a little modal will come up, replace the url with the one you want to use and click save.

Videos

This is how the site looks like now with the three videos placed.

Text Apps

Now just add a text app under each one of the videos with some explanation. Do this by installing the apps like we’ve done before.

Final

Style the page and you’ll see how everything looks much better now.

 

Links

Links Page

Video Tutorial

Elements used on this page:

This is the final step, if you’ve come so far, there’s no need to give up, you just went through the main and basics and this is just one more page to complete your site.

Links and information to other sites is pretty helpful, so its necessary to have this on your page. Include links to stuff you like, information that is pertinent to your website and anything you like. In this case we are using the Text App since it allows us to modify text as we see it and we can change it pretty quickly.

Use color that are similar to your actual page and add explanation to where the link is taking you. We recommend you to make those links pop up in a new window or tab, that way the user can always come back to your site and keep exploring.

 We’ll be learning to:

  • Set up Links
  • Use color and Rollover Colors
  • Add Backgrounds

 

New Page

Create a new page using the one we previously had.

Eliminate apps and sections

Eliminate all sections but one. Eliminate all apps also.

Insert a text app

Insert a text app in the remaining section, it must have one column only. Place the links and the desription of the links that you want to have on this site.

Insert a text app

Insert a text app in the remaining section, it must have one column only. Place the links and the desription of the links that you want to have on this site.

Background change

We’ll change the background before actually doing any linking.

Text style

Style the text so its more noticeable.

Select text

Select the text that you want to link. Click on the Chain Icon, a new modal will pop up for you to add the url.

Place URL

Place your URL into the field, select New Window and hit save.

Colors

Once text is linked, you need to style it, select the link again and click on the color picker, This time around instead of one option you’l have two. one for the regular color and the second one for the Rollover Color. This color will show once your mouse hovers over the link itself, do the same with the other links.

Style the text

Style your text. Choose color that are really visible to the user and gve a smoother color to the description of the link!

 

Navigation Menu

This is not a specific page but rather a specific element of a web page. A navigation menu that shows on all pages is necessary. Using the Text App and Links we’ll see how to add a simple but useful Navigation menu.

We’ll learn how to:

  • Add Links
  • Select Color and Rollover Color
  • Open Links on a New Page
Text App

We will create the menu using the text apps that we have previous ly placed before.

Basic Color

Select the whole text before any linking and add basic color.

Link Icon

Select the text that is going to be linked and click on the Link Icon

Process

Select the tab My Pages and link it to the proper page by using the drop down menu on the Page section, use the Same Window setting for this.

Red Link

Automatically the text turns red after hitting save. This is now a link.

Colors

Clicking on the color picker will bring a color selection. We can choose Default Color (How the Link will show) and Rollover Color (How it will show once mouse hovers over it)

Tooltip

Rolling over the link after clicking on the app will show a tooltip with link information, from here you can edit the link or de-link the text.

Url

You can always add a URL instead of an actual page from your website and use a New Window or a Same Window setting!

 

All Paul Rand Images and Logos are used for non-commercial purposes.

Image sources:

http://stocklogos.com/topic/paul-rands-logos

http://www.paul-rand.com/foundation/portraits

 

 

Menu