How to make a website for an interior design company: Part 1

You can visit sample website to see the final result or compare your code.

Now it’s very popular to use the services provided by professional interior decorators and designers in order to develop a functional, safe, and aesthetically pleasing space. So, the role of a designer becomes more and more significant. That’s why this time our tutorial will touch upon the problem of creating and customizing a website for an interior design company. The main goal of a designer is to make any object look beautiful. The same should be done with a website as it serves as a company’s trademark and creates a first impression regarding the services it provides.

The present tutorial consists of 2 parts. The first part will teach you how to make a website and perform all necessary customization on the basis of a website template. Its second part concerns the Flash version of the same web template. At the end you will also read our recommendations concerning domain name, hosting provider and website promotion.

Choosing template design

The fastest and easiest way to create a professional looking website (if you are not a web designer, of course) is to take an opportunity of pre-made web templates on the basis of which you will create an attractive website. When you start searching for a site template, you will come upon many web page designs. But as usual, I recommend you to review website templates provided by TemplatedBusiness. It offers high quality design products that can be easily customized to meet your project needs. Here you will find both interior design website templates and interior design Flash templates that correspond to the main web standards and concentrate on the customers’ core requirements both in terms of usability and information.

Well, my choice is 23371. Due to the decent design and elaborate color scheme this website template will definitely work for you. As the interior design industry revolves around creativity and the use of multiple ideas, the orange color, representing creativity and success, fits perfectly. It has very high visibility and will catch your customers’ attention and highlight the most important elements of your design.

After purchase you will find HTML-version and source PSD file of the main page, fonts which are used in the template and some screenshots in the archive.

In case of a low-budget project, you may take advantage of free web templates that will help you solve both problems: time and money. FreeTemplatesOnline.com offers quality free web page designs that can be easily customized and used as a basis for your website.

Template Customization

Now it’s time for the template customization. But if you feel that you don’t have enough knowledge or time to go though the whole customization process, you may take the opportunity to use Template Tuning services. Here you can order the template customization at an affordable price. Their web developers will easily and skillfully do all the necessary changes for you. But if you are not afraid of difficulties, then let’s go on! As it was said above, we will start with the HTML version customization.

To perform all necessary modifications you will need Adobe Photoshop CS+; Adobe Dreamweaver 8+ or any other HTML editor. Before you start you should install necessary fonts (usually they are placed in “sources/fonts” folder- in this tutorial you’ll find more detailed description. After that open .psd file in Photoshop and let’s learn how to make necessary customization.

The first thing we are going to do is to modify the template header and footer. Enter your company name, a tag line instead of the default one.

By default all our website templates are saved without texts. That’s why after making all these changes we need to save all customized elements separately and then replace existing images.

The next step is to rename the menu buttons. The buttons names suit my project well, except the third one. So I decided to change “Collections” to “Design Ideas”.

After all necessary changes are done, you need to cut the customized design elements and resave them. Before cutting the images out, you need to flatten the whole image that is your design. For this you go to “Layers” and choose “Flatten Image”.

Then cut the customized images, copy and paste them to the new document. After that go to File and choose Save for Web & Devices command. Leave the settings as they are because everything has already been done by a coder. Press the Save button to save files to the Image directory replacing the existing ones.

Note please that each menu button has two modes: active (when it is orange) and inactive (when it is grey). That means you need to save the buttons two times when they are active and inactive. Choose .GIF format while saving them.

Let’s customize the other pages. But before going further, you should define first what parts of the website design you need for your project.

About Us

With the help of HTML editor change the text and titles on the About Us page. As always, I prefer to use Dreamweaver. So, tell your customers and visitors about your company and the services you provide.

Let’s see what we got:

The same should be done with the other pages: Design Ideas and Contact Us.

On the Contact Us page write your postal address and customize the contact form. For contact from implementation you need to have some PHP programming skills and while I don’t have them I recommend to order it from TemplateTuning website. They said that it will cost you about $60 – for any type you choose.

That’s it! Your website design is ready to use. But wait, what about the photos? Of course, you may leave it as it is. Or you may create an attractive photo gallery based on Slimbox 2. Just follow the instructions below.

Photos

So I want to offer you a modern and stylish way to show up your photos with the help of Slimbox 2 – JavaScript script that allows you to overlay images on the current page. It’s a snap to setup and works on all modern browsers. Download it from their official site and unpack into your templates folder.

Not you should follow usage instructions to setup Slimbox 2. After that create a folder “photos” and put there your photos in 2 variants – an original size and a smaller copy to show them on the Home page like thumbnails. Then open a file “index.html” in HTML editor and link big images to their thumbnails.

Then you should activate Slimbox 2 by adding rel=”lightbox-interior” code to your links, like here:

<a href=”photo/tfile_gallery_big_pic1.jpg” rel=”lightbox-interior” title=”Interior”><img src=”images/img1.jpg” /></a>

Repeat this step with all your photos you have inserted on this page. If you did all steps right, then your page should look like on this screenshot:

All the photos should open in splash window.

Choosing hosting provider

When choosing the hosting services you should be guided first of all by other people reviews, prices and quality. On this basis I recommend you webhostingbuzz.com

If you experience any troubles with registering a domain name or hosting you can always contact TemplateTuning.com professionals.

Website Promotion

You may find a lot of website promotion services all over the Internet. But probably, one of the most reliable among them is website promotion services from Web Design Library. It offers:

- Search Engines Inclusion

- Website Analysis Report

- Keyword Research Report

- Link Building Campaign

- Link Analysis Report

- Search Engine Optimization Report

- Search Engine Rankings Report.

The quality services provided by Webdesign.org will help you improve your ranking and get an immediate result.

* * *

Congratulations! Now you know how to create an attractive web design for an interior design company. Feel free to ask me any questions. Your comments are always welcome.

You can visit sample website to see the final result or compare your code.

Good luck in your future achievements!

This entry was posted on Wednesday, April 29th, 2009 at 8:20 AM and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.