First Process

Collect all available information relevant to the project. This could include a written brief, background material, studying existing branding, legal issues and research necessary for the project.

Questions should be ask at this stage in order to understand the client's expectations.

Asking the right questions is the utmost importance. Design erodes to nothing more than decoration. So it is important to ask the folowing questions. Why are we doing this? What specific outcome are we looking for and how will we know when we have achieved this? What can get in the way of our success and what can we do to mitigate that risk?

At this stage it’s a good time to look at the competition and their approach and figure a way to gain the advantage. The information is analysed and an initial proposal developed that reflects the understanding of the project .

Second Process

When the initial proposal has been accepted and everyone agrees on the details, preliminary design ideas are developed. This is where the creative process is given free reign within all the constraints established in Stage One.

Considerations may be colour combinations, typography, graphic style, keywords, technology. You might end up with a lot of visuals remembering that some things work and some don't.

The ones that make most sense are refined and assessed as to the practicality of development. Also move away from them for a day if possible to see them from a fresh point of view. Generally only present three concepts to my clients for review, usually in pdf format.

Client feedback and discussion result in the preferred concept being chosen for Stage Three development. Approximate the cost of the implementation.

Third Process

The selected concept is worked up with all details implemented. Variations may be developed as well as further mock-ups. A logo would be created with subtle variations, different colours, fonts and etc.

A website's various pages would be assembled in Photoshop and sample pages created in html or Flash to experience the on-screen effect.

A brochure might have photographs commissioned or purchased from a library which would need selection and approval.

This stage can seem a bit random but it really depends on the item being designed.

The important point to bear in mind is that this is an organic process and details can be changed if necessary.

A detailed specification of the design for production planning and final costing would also be created at this point.

Fourth Process

After Stage Three approval, finished artwork is produced as required. For print this usually involves the creation of print-ready pdfs and detailed specifications are also created for outside suppliers.

For websites, designs are converted into html code.

I like to mention step 5 - Supervision of production.

Quality control is important so to oversee production through to completion.

In the case of print it usually just means checking printer's proofs although the pdf system is very reliable.

Choose a website name, sort out your hosting and learn how search engine optimization is vital and how it is implement in any design.

Websites are also tested on various browsers. There are various on-line tools to help with this.

Show Grid - Click to Open
1000px = 15%
 
1000px = 15%
 
1000px = 15%
 
1000px = 15%
 
1000px = 15%
 
1000px = 15%
2 columns: 320px / 1000px = 32%
 
2 columns: 320px / 1000px = 32%
 
2 columns: 320px / 1000px = 32%
3 columns: 490px / 1000px = 49%
 
3 columns: 490px / 1000px = 49%
6 columns: 1000px / 1000px = 100%
Slide your cursor on all four boxes below. Also, checkout another Web Responsive Design template

Box 1 - put cursor on me

Box 2 - put cursor on me

Box 3 - put cursor on me

Box 4 - put cursor on me

Paragraph - jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Ajax Paragraph - Javascript

This paragraph is dynamically injected by Ajax.

jQuery is a fast, small JavaScript library with a lot of features. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

With a combination of versatility and extensbility, jQuery has changed the way that millions of people write JavaScript.

Section Menu
    • Submenu 1
    • Submenu 2
    • Submenu 3
    • Submenu 4
    • Submenu 5
    • Submenu 1
    • Submenu 2
    • Submenu 3
    • Submenu 4
    • Submenu 5
    • Submenu 1
    • Submenu 2
    • Submenu 3
    • Submenu 4
    • Submenu 5
    • Submenu 1
    • Submenu 2
    • Submenu 3
    • Submenu 4
    • Submenu 5
List Item
    1. Item 1
    2. Item 2
    3. Item 3
    4. Item 4
    5. Item 5
    1. Item 1
    2. Item 2
    3. Item 3
    4. Item 4
    5. Item 5
    1. Item 1
    2. Item 2
    3. Item 3
    4. Item 4
    5. Item 5
jQuery Widgets

As per the jQuery documentation, the Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for scripting languages, give "a" (for Actionscript or AppleScript) a try.

The datasource is a simple JavaScript array, provided to the widget using the source-option. Since, it is an Array you can use the push method to add elements at the end of the Array.

The Datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay.

Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.

Date:

Display Characters with References

Many interesting characters are available:

á à ă Æ æ ≈ ≊ α β δ Ω μ © ® ¶ @ $ ¢ € ♂ ♀ ⦿ ϑ 𝒜 ℬ 𝒞 𝒟 ℰ ℱ ℱ … 𝒳 &scr; 𝒵

Accordion

Default Functionality

Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover.

Collapse Content

By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the collapsible option to true. Click on the currently open section to collapse its content pane.

FillSpace

Because the accordion is comprised of block-level elements, by default its width fills the horizontal space. To fill the vertical space allocated by its container, set the heightStyle option to "fill", and the script will automatically set the dimensions of the accordion to the height of its parent container.

Customize Icons

Customize the header icons with the icons option, which accepts classes for the header's default and active (open) state. Use any class from the UI CSS framework, or create custom classes with background images.

Open on Hoverintent

Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover. The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is usable without JavaScript.

BlockQuote

The blockquote element is a mechanism for marking up a block of text quoted from a person or another document or source. It may be just a few lines, or it may contain several paragraphs (which you’d mark up using nested p elements).

The W3C recommendation states that web page authors should not type quotation marks in the text when they’re using blockquote—we can leave it to the style sheets to take care of this element of presentation (just as it should be when the q element is used for short, inline quotations). In practice, though, many authors do choose to include quote marks, as browser support for automatically inserting the language-appropriate quotation marks is extremely poor.

Table
Lorem ipsum Dolor sit $125.00
Dolor sit Nostrud exerci $75.00
Nostrud exerci Lorem ipsum $200.00
Lorem ipsum Dolor sit $64.00
Dolor sit Nostrud exerci $36.00
An example table
Table heading
Column 1 Column 2 Column 3
Subtotal $500.00
Total $500.00
Lorem ipsum Dolor sit $125.00
Dolor sit Nostrud exerci $75.00
Nostrud exerci Lorem ipsum $200.00
Lorem ipsum Dolor sit $64.00
Dolor sit Nostrud exerci $36.00
Login Forms
Forms
Articles

Article Heading

SubHeading

Menlo Park, CA — February 4, 2004

photo As per Wikipedia, Facebook is a online social networking service launched in February 2004, owned and operated by Facebook, Inc. As of September 2012, Facebook has over one billion active users, more than half of them using Facebook on a mobile device. Users must register before using the site, after which they may create a personal profile, add other users as friends, and exchange messages, including automatic notifications when they update their profile.

Additionally, users may join common-interest user groups, organized by workplace, school or college, or other characteristics, and categorize their friends into lists such as "People From Work" or "Close Friends". Visit site.

Article Heading

SubHeading

San Francisco, CA — March 2006

photo As per Wikipedia, Twitter is an online social networking service and microblogging service that enables its users to send and read text-based messages of up to 140 characters, known as "tweets".

It was created in March 2006 by Jack Dorsey and launched that July. The service rapidly gained worldwide popularity, with over 500 million registered users as of 2012, generating over 340 million tweets daily and handling over 1.6 billion search queries per day. Since its launch, Twitter has become one of the ten most visited websites on the Internet, and has been described as "the SMS of the Internet." Unregistered users can read tweets, while registered users can post tweets through the website interface, SMS, or a range of apps for mobile devices. Visit site.

Heading 1

Heading 2

Heading 3

Heading 4

Morristown, NJ — 1 Jan 2013

photo A new company that targets the small startups. We design simple, interactive, and great looking websites, or if you looking to update/ create a Wordpress blog or create a website from a PSD file. Please reach us via contact form. Visit site.

Heading 5

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Heading 6

Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.


View Larger Map