Jun102011

SharePoint Design in Five Minutes

You can now download my free SharePoint theme, Medazio, on SharePointDesigNerds.com. We’re still working on cleaning up the site while it’s in “draft” version, but feel free to sign up, browse a couple of the themes that we’ve uploaded, post your amazing SharePoint spotlights, and give us feedback on the design, navigation, and functionality in the site.

Update 8/17/2011: The “Medazio” theme can now be downloaded directly from SusQtech.com/medazio.

The Video

While building the Medazio theme, I recorded over 11 hours of video in order to document the entire SharePoint design and customization process. From creative sketching to design in Photoshop to actual coding of CSS and HTML in SharePoint Designer 2010, you can see the entire project from start to finish, compressed into about five minutes of rapid SharePoint Design fury. Check out the video, download the theme, and see first-hand how SharePoint is truly a viable and impressive publishing platform for your design-savvy projects.

Watch SharePoint Design in Five Minutes on Vimeo.

25 Comments on “SharePoint Design in Five Minutes”

Hi Kyle,

I’m interested in something a little longer than the 5 minutes “crash course” video. Have you created or could you make access to the longer videos available, or is this something you’d consider monetising as it would be a great use for me.

As another consideration, if you wanted to gain some exposure for your skills, you could probably release them as a series of articles on NBSP (which brought me here!).

I’d be keen to know your thoughts on both ideas.

Cheers,
Steve

Posted by Steven Andrews on June 21, 2011 at 4:17 am.
- Hi, Steven. Wow, an eleven-hour video, or even something half that length, would be quite the download! Honestly, the only thing I did for this theme was do some design work and throw some HTML and CSS together in SharePoint Designer. The video of these tasks alone would probably be out of context with the “big picture,” which is so nicely portrayed in a five-minute short. I’ll definitely consider doing some write-ups on the overall process of applying design to SharePoint in the near future.
  
  Thank you!
  Kyle
  
  Posted by Kyle on June 21, 2011 at 11:05 am.
  - Hi Kyle,
    
    Thanks for the response.
    
    If it’s of any interest, I’d be happy working with you in such a write-up, as it’s an area of the technology I’m dipping into for the first time.
    
    No offence would be taken by a refusal but just thought I’d get it out there!
    
    Cheers,
    Steven
    
    Posted by Steven Andrews on June 22, 2011 at 7:15 am.
Love it. Apart from SharePoint Designer, what other tools are you using in the video? I think I saw Photoshop but what are you using for the sketches at the beginning?

Posted by Andy on June 23, 2011 at 2:41 am.
- Hi, Andy. I’m using SketchBook Pro, Photoshop CS5, and SharePoint Designer 2010. There is actually a free version of SketchBook available on the Mac app store, so there’s probably one you can find for Windows as well. It’s great for sketching out ideas and putting things quickly down in electronic format (especially if you have a pen & tablet to assist).
  
  Posted by Kyle on June 23, 2011 at 7:57 am.
Hi Kyle,

could you write an article about how you “transfer” you design from PS into the Master Page HTML code? That’s something I’m really curious about to hear, couldn’t see it properly here in the video

Posted by Rene on July 9, 2011 at 9:16 pm.
wow… I think I just had seizure… lol

Very interesting, but I, too would love to see this (even) snippets slowed down. Impressive nonetheless.

Question, what method did you sue for customizing the system pages? Did you modify the master page? If so, which one?

Posted by Chris on July 20, 2011 at 7:39 am.
Hi Kyle,
amazing video, nice to see how you start from sketch till the end. Im curious about the HTML and CSS behind the Mediazo theme, is there a other way to download the theme i think alot of people are interested

Posted by Martijn on July 25, 2011 at 3:12 am.
Hi Kyle,
I can’t get your link working (sharepointdesignerds.com)

Posted by Marijn on August 5, 2011 at 4:03 am.
A high res screen shot would be great. Great work.

Posted by Tony on August 18, 2011 at 9:51 am.
Hi Kyle,

Is there a big difference between Share Point design 2007 and 2010. ?

Also I can´t hear anything in your video ?

Posted by Julius on September 15, 2011 at 7:01 am.
The http://www.sharepointdesignerds.com/ link is broken. May I know the correct link?

