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

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

on Apr 12th 2011 with 31 comments
Tutorial Details
  • Program: Adobe Photoshop
  • Version: CS5+
  • Estimated Time: 1 hour

Final Product What You'll Be Creating

Download Source Files
This entry is part 2 of 4 in the series Sleek, Corporate Web Design

Sleek, Corporate Web Design

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 blip.tv!

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

Series Navigation<< Create a Sleek, Corporate Web Design (HD Video Series: Day 1)Create a Sleek, Corporate Web Design (HD Video Series: Day 3) >>

Adi Purdila is AdiPurdila on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this 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.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Rensa

    The links don’t open, they say Access denied.

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

      They should all be up now… the image server just took a moment to kick in ;)

  • Alisa

    ~Brandon Jones—Why can’t the video have close caption in it? I am deaf, I am a web designer and I love coming to it site. I have learn so much from it site without a video. Please put a close caption in that video. As you know is had already be sign by the President of United State under ADA law all video in the website are required to have close caption for the deaf.

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

      Thanks for the comment Alisa – That’s actually a huge amount of work for what’s going to be over 6 hours of video… I’ll ask around to see if there’s a service that might be able to help with closed captioning though :)

    • Brian

      Alisa, the Communications and Video Accessibility Act of 2010 clause regarding closed captioning appears only to apply, at present, to content that was originally broadcast on TV.

      • Alisa

        ~Brian, Video also mean website video too not just only T.V, DVD or any other. Is include the video in the website must have close caption or like what Grant Palin said “Text or transcript.”

        http://blogs.adobe.com/accessibility/2010/10/president-obama-signs-accessibility-act.html

        Like I said I love it site so much. Please don’t take that away from deaf people who might have come to it site often.

        • Brian

          Alisa, just to be clear, I’m not trying to argue for the need of CC. Obviously it’s a great benefit for those with hearing impairments. However, you’re miss-reading the law’s requirements.

          from the link you posted at http://blogs.adobe.com/accessibility/2010/10/president-obama-signs-accessibility-act.html
          “Within 6 months, the FCC will set a schedule for requiring closed captions on video displayed online, for video that was delivered with captions on broadcast television. (Section 202)”

          Video content created for the web, broadcast online (not on TV), isn’t required by law, to have closed captioning. At least, not at this time, as spelled out by the Communications and Video Accessibility Act of 2010.

    • http://grantpalin.com Grant Palin

      I’ll second the request for captions, or even a text version or transcript. I’m hard of hearing, and while videos are nice for those who like them, they are mostly inaccessible to me. Which is unfortunate since I can’t enjoy what would otherwise be great content!

  • Pingback: Create a Sleek Corporate Web Design (HD Video Series: Day 2 … | Translogistics

  • Mark

    A big thank you to Adi Purdila for this project.

    • http://www.adipurdila.com AdiPurdila
      Author

      You’re welcome :)

      I hope you’ll like the coding tutorial as well. And have the patience to watch all of it LOL.

  • Mato

    Great Great Great.

    I am looking for coding tutorial.

  • http://newbasellc.com Ryan

    Great stuff, really helping me out! Keep them coming!

  • DJ

    Sorry Adi… I’m going to take the “Emperor has no clothes” approach to help you solve a couple of deficiencies. It is a given that you know what you are talking about, your design was good and design skills are excellent. The delivery/production is what is sub-par (compared with the vast majority of videocasts on NetTuts+).

    Several people commented on audio quality – probably caused by too much highly polished wall surface where you recorded. Way too much echo/reverb, which made the sound muddy, difficult to understand and a real effort to listen to in some places … add some blankets, wall coverings, sound dampening to your room… please! [The quality of the mike you use makes this task easier, but you should be able to have a better sounding background than this even with a moderately priced mike.]

    The throat clearing, lip smacking and other “slippery” sounds – usually come from drinking coffee or other food based liquids/smells etc where you record. Also mike placement too close to your lips. Hit the pause button (we wont even know), clear your throat, drink ONLY water in small sips when needed, move away from food smells, don’t record after eating, etc. [These sounds are even more amplified in an echo'ey room]

    And, adding a bit more preciseness and clarity to your diction, as well as variety in tone to delivery (i.e. less monotone) – if you are able – will help understandability greatly.

    I AM anxious to see your design actually coded into HTML/CSS – I hope you use HTML5 with fallbacks – which is why I’m making the comments; but, really hope the screencast quality improves so as to not give so much distraction to the effort. Thanks for listening.

    • http://www.adipurdila.com AdiPurdila
      Author

      Thanks for your feedback DJ, it’s really helpful. I am aware that I don’t have the greatest diction, I always try to talk a bit too fast, need to learn to slow down a bit :D

      Good advices tho and I’m always happy to receive constructive criticism, especially since this is my first long screencast so I have a lot to learn, but I’ll get there eventually. As for the coding tutorial, I’ll buy a new mike tomorrow so that I’ll give you guys better audio quality for the future videos.

      Thanks again for the feedback, keep it coming :)

      Adi

    • http://themeforest.net/user/epicera/portfolio?ref=epicera Brandon Jones

      Yep – thanks for the feedback DJ. I’m sure a few of my own future screencasts will benefit from some of these as well – it’s really just good advice for anyone recording for the web ;)

  • http://www.modernooze.com sam – web design dorset

    Very good i expect more of these from this site as they are very handy :)

  • Joel

    Adi, Great job!
    Thanks

  • http://themeforest.net/user/jvanoel/portfolio Boba

    Awesome series. When can Day 3 be expected?

  • anon

    Nice tut, like the design. but I’m wondering, it’s supposed to be a Corporate design, are people allowed to use this as a base for a website for commercial use, like a company if they make it themselves(well, besides the idea and stuff)?
    Could you please answer me on this? I’d like to use the basic layout and design elements, like the squared paper texture, for the site of a small company. A lot will be different, like color use, position of elements, etc. But you know, I like it and it would be rude not ask :)

    • http://www.adipurdila.com AdiPurdila
      Author

      “The tutorials and articles (text/images) on Webdesigntuts+ are the copyright of their respective authors. You may use the effects demonstrated in these tutorials in your own work – commercial or non-commercial – provided you are not redistributing or reselling the tutorial / PSD file itself. You may use the effect without attribution.”

      So, basically, as long as you don’t resell the items I’m providing along with the tutorial you should be fine. If you like that grid effect on the top, go wild with it, use it, just don’t grab the entire code/PSD file and resell it as your own, that’a breach of copyright if I get this right.

      Brandon might make this clearer tho, he’s the master around here :)

      • anon

        Thanks for the reply :)

        I’ll wait a bit but, I never planned on using it entirely, in fact, I can’t, because it wouldn’t work. The newsletter is useless, as well as latest news, gallery, that slider, satisfied customers, and so, I won’t even be using the contact page and gallery page.
        As mentioned I’ll mostly use the basic layout, so, header with different logo and obviously other contact info, footer without the newsletter and that logo on the bottom and the little elements like the rounded background and text fields.

        Again, since I’m going to use some elements, I might as well say it to the one who made the tut ;)

  • http://www.ajchan.com AJ Chan

    After this, LET CODE THIS THING!

  • http://trimoleksono.com Trimo Leksono

    Enjoy this videos tutorial, thanks for share nice tutorial for designing sleek corporate site :)

  • Pingback: Create a Sleek Corporate Web Design – HD Video tutorials on Webdesign Tuts+ | AdiPurdila.com – The portfolio of graphic designer Adrian Purdila

  • Pingback: Create a Sleek Corporate Web Design (HD Video Series: Day 3) | Webdesigntuts+

  • Pingback: Create a Sleek Corporate Web Design (HD Video Series: Day 4) | Webdesigntuts+

  • http://www.Twitter.com/BondJuan165 Bond Juan

    How to download the video? I’d like to download it. Watch it again and again

  • Pingback: Create a Sleek, Corporate Web Design (HD Video Series: Day 3) | Tagtype

  • Pingback: Create a Sleek, Corporate Web Design (HD Video Series: Day 4) | Bubbleworks

  • Jibby

    Hey great tuts, is the plan to convert to valid css/html? BTW i think you sound just like Christopher Walken so much fun.

  • robert

    Very nice tutorial..but I can’t seem to view Part 2. Could it be my connection?

  • Pingback: Create a Sleek, Corporate Web Design (HD Video Series: Day 4) | Zoodoo

  • http://www.paintndesign.com PHILIP SAVARIRAYAN

    HEY ADI, I REALLY LIKE THIS TUTORIAL, ACTUALLY ITS BEEN ABOUT A WEEK. HEY CAN I USE YOUR DOWNLOADABLE FILES FOR A PROJECT IM WORKING ON FOR A CLIENT, IM CHANGING SOME STUFF LIKE GRAPHICS AND COLORS AND GALLERY BUT ITS PRETTY MUCH THIS TEMPLATE.

    I am however doing the whole tutorial and have learnt a lot so far, it awesome you spent time for this thanks. But im having issues with cufon fonts, it wont replace my fonts on my files but works on your d.ownloadable files, i tried linking the script src it in different ways eg ../ and just / but it wont replace the font dunno why.

    Also the hover works on your files but not mine the hover change for social media – any suggestions. I checked the path and jquery code about 100 times.

    Thanks man would love to see more tutorials from you cheers

  • pratik

    thank you AdiPurdila , i watch all tutorial it’s very helpful.
    i learn lots of things how to design web template.thank you.

  • Ebrahim Khalil

    That’s “CORPORA” really great. But I need a free download with html files…..

    Ebrahim Khalil
    Bangladesh

  • abhay

    poor tutorila

    • http://www.facebook.com/profile.php?id=1311520144 Steini Pé

      I can see how it is poor tutorial for those who even misspell tutorial as “tutorila”