Tips For Designing A Website

by | Dec 3, 2017

To give you an idea of how to go about designing a website I am including some screenshots from a sample website to show how it changed and grew over time.  For this example I have chosen the Persson Technologies website.  These glimpses into a bygone era are brought to you by the WayBack Machine (https://archive.org/web/).

 

Humble Beginnings

These first two screenshots are the humble beginnings.  I just threw something together to get some content out there.  I picked a free theme at random.  It is pretty basic, just some text with no graphics. 

01-2016-07-30 - home page - beginnings
02-2016-07-30 - about us page - beginnings

Converting to Divi

These next two screenshots are from when I first converted the website to the Divi theme.  You can see that it is beginning to look more “real” with some Divi goodness and graphics.  I do enjoy using gradients in the menu and footer bars but the footer bar looks like a Technicolor nightmare.   On the “About Us” page you can see our first rather plain sidebar.  At this point in time we didn’t have any blog articles on the website.

04-2016-10-31 - home page with Divi
03-2016-10-31 - about us page with Divi

The Next Steps

In the version below I had added the sidebar with a different background to make it stand out.  Concerning the slide show on the top of the page it originally contained samples of websites I found on the web that showcased what I could create for my customers.  However, I discovered the images were not licensed for commercial use so I had to remove them.  It is important to only include graphics on your website that you have purchased, have created yourself, or are licensed for commercial use. Therefore for the slide show I used websites I had created.  I also added a gradient to the sides of the pages. 

05-2017-07-04 - home page with slideshow

A Few Problems…

There were a number of things wrong with this design:

  1. The slide show at the top of the page with the four themes didn’t make any sense.  There was no explanation as to what they were or why they were there.  Also the files were PNG files and slowed down the loading of the home page. (The screenshots of those websites are now in this article if you want to view them.)
  2. The gradient on the sides of the pages was a background PNG file – this also slowed down the loading of the home page.  (Remember, you never get another chance to make a good first impression!)
  3. On all pages when the scroll bar was used the Persson Technologies company logo would scroll right off the screen.  It would be better for the company logo to always be visible.
  4. When displaying blog articles the company logo never appeared on the page.

Using A Color Palette

Shown below are some pages from our current design.  In the previous designs I was just guessing at colors (not a good idea).  Now using the blue in the company logo as a starting point I have standardized on a color palette.  This is important for any website design!  You can see how I have used these colors as a guide to re-design the home page.  The menu on the top is a variation of the SUMMER SKY color.  For the background of the sidebar I am using a shade of the BREEZE color.  The rounded red borders around objects are the WARM PEACH color.  Finally, the left and right gradients on the pages are based on the FIELD color.

05-5000 - New Color guide
06-New Home Page

In the first screenshot below you can see what happens when we scroll down the page.  The company logo becomes smaller but never disappears (and this is the same in blog articles).  I have changed all the blog articles so they have a background color that is based on FIELD. (Update – I later abandoned that color because light tan refused to display correctly on built-in laptop screens for some strange reason.)

08- Company logo on Scroll down
07-Blog Pages

Here are a few websites that contain possible color palettes:

https://www.canva.com/learn/brand-color-palette/

https://www.canva.com/learn/website-color-schemes/

http://blog.visme.co/website-color-schemes/

Here is an article that covers more details regarding how to choose a color palette:  https://websitesetup.org/website-color-schemes/

Keep in mind that all of these parameters can change over time – nothing is set in stone!  Designing a website should not be viewed as a destination but instead a journey.  Persson Technologies can work with you to mix and match and move things around.  To illustrate this fact while writing this article I made a clone of our website, chose a new color palette based on the yellow in our company logo, and re-designed the home page just to see how it would appear.  I am including the new color palette and the re-designed home page below.

09-New Palette at end of article
10-New Homepage at end of article

In Conclusion

I hope this article provides more insight into the steps one might take in designing a website over time.  The first design you create will never be the last!  As you view other websites and discover features you want to incorporate into yours, don’t hesitate to contact Persson Technologies so we can make your vision a reality.