How to design a corporate/business layout?

Last Monday we published an article which analyzes different styles existing within web design, highlights what the “corporate/business” style is anddiscusses what the main characteristics are. As we have promised, today we will design a great Photoshop layout for a corporate website, one that is elegant, clean and simple to develop.

download
Versione: 1.0
Pubblicato: 09 March 2010
Dimensione: 184 kB
Download: YourInspirationCorporate

Let’s open a new document with size 1680px, and 72 dpi resolution, also setting the two lateral margin guides to 360px. Inside the central section, set to 960px, we will insert all the site content which needs to be seen by a user regardless of the type of monitor (resolution) he or she is using.

As such, even if the site will be developed using a dimesion to 1680px (so that it looks great even on a 21′ widescreen monitor)- we will limit the main content to a dimension of 960px. So, even for low-resolution monitors, the site will visualize correctly, without having the need to scroll left and right on the browser page.

Let’s open the 960 grid system framework that you can download from this site. In this case we will be using a 12 column template. If you want to learn how to use this framework, I advise you to read Nando’s article on the subject.

Insert the template in the file we are using and position it in the central section of the page, while leaving exactly 10px of margin on either side. It’s best to block the group (clicking on the key icon) so that columns are not moved by mistake.

Start creating a layout for this web page: with the rectangle tool draw a horizontal bar that is 148px high and 1680px wide. We will place this at the top of our document. Then let’s assign a linear shading which goes from a dark to a lighter shade of grey, as you can see in the following screenshot:

Let’s also add a shadowing of light intensity:

Insert the logo of our Company (Your Inspiration Web is momentarily transformed into a financial company, Your Inspiration Corporate) and draw, with the rectangle tool, another section (40px in height) that we will place under the logo and will serve as the background for the navigation menu.

Let’s assign a linear shading to this rectangle with the following settings:

The result is as follows:

Let’s create the central section of our layout. Using the rectangle tool, let’s draw a section (286px in height) to which we will assign a blue shading with a radial effect so that glare can be created in the section where we will place an image representing the company.

Blue is not chosen randomly: we have already mentioned that blue and green are the some of the best colors to use in a business-type layout because they can instill, on an unconscious level, a sense of security and corporate stability. Furthermore, since we are representing a financial services company it’s preferable to avoid using colors that are too hot or lively. Red should be one of the first colors to avoid, since it’s a color associated with danger and alarm.

The layout is starting to take shape:

In order to properly represent this company, we will insert a series of images of people that have a professional and positive aspect to them. This will instill a sense of familiarity and security to the various visitors of the site.

Choose a free image from sxc.hu , unfortunately this image has a white background. In order to add it to our blue header, we will have to eliminate the background of the image. To do this we could use the magic wand tool but the results obtained using this method are not ideal. The pen tool provides more precision but it is certainly more painstaking, due to its manual quality.

In this case it’s preferable to use the “Extract” filter (menu Filters >> Extract) which will allow you to edit the image with less effort.

How to use the “Extract” filter

Using this filter is not difficult and you can start getting some good results after a couple of tries. To begin with, it’s best to increase the zoom so that you will be able to select an area with greater precision. To do this, all you have to do is click on the magnifying glass icon on the left-hand bar, then press CTRL and then click with the mouse. Let’s make the brush smaller (by default it is set to size 20, which is too big for detailed images) and start highlighting as accurately as possible the borders of our “promoter”.

If you’re not satisfied with the curve or you’ve made some mistakes, you can always go back (CTRL +Z) or use the eraser tool to delete the borders. Once you have highlighted the entire area, click the bucket tool to fill-in the selected image. You should end up with something that looks like this:

Clicking on ‘okay’, everything that is outside of the red area will be automatically deleted and we will have the image resting on a transparent background.

What’s the final result?

Let’s insert this image in the blue section, after having adjusted its dimensions and after having eliminated a small part of it.

Next to our promoters we will insert a brief description which will provide instant visual information to our site visitors. This can be either a short slogan, a welcome message or anything else that can properly welcome visitors and inform them about who we are.

Let’s add our website’s navigation menu, which will have to be simple and intuitive, and without too many adornments:

To evoke the company’s brand, we will add a transparent section of the logo near the slogan. This is so that our brand is pointed out and the graphics of this central section are enhanced.

The layout is taking shape and it’s looking great, don’t you think? At this point, we will have to create 3 sections on each of the services we offer: accounts, loans and mortgages.

Using the grid, let’s divide the layout into three sections of equal size (300px). Then we can go ahead and personalize each section inserting three representative images:

Under the images, we will add a description of the services offered. In this step, font typography will play a very important role so use bold font to highlight important concepts and keywords in the description. Also, you should divide links by color so that the text can be read with less difficulty.

The addition of a simple footer will complete the layout of Your Inspiration Corporate. Let’s look at it together now!

Conclusion

After having looked at what makes a good “corporate style” website, we have been able to create a simple and professional layout for a corporate website using just a few steps. The resulting website has a nice look to it and at the same time it is quite functional.

download
Versione: 1.0
Pubblicato: 09 March 2010
Dimensione: 184 kB
Download: YourInspirationCorporate

Don’t miss out next week’s article (and the tutorial on how to design a layout) on grunge style within web design!

Other articles in our guide:

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: , , ,

The Author

Web designer, has been working in the field of graphics and web development for six years and at the moment besides collaborating with a web agency successfully manages her freelance activity under the name of mascara design. Like many freelancers she is used to handling more roles, ranging from paper graphics to the development of html and css codes; nonetheless this passion of hers remains, always and however, web graphics.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

37 comments

  1. MadrEus
  2. logo
  3. Jorn
  4. Tom
  5. Nathan

Trackback e pingback

  1. How to design a corporate/business layout? | Your Inspiration Web » O Empreendedor Neófito
    [...] Excerpt from: How to design a corporate/business layout? | Your Inspiration Web [...]
  2. Styles in webdesign: the features of corporate/business layout | Your Inspiration Web
    [...] in webdesign: the features of corporate/business layout | How to create a corporate style website? …
  3. How to design a corporate/business layout? | Your Inspiration Web | Apex Designs
    [...] View original post here: How to design a corporate/business layout? | Your Inspiration Web [...]
  4. How to design a corporate/business layout? | Your Inspiration Web | Drakz Free Online Service
    [...] the rest here: How to design a corporate/business layout? | Your Inspiration Web Share and [...]
  5. Styles in webdesign: the features of a grunge layout | Your Inspiration Web
    [...] that we have looked at the characteristics of the corporate style and created a layout in Photoshop, today we will …
  6. Styles in webdesign: the features of a web 2.0 layout | Your Inspiration Web
    [...] Styles in webdesign: the features of corporate/business layout | How to create a corporate style website? [...]
  7. 60 Web Design Photoshop Layout Tutorials From 2010 | pro2go Designs Blog
    [...] 51. Design a Corporate Business Layout [...]
  8. Graphic Design Services. Dani Raykova. Portfolio: Print & Web Design. Metro Detroit, Michigan » CSS Tutorials
    [...] Web Design Layouts 35 Tutorials for Creating Website Layouts in Photoshop How To Design a Corporate/Business Layout? Web …
  9. 60 Web Design Photoshop Layout Tutorials From 2010 - Programming Blog
    [...] 51. Design a Corporate Business Layout [...]
  10. How to design a web 2.0 layout? tutorial and psd | Your Inspiration Web
    [...] at the features and trends of the web 2.0 style, today we will draw up a third layout. After …
  11. 60 Web Design Photoshop Layout Tutorials From 2010 — The Trending Monster Info
    [...] 51. Design a Corporate Business Layout [...]
  12. 60 bài hướng dẫn thiết kế weblayout cực hay « Vietxitin's Blog
    [...] 51. Design a Corporate Business Layout [...]
  13. 60 Web Design Photoshop Layout Tutorials « moemir
    [...] 51. Design a Corporate Business Layout [...]
  14. 60 Web Design Photoshop Layout Tutorial |
    [...] 51. Design a Corporate Business Layout [...]
  15. The features of the vintage style | Your Inspiration Web
    [...] Styles in webdesign: the features of corporate/business layout | How to create a corporate style website? [...]
  16. How to create an amazing grunge layout | Your Inspiration Web
    [...] Styles in webdesign: the features of corporate/business layout | How to create a corporate style website? [...]
  17. From PSD to XHTML: How cut a layout with Photoshop? | Your Inspiration Web
    [...] see in the next few techniques to export and create the simplest possible way an entire layout, or “Your …
  18. From Psd to Xhtml: how to transform the layout in XHTML+CSS? | Your Inspiration Web
    [...] to export, using the instrument “sections” of Photoshop, the vary components of our layout “YIW Corporate“. Today “you’ll dirty …
  19. How to design a layout in magazine style? tutorial and psd | Your Inspiration Web
    [...] Styles in webdesign: the features of corporate/business layout | How to create a corporate style website? [...]
  20. How to convert an XHTML layout in a Joomla template? | Your Inspiration Web
    [...] will use the layout corporate / business created by Sara and resumed later also by Justin in an article that explains how …
  21. The styles in the web design: the features of the organic style | Your Inspiration Web
    [...] Styles in webdesign: the features of corporate/business layout | How to create a corporate style website? [...]
  22. 10 Easy Web Design Tutorials for Your Business | 2Designers
    [...] 8. Design a Corporate Business Layout [...]
  23. TUT: From PSD to XHTML: How cut a layout with Photoshop? | mmc blog
    [...] see in the next few techniques to export and create the simplest possible way an entire layout, or “Your Inspiration …
  24. Photoshop to create the mainstream corporate website design _ classical case of 60 Web Page Design | Web Page Design Templates | Html5 Template
    [...] 51. Design a Corporate Business Layout [...]
  25. 40+ fantastic Web Interface Design Photoshop Tutorials, | Web Designer Blog – Webdesigner Place
    [...] 19. Design a you new Corporate Business Layout [...]
  26. 60 Web Design Photoshop Layout Tutorials From 2010
    […] 51. Design a Corporate Business Layout […]

Leave a Reply

Current day month ye@r *