How To Design a Website for the Non-Designer that takes full advantage of JQuery on the client?


Tags: jquery,css,design,photoshop

Problem :

I'm a developer ... not so much "the" UI guru type. I can get by with my photoshop skills to some extent but often find myself underestimating my time here and thinking that I'm probably not as efficient as I could be in this respect.

Anyhow, I know I can't be the only developer on earth being tasked also with the design as well so ...

Looking for some how-tos, examples, steps, etc... I can take in designing websites from the ground up and then properly "cut up" to take full advantage of CSS and as many Javascript goodies (using a framework like JQuery, mootools, etc...) as possible. A few other questions:

  1. What if any pre-manufactured templates (starters) are folks using that might eliminate a lot of redundant coding?

  2. What if any initial CSS stylesheets are you using by default?

  3. Is photoshop still the choice of UI designers? If so, what settings should I start with in mocking up my site? And ... what is the best way to cut things up so as to take full advantage of CSS and Javascript frameworks like JQuery?

Thanks - wg



Solution :

As a one-man army myself, I can understand your frustration. Fortunately for me, I started more as a designer and then became a developer. I've not got over a decade of experience with design, and about 7 years experience with development. Here's a few tips.

Get familiar with a good CSS Framework. Don't focus too much on being graphically-excelled at the beginning. I would suggest the 960 Grid System. It will allow you to quickly layout an entire page with very little effort, and very simple markup. Experiment with a few different layouts. You can visit the framework website for information, or watch this short demonstration video to get familiarized. This framework comes with the Eric Meyer CSS Reset - use it!

The next step for me is to plug my layout into a MVC project. Once I have that done, I tie in jQuery via the google-api's link, and begin coding my dynamic behaviors.


    CSS Howto..

    How to vary the tone of an image dynamically using only css?

    How to get odd/even coloring for IE and Firefox using CSS alone?

    How to get length of elements with a certain css attribute?

    How to place a div on right side of cascading tables - CSS

    How do sprites work in jqmobile?

    When I say position:fixed, how do I tell mobile browsers I mean it?

    how to set image for anchor tag in mvc through css?

    How to create a top-footer and footer using foundation, just like foundation website

    How to use 3 background images for a resizable layout in CSS?

    How to adjust CSS to display correctly in IE 6?

    How to make a custom select option menu style without image in CSS?

    HTML5/CSS3 how to expand an anchor element to fit full size of it's li parent

    How to use fadeIn with css property change jquery

    Hovering over item in WordPress list of pages shows Featured Image

    How to select children in CSS

    Sencha Touch how to load custom CSS , JS if user is using PC or Tablet or SmarthPhone?

    How can I set up a static Webkit Mask

    How to make a simple plus one voting system in code igniter

    HTML Tables - how can I make all cells other than the last always be wide enough?

    How to change the scrollbar color using css [duplicate]

    How to remove an empty line between two navbars

    How to make semi-transparent select2?

    How to set column width for DataTables

    How to reject specify HTML tags by using css or xpath selector

    How to fit the title to the entire page

    Jquery CSS How To Use Margin: 0 auto

    How can I make kinetic.js full screen background view

    How to combine wildcard and not selectors in CSS

    How to build a mobile version of a non-mobile website? [closed]

    How do you modify wordpress css for posts?