enavu webdevmania tutsvalley psdestination
visit the enavu network
10 Comments Article Title Overlay

Mock Design Slice HTML CSS JavaScript – Modern Approach to Creating Websites

The optimal process I have developed after creating thousands of websites, if you follow my pattern and understand the reasoning behind it you can be making websites two to three times faster!

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

The optimal process I have developed after creating thousands of websites, if you follow my pattern and understand the reasoning behind it you can be making websites two to three times faster!

My Designer Shades Have Cookie Jars

(Mock Design Slice HTML CSS JavaScript/JQuery)

Okay the acronym MDSHCJ might be hard to remember, but My Designer Shades Have Cookie Jars is pretty darn catchy. As you can see in the title this stands for Mock Design Slice HTML CSS and JavaScript/JQuery. Let’s get started, I will go over each part of this development process so you can get an idea of how it all works and how it can help you make websites faster.

Mock Up

Mock Up

Mocking up, and planning a website is an important part of the creation of any kind of websites. Whether you are going to work with your client to come up with some rough sketches, or you are creating your own website. You need to sit down and figure out exactly what you want on the website. Whenever I am talking with designers who haven’t done this often I ask them to think about what the website does, what you are trying to get across, and what is the overall goal. If you can come up with a list of design elements and goals for the website creating a mock up will become extremely easy.

Start with understanding who your audience is, how often do they browse the internet, what is their skill level, what kind of website are they looking for. Then go into trying to figure out the main purposes of their visit, for example if it’s a store website the main purpose for them being there is to purchase items and pay for them. Knowing this information helps you understand what you need to make stand out and what should be placed where.

Design

Design

Once you have created your Mock Up you are ready to move onto designing the website. Whether you use Photoshop, Fireworks, or Paint you need to start thinking about things like colors and patterns you want to use throughout your design to give it consistency and usability. Something I have found helpful when designing the website is to keep in mind you will be eventually slicing it and getting it ready for use. What this means is that staying mindful to the overall process can help you or whoever is going to slice the design to do everything in a much nicer manner. This could mean keep things in Folders, keep layers organized so that it’s easy to find elements. User rulers and slices so that the Coder can easily distinguish between the distances you used and the intentions you had. This is useful to you especially if you leave the design to marinate for a while and then come back to it, looking at all those rulers you added can remind you what you really had in mind. Also when creating the design comes the time when you need to pay attention to things like spacing, grids, colors, sizes and all the great stuff that comes with being a designer.

Slice

Slice

Slicing is one of those things that you can do a hundred different ways and you still might find ways to improve it. Personally i have found that with every next website i make it becomes easier and easier to know what exactly i will need. If you are not familiar with slicing it’s the part where you take a design and start generating the images you will need to create your website. Whether it’s a repeating background or a submit button this is where you create your jpgs, pngs, and gifs. Keep in mind that a lot of the things in your design can likely be recreating using clean and simple CSS, and even CSS3 which with the right amount of Progressive Enhancement can be very beneficial to you and your users.

HTML

HTML

The HTML is my favorite part of this process, because it is very precise and beautiful if you do it right. I first start by breaking down the components of my design. Header, footer, navigation, side column and so on. Once i have those down, i start filling them up with the smaller elements like Unordered Lists and Paragraphs with Lorem Ipsum. Something i like to do is use ID’s for the bigger elements like the header footer and main part of the website, and use classes within for the elements that i will be reusing. Use indentation of course to keep your code organized and easy to work with, and add little pretty HTML comments when you close a DIV or a UL, this will save you a lot of headaches when you come back to add/edit things in your website.

CSS

CSS

I find CSS to be an art, just like when a painter sits down and starts adding color to his painting. With CSS i like to start by styling the Main elements as mentioned above, i keep an area in my stylesheet just for those big elements that go on every page. Then once i start adding page specific styling i create a new section with a CSS comment to distinguish between my pages. Now don’t worry too much about whether an element will be used across the board or in a single page, i have had to take elements out of the specific page code into the general code. With css i also like to use indentation to specify that the styling for the element belongs to the element above it.

JavaScript/jQuery

JS

JavaScript and jQuery/MooTools/YUI and so on should be the last thing you add to your website. They are the interactive part of your website, they are what the user can do with the page. If you kept in mind that you will be using JavaScript for your HTML elements when you were writing the code for your page this should be a breeze as all the elements have the correct classes and ID’s for you to easily manipulate and have your final interactive website ready.

Conclusion

The process i have described might not be what works best for you, but if you can understand why i follow those steps, and why this works for me i think you will have a much better idea as to how to optimize your process. For example once you write your HTML you can use the CSS GENERATOR and get the CSS corresponding to your code. Also having the images once you are writing the HTML and the CSS helps with sizing things correctly, and especially with Dreamweaver you can always click browse when you are adding an img src or a css background and directly select the correct image!  Now go out and make a few websites, have fun and happy coding.

Related posts:

  1. How to structure a website (html, css)
  2. Inspiration – An outside the box approach to getting inspired
  3. jQuery/CSS Incremental Layout Size Adjuster
  4. Web Application Interface Design Guide
  5. Top 6 Ugliest Web Design Company Websites

Did you absolutely LOVE this article... share it!

