Drupal for Web Designers – Introduction

Categories Articles, Drupal, Web Design

This is the first episode of a new weekly series about the other most popular CMS. Yes ladies and gentleman we’re talking about Drupal! First of all will let our new guest author Idan Arbel of Arbel Designs. Feel free to share your thought on CMSes, Drupal or anything else in the comments section. Enjoy!

Hello

My name is Idan and I’ve been designing websites since 2001 and for the past 4 years I’ve been using Drupal as my CMS of choice. I think Drupal is an amazing piece of software that has given my business an amazing boost. How you ask? Well simple, I consider myself a web DESIGNER, not a web developer or a programmer, I Design and I think I’m good at it. I also have a bachelor’s degree in Industrial Design, but I digress…I’m a designer and I wanted to be able to provide my clients with rich content management systems that would allow them to update their website’s content by themselves and not have to rely on me. Up until 4 years ago I either had to outsource the development part, or simply create static html sites that required me to update the sites manually. Then I discovered Drupal and I’ve been loving it ever since.
Let me tell you why I think you should get into Drupal, or at least why I don’t intend to leave Drupal in the foreseeable future.

Let start with what’s important to me – the DESIGN

Drupal has great templating and theming system that allows you to pretty much do anything you want with the design of the site.

I have never felt that Drupal was limiting me in any way from a design standpoint. I start each project by designing the website in Photoshop, I have full creative freedom and I don’t think for a second on how Drupal will handle any part of the design, if I know I can achieve this design using HTML/CSS, then I know drupal can handle it.

I start all my drupal websites with a base theme – I used Framework, and over the years I simply added and modified the theme to suit my needs. But how do I actually take my design and convert it into a Drupal theme? Simple:

  1. I design the website in Photoshop – as stated before.
  2. I slice and dice the design and create my HTML and CSS files, the same as you would do a static website.
  3. Open up my previous theme, and start copying my html into it, keeping the php code and working around it.
  4. That’s it

….well actually there are few more small things that need to be done but basically if you know how to convert your psd file into HTML/CSS and you know a tiny bit of php, you can create your own custom theme.

I like to give my website http://www.arbel-designs.com as an example of how you can make Drupal do whatever you want, and it’s not going to look like any other site. A single page website with navigation scrolling to different sections isn’t the classic CMS template, but my site is backed by Drupal and I had no problem implementing my design. Here’s another Drupal website I designed – http://www.kintorebusinesspark.co.uk. I can give you lots more examples of what website designs can be done with Drupal, but the fact is that drupal simply is a non-issue, if you can implement your design with the tools your already have, then you can do it in Drupal.

So, design: Check. Next week we’ll talk about Flexibility. Let me know your thoughts. Thanks!

Want to pass 642-533 exams? Check out our latest 642-731 study guides and 642-359 demos give you 100% exam pass guarantee of 646-223. You can also get 642-524 dumps from this website.

Idan has been designing websites since 2001. Has a Bachelor's degree in Industrial Design and has been using drupal as his CMS of choice for the past 4 years.
  • I want to thank you alot for this article and can’t wait for the next one! I like to design websites to, and as I don’t know programming, I think these articles will help me alot getting started with Drupal!

    Cheers!

  • javaneo

    Thanks alot. I always try to create the theme from scratch and end up failing. I’m going to try using framework like you said and see if i can finally handle drupal. Idan,thanks again for this article

  • Hi Idan,
    Thanks – It’s a great article! :)

    I was wondering if you could share your “Drupal-template”? I know it’s a lot to ask about, but i think it’s so difficult to change the layout of the site even in the basic templates. I have also tried to download a simple template, but thats still difficult.

    Kind regards and best wishes
    Christina Bruun

  • Thank you for the coming article, I am very impatient to read them. I tried to learn (from only small notions of CSS) how to use a grid theme, but I stopped, it was not well explained when I was looking for informations.

    Bye

  • Idan Arbel

    Thanks for all the comments,
    I’ll see if I have any template I can share that’s lying around and doesn’t belong to a client.
    But this is only the introduction, and in future posts I’ll go over the process in more detail.

  • Val

    Allready bookmarked! Thanks for sharing

  • SEO

    Thanks for sharing your experience an thought..this is a great info. about drupal..i like programming i want to learn drupal..This is a good resource for develop website..

    Thanks for sharing…
    Internet Marketing

  • Great sites. Do you start with a base Drupal theme like Zen? And for doing highly customized work, do you find that you have to code most everything yourself?
    I’ve toyed with using some of the drupal theme-related modules like Skinnr, or base themes like Fusion, but they don’t seem to be worth it unless you have a more traditional layout.

    Totally agree on the flexibility point. Drupal can do anything you need, but be prepared for frustration. Drupal is catching up to WordPress’s intuitive user interface, but it has a ways to go. Drupal is developer centric. You usually need to know some php to customize your layout and alter the template files creating the pages.

  • Idan Arbel

    I really started a while back with framework as the basic theme, but over time I’ve changed it quite a bit, each site I work on I build on the previous one.
    Since I’m pretty good with html/css, I like to actually start with a static version, and then plug in my html into the theme template files. There are also other options like using panels, which help with the layout.

    I’ve actually never used wordpress for building websites, it’s mainly because my issue was with getting the website to have all the functionality I was looking for, and not an issue with getting my design out there.
    And that’s what drupal allows me, I can do stuff with drupal with very little php or js knowledge that I wouldn’t dream of before.

    After I finish the series on the introduction, I’ll have some posts on showcase and tutorials on how to get things done from theming, to little tricks I learned and keep learning.

  • G

    I switched all my sites to running on drupal about a year ago and in the beginning I found it hard to use stripped templates to build my sites.

    I usually go through various templates and pick the one closest to my design and just use them and modify headers, graphics and so on and make it look how I want it. At least when I started.
    Here is one of my sites that’s running on Drupal (www.ultratonic.com). I think the best way to learn is to start on templates that already had been styled and get comfortable modifying them and keep learning and advancing until you can create your own.

  • I used drupal for the first time a few weeks ago and had so nuch frustration and headaches from it that i went instantly back to what i know which is wordpress i am adament you won’t but I will keep checking back, can you change my mind?

  • In my opinion the only designers who like using Drupal as a cms are the ones who have either only used Drupal, or know it so well they don’t need to bother learning anything new.

    Don’t get me wrong Drupal is a fantastic cms with a great following and developers. it wouldn’t have gotten as big as it has if it was crap. But for designers there are so many better choices for cms’s out there. Drupal was created for developers by developers.

    As a designer who isn’t going to have to build overly complicated sites I’d look for a cms with less of a learning curve and easier templating like ExpressionEngine, MODx, WordPress, Silverstripe, Concrete5 etc.

    Anyway that’s my take on it.

  • oh…. thanks… i’am newcomer to Drupal, let me know its working… i’am using WordPress….and feels as good… cant wait for next post…

    [and your website is really amazing one. i like it. really wonderful one.]

  • DrupalFan

    A base theme I highly recommend is Adaptivetheme, http://drupal.org/project/adaptivetheme .

    You can easily port your HTML/CSS design to Adaptivetheme and then use the many theme settings to configure common layout options.

  • Ganesh Kondalkar

    Hi Idan,

    Thanks for the intro about the Drupal…. :)

    I am waiting for the next article….

  • great info…Drupal allows anyone to easily publish, manage and organize a wide variety of content on a website.that’s message very useful for drupal developer..

    Thanks for keeping this info…

  • Brennen

    I’m new to web development and I was very pleased to read this article. Keep them coming. I’m looking foward to the next one.

  • I just did a complete redesign of a large site set p in Drupal, and my gripe with it is that it generates so much junk markup, nested divs with unneeded classes inside of classes–in comparison to WP and an open source CMS called Omeka, which I have also worked with. It’s just a nightmare for someone who strives for clean semantic markup. The developer I work with loves it b/c you can do anything, but I agree with others: it’s developed by and for developers, not necessarily for those committed to clean semantic markup.

  • Hi Ian
    Thanks! :)

    “Thanks for all the comments,
    I’ll see if I have any template I can share that’s lying around and doesn’t belong to a client.
    But this is only the introduction, and in future posts I’ll go over the process in more detail.”

  • U r article gives quite a lucid intro for drupal I like it very much

  • This is a really great overview and it is very helpful. Thank you.

  • Drupal the heavy weight in the can do it arena click a few tool kits together via the CMS admin and you have it, wordpress a heavy weight in the switch it on and it works arena but falls short when the website moves past a blog.

    Both have their pluses and uses, but 70% of the time i recommend drupal.. as nobody likes to think small.

  • I’ve only had minor exposure to Drupal but so far I agree with what others have said – by developers, for developers. To me it seems over bloated – like they tried to throw everything, including the kitchen sink in there and in so doing made it way over-complicated for 90% of the web. If you’re making a really complex site, go for it, but if you aren’t, there are better options.

    You have to really know what you’re doing with it in order to customize anything. Granted I’m a designer and I my expertise is the visual and html/css. But I can look at code and usually “get it”. When presented with a Drupal admin I was just, “huh? what is all this stuff?” Even the admin was complicated, but I hear that can be customized as well so perhaps whoever set up the site I was using didn’t do any of that.

    And I disagree that WordPress falls short when it moves past a blog. There are TONS of ways to make a very complex and customized site using WordPress. There are also some very big companies using WordPress now for their CMS.

  • Idan Arbel

    Hello,

    Thank you for you comments, WordPress’s popularity is undeniable and It’s a great CMS, I’m not all that familar with WordPress so I won’t really try to compare the two.

    But I believe I do know Drupal from a designers point of view, I”m not a developer, know a bit of php enough to get me around, but I don’t write any custom code.
    This is why I really love Drupal, you can create small website, or a blog style website with out a problem using the most basic modules. But when a client asked me to add a search feature to find a distributor based on a location, It was very simple doing this using Views and exposed filters. Then they asked me to add a section that was only visible to specific members of the site, again one small access module and it’s done.

    With drupal I don’t fear haiving to start writing custom code because there a lot of modules out there that achieve anything I need, and the nature of those modules is that they try to be very flexible, so the don’t just do X, the allow you to achieve a wide array of features.

    I recommend you read my other posts in the series and stay tuned for full guide from PSD to Drupal portfolio site. Might convert you to Drupal =).

  • amit

    thanks, i feel really happy to read this article, i am also a web designer since 2009 and now i started to learn drupal.