Posted by Gemma on September 29, 2011 at 12:06 am.
I’ve been trying to pick up SharePoint design for a while and came across your site. Great info. I’ve implemented your files on my local SharePoint and have an issue with links with drop down menus. The button associated with the drop down doesn’t display properly. Have you encountered this issue? Do you know what could be happening?

Posted by Ryan = on December 7, 2011 at 3:38 pm.
Hi Kyle, Great template you’ve provided, best free SP2010 Theme on the web. Thank You.

When using IE7, the Search-box overlays the Medazio-logo and a greyed out scroll-bar is seen under the Ribbon.
Can you provide the CSS fixes for this? Thanks.

Brett

Posted by Brett on December 19, 2011 at 12:20 am.
- Correction, I managed to fix it by moving the DIV elements manually by clicking and dragging.
  Scroll-bar issue, body.v4.master {overflow-y: Auto}
  
  Anyone have problems with Splash Images not displaying ActionUrl correctly? The instructions don’t explain where ActinoUrl is placed in the CQWP.
  
  Posted by Brett on December 19, 2011 at 5:03 am.
  - Hi Kyle, I had to modify the ItemStyle.XSL file to get the Splash Images to correctly display the ActionUrl Column in the Sliding Images.
    Before the first I needed to place the following:
    
    Then in the CQWP, within ActionTarget and ActionUrl fields, type in ActionTarget & ActionUrl.
    
    Brett
    
    Posted by Brett on January 10, 2012 at 9:38 pm.
  - Hi Kyle / Hi Brett,
    Cool stuff with this master page design.
    
    I am having the same problem with the ActionTarget & ActionUrl being ignored in the slider… What did you do to the XSL Brett to get it to appear in the CQWP? (Your code got snipped it seems).
    
    One thing I did find out was if you want to roll up images using CQWP there is a bug that stops this working (webpart correlation error) that is resolved by adding to the exported CQWP the following:
    
    [code]
    DocumentIconImageUrl;OnClickForWebRendering
    [/code]
    (courtesy of Waldek Mastykarz).
    
    Thanks again
    Ben
    
    Posted by Ben on January 28, 2012 at 10:39 am.
  - Hi Ben/Kyle, I’ve added my own editing instructions in my own blog, since I am unable to post code properly.
    http://wp.me/p1CaM9-1Z
    Hope the url works ;)
    
    Posted by Brett on February 14, 2012 at 5:59 am.
Thanks for the great work done! This helped me a lot after struggling for weeks with VS2010… I’d also strongly advise others to stay away from 3rd party stuff like IntranetFactory or nextFlow and rather learn to do things yourself!

So Kyle, please build us a step-by-step tutorial because some of us are located on the other side of the globe and won’t be able to attend seminars in the US…

Posted by Renier on January 11, 2012 at 6:57 am.
Hi Kyle, nice design! Clean and simple.
In my experience, the fixed width design has some problems in SP 2010, if you look at a list (Pages list for ex) you will see that the list web part extends to the right over the current navigation.
What I have been doing until now is I have placed the current nav on the left side of the page, and on some pages I let the content expand to the right.
Do you have a better solution to that?
Thank you!

Posted by Madalina on January 24, 2012 at 3:13 am.
Pingback: Medazio Free SharePoint Theme « SharePoint 2020
Hi Kyle!

I enjoyed the demonstration of this during the SharePoint conference, and I enjoy it even more today. I’m running into a problem because all I wish to do is to create the rotator with text inside a header on my page. I’m having troubles doing so because I can’t get past the first step. I located the file in my hosted site and there isn’t content in it for me to copy. I’m confused. Please help.

Posted by M.M on May 22, 2012 at 9:07 pm.
Hi Kyle,

Great video. I was curious how you were using a Mac. I thought SharePoint Designer 2010 only works on Windows. How are you jumping back and forth from PhotoShop and SharePoint Designer 2010? Are you using a software like “Parallels Desktop for Mac” to run Windows on your Mac?

Thanks,

J.

Posted by j on September 21, 2012 at 5:14 pm.
- Yep, it’s Parallels.
  
  Posted by Kyle on September 24, 2012 at 12:54 pm.
Great theme. My question is: how do I get it to work in SharePoint Foundation?

Posted by Jessica on November 2, 2012 at 2:05 pm.