Comments

  • First of all i am not a professional designer, i am a web developer.

    My Questions is:
    Is there any other way to create a website?, i think the way and steps you listed are the only right way to do it, can some one correct my point of view?

  • I know I wrote the article, and you may want to hear the opinion of others. But i just wanted to add my 5cents.

    There are plenty of other ways to do this, it’s actually quite common that people start with an HTML page, they add all the javascript/jquery functionality, and then they start adding Graphical enhancements. I forgot the name of that method, but they use html as their Mock Up solution. If i had more time i’d find you some articles about the method.

    Also people don’t always mock their designs, a lot of people like to start their process in Photoshop. And there is absolutely nothing wrong with those methods and others i have not listed, they are just different and people can argue that they work better for them! I just wanted to share the method i believe is the most beneficial to new developers, or even existing ones that like other methods.

  • Good article and relevant. I must remember to keep javascript till last!

    As a first step I like to use storyboarding for sites as this helps visualise the navigational aspect of the site.

  • That is fine for flat, brochureware sites but not sophisticated dynamic sites such as shopping systems. YOu have to take into the account the effect of dynamic and changeable activties – eg on a site I project managed the development for years ago the designer went through his processes (similar to yours) and came up with a design everyone loved. Part of it was a ‘design your car’ feature whereby you entered lifestyle questions and it made suggestions, showing images of each car in a neat little grid.

    Our software architect looked at it and asked what hapened if the number of cars that came back were more than the three allowed for? In his design it would have brken it and made it look horrible.

    So he adapted the dsign to the possibilities of dynamic sites showoing more items than expected (or less come to that).

    I suspect you already do this yourself in some way because of your experience but the perosn in the original project was a very experienced designer but new to web design.

    When I manage large internet projects with extensive software development needs I usually have a leadership team consiting of the web designer (or lead designer for very large ones) a softwarae architect and a business analyst so that all views of the sstem aer covered in a co-operative manner. It can be tricky because all these people are arrogant and temperamental, but its one the challenges of Project Management to mange thse issues.

    For large complex sites storyboarding with wireframes and mockups are very useful to get business user buy in for major projects. Look and feel type design must not come too early or the business users get distracted onto worrying about colours and looks and feel without considering the complexities of the functionality they are wanting.

  • I think your design process is a good one, much like what I’ve seen before. It works very good with sites that have a minimum of server-side work, or the code for the server-side work already exists (a blog on a CMW, for example).

    However, as a developer of sites with a lot of server-side code (eg member sites with complex data), my process has a few more steps:

    Before the mock-up, I always start with trying to work out the functionality of the site. In fact, this does not (and should not) be dictated as being a web site, just functionality to help the customer towards a goal. Sometimes (more often than one should think), the best thing to make might not even be a website.

    Then I do the mock-up. I’m not very good at the visual stuff, so this is usually done with the help of someone that doesn’t end up drawing stick-fugures all the time :-)

    Also, after the HTML stage, quite a lot of work goes into designing code models and rough setup of the server side, followed by a stage of translating HTML to server-side templates. The JS/JQyery stage is also done about this time to try to get the most out of any AJAX-style functionality.

    Oh, and I don’t really do the procedure for all functionality at the same time, I try to do the entire process for each piece of functionality, refactoring/redesigning the already finished bits if needed to fit the present design/code standards/etc. This might seem like tremendeous overkill, but in fact, the process is really quick for most of the iterations after the first one, and it avoids trying to fit a square peg in a round hole when the the new feature does not fit naturally with the old design. And it gives the user a feeling of progression on the site, that someone is working actively to improve.

    Thanks for a good article!

  • Misspelled in my previous comment, it should read

    It works very good with sites that have a minimum of server-side work, or the code for the server-side work already exists (a blog on a *CMS*, for example)

  • I am really excited that so many people were able to voice their opinions about the method, and the sheer expression to me is very exciting so i’m going to address them right now.

    First of all, to address the comment about tying it to the back-end coding. Not sure if you heard of things like MVC but the separation of Content and Functionality are pretty important. Just like HTML is the structure, and CSS is the style. With MVC you have a Model, View, and a Controller. I’ll summarize briefly as i’m sure you guys already know about it. The Model interacts with the database, the controllers run the whole application accessing the model and feeding the view, and the view is what the person sees. This makes the process completely separate, and super fast. If you’re not using MVC yet, give it a try it’s a god send.

    Also i believe i missed to explain the Mock Up phase a little better. In the Mock Up phase you need to come up with a combination of notes like what you are trying to achieve, hence creating mock up screens that reflect the actions users can take. The whole application can be mocked up in different screens and pages with notes.

    As far as blending your HTML with template systems, as a person who has worked with quite a few template systems from Smarty, Wordpress, Expressionengine, to so many others i feel a strong ready design (html/css wise) is so useful to seperate a header footer, and page elements it helps with consistency for sure.

    And Neil, ahh you speak from my mind. Being a part of the development team in the University of Santa Barbara where we developed advanced student websites for signing up for courses, and paying for classes i know exactly where you are coming from. But to me it feels that even in those cases, yes you have to add quite a few steps before my method, but in the end my method is still very usable, and optimal. There do need to be countless meetings with all members of the team to discuss the functionality, the database interactions, with architects and so on to foresee a lot of things that will obviously come up, but after all that is settled and my notebook is full i can sit down and enforce my method to make a very aesthetic website.

    Thank you guys for your input, i love discussions like this one.

  • great this is really informative.

  • Great, thanks

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting