Complete Websites

Create a Sleek, Corporate Web Design (HD Video Series: Day 2)


In this video series, we're going to walk you through how to create a sleek, professional web design for a corporate website. This is part 3 of a 4 part series - we'll also be finishing the support pages and coding the entire thing in HTML/CSS!

About this Tutorial Series

Adi Purdila is going to walk us through an entire project - from design to coding - all here on Webdesigntuts this week! In Day 1, he showed us how to set the basic framework for the design as well as how to actually lay out the homepage. In Day 2, he'll show us how to create the various support pages (contact, gallery, etc.). In Day 3, he'll be showing us how to convert the entire Photoshop design to a fully working HTML/CSS site.

Here are the links to each of today's final designs:

Let's get started!

Day Two: Creating the Supporting Page Designs

In this next series of videos, Adi is going to walk through the support page designs in Photoshop. Be sure to flip over to HD viewing if you have the bandwidth!

Day Two: Part 1

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes, YouTube or!

Day Two: Part 2

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via YouTube

About the Author

"Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs.

If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest." - Adi

Related Posts
  • Web Design
    Adding a Twitter Timeline to a Tumblr ThemeTumblr 28 retina
    Welcome to this, the first of three bonus videos in our series Tumblr Theming 101. During this lesson we'll look at incorporating a simplified Twitter timeline into our theme; a slightly more complex process since Twitter updated their API to v1.1.Read More…
  • Web Design
    Improving Our Tumblr Theme Navigation and Post NotesTumblr 27 retina
    We've reached the end of our Tumblr theming series! In this video we're going to add some styling to our post notes and the tag page. We'll also be adding some extra CSS which will make navigating the site a little easier.Read More…
  • Web Design
    Adding Localization to Tumblr ThemesTumblr 17 retina
    In this episode of Tumblr Theming 101 we'll complete the CSS for our video post type, which will involve using some principles from Fitvids.js. We'll also look at adding localized theme strings, for multilingual support.Read More…
  • Web Design
    Continuing With Our Tumblr Theme's CSSTumblr 15 retina
    In this part of our Tumblr theming series, we're going to continue with our theme's CSS. We'll be working directly on the live site, as a number of elements won't show up otherwise. Let's dig in!Read More…
  • Web Design
    Styling Our Tumblr ThemeTumblr 13 retina
    Having finished the HTML markup for our theme, it's now time to begin playing with CSS. In this tutorial we'll gather everything we need to start styling; colors, typography details and so on.Read More…
  • Web Design
    Applications and Tools
    Setting Up Gumby With the Claymate Command Line ToolGumby claymate retina
    In this tutorial I'm going to explain how you can use Gumby's Claymate. Claymate is a command line interface tool, which helps simplify a number of tasks relating to installing and maintaining your Gumby projects.Read More…