Touch Taboo » web design

7 Excellent Tools To Speed Up Web Development

Nathan — Tue, 10 Aug 2010 12:01:13 +0000

Nowadays, there are many tools that aid quicker productions in web design and web development. There are lots of utilities and tools that improve output quality, make developments faster and reduce debugging for your websites to make them even more efficient. These programs may be used for free or with a little charge. They range from CSS generators and editors, to HTML editors and other program languages.

Here are some tools that would help increase the efficiency of your sites:

CSS Grid Builder

Developed by Yahoo, this web-based program will enable you to make a code for the page lay out of your sites in just a very short time.

Venkman

This could be installed as a plug in for Mozilla Firefox browsers, making JavaScript debugging easier. It is also compatible to other browsers, namely, Netscape and Seamonkey.
Setting break points and marking or checking JavaScript codes will be made easier through this program, because it uses a GUI, or a graphical user interface instead of just plain text.
It gives you a GUI for stepping through JavaScript code and setting break points.

CSS Sprite Generator

This application will help minimize HTTP requests for the images, thus saving you more time from coding manually. Uploading images (for the layout)
in this application is possible, provided that all necessary files are compressed and saved as a .zip file. You need a file compressor for this (winzip or other compression tools).

JavaScript Code Improver

This application will help you format and clean up your JavaScript faster. This is the best application to use if you want your JavaScript to be standardized.

DOMTool

With this application, creating DOM statements has never been easier. Not to mention it can also save you time, as it will just be a click away. The concept of this application is similar to copy and pasting, where HTML codes shall be copied to this application for it to create the DOM statements.

JSUnit

This is made to test whether your JavaScript has errors. Normally, testing would take a considerable amount of time, but this application tests JavaScript in a simple and automated manner. Hence, checking JavaScript for discrepancies will be easier compared to other testing programs.

Test Everything

This is a website based application that enables you to conduct multi-purpose testing, thus saving you time from using several online services and validators. This website incorporates a hundred tools into one, so that users can maintain their sites with convenience. Validate XHTML, check page rank and test your designs for browser compatibility, and others– name it, this site almost has it all. You can do several things in just one site and maintaining your domains will just be a few clicks away.

Whether you are office-based or a freelancing web development or web design experts, you need several tag team partners to maintain your domain and make it more efficient. There are more website based applications available according to your needs and preferences. Some may charge and some may be free.

But what matters most is your dedication to make your site become at its full potential. These programs will just help you save time, and effort.

Good luck in exploring the CSS and HTML realm, and make your site as efficient as is could be.

Selecting A Designer Is A Piece Of Pie

6 Essential Questions To Ask Your Client

Nathan — Wed, 03 Mar 2010 09:19:31 +0000

Photo by oberazzi

When I get requests to develop websites, they come in all shapes and sizes, different businesses require different things. I aim to tailor each solution to each client. Some clients have a look at the portfolio and like what they see. Naturally, this fills me with joy. I love both criticism and praise, it helps me grow as a designer. The client then decides they want something similar for their site.

While it is easy for me to replicate a style of work I have done before, I advocate to each client that this design may not be the perfect fit. No one wants to spend all day trying to fit a triangle into the mould of a circle.

So, here are a few of the questions I get my clients to answer.

How much do you know about web design?

This is purely so I don’t end up communicating in a way which is too ‘techie’. It also works out good either way; if a client knows a lot then they can let me know exactly what it is they want. If not then it allows me more creative freedom as a designer.

Could you tell me the type of services or products your company provides in as much detail as possible?

It is important to outline the specifics of exactly what the business provides so the design and development can be geared towards these services.

What is the main goal of the web site? (what would you like your customers resulting action to be)

Similar to the above, if you want a subscription then the website will focus on that. Some clients want to be called, others want to make a sale. Whatever the message, it needs to be clear early on to the visitor.

How many pages do you think it will take? Give your best guess

It is important to define the scope of the project. This will make it easier to give a quote and to estimate the duration of the project.

Do you already have graphic images, graphic logo, photographs, etc. that can be used in your website?

The client can definitely lend a hand in this department, as any media lying around will be relevant to the business and will presumably have any relevant branding already there. Branding is about recognition, no one wants to recreate the wheel.

Do you have a colour scheme or just a general idea about how you want your website to look? If so please describe.

This is important to avoid redundant designs in the early stages. Some people know exactly what they want down to a t. Others are more laid back. Either way for a designer it’s very helpful to learn early on as time is at a premium!

Selecting A Designer Is A Piece Of Pie

Nathan — Sun, 21 Feb 2010 21:48:51 +0000

Any owner of a small or budding business will tell you that there is a lot on the table that you have to deal with. You are constantly assessing where your business really stands financially. You have to analyse your resources, dangers, profit and loss. Deal with staff, accountants, clients and family, and all this while trying to drum up new business for the long term.

Now you want a website. Not only do you want one, but it must be professional. All or nothing, your business doesn’t do things half hearted. As a small business, without being too web savvy, it can be difficult to find a web designer / developer who can take on the load of a professional website without needing too much direction.

So, when choosing a designer it is import to consider what it is you need and how much freedom creatively you intend to allow them. Most businesses require an end to end service from website conception down. Some already have a site but simply require a redesign to remain competitive or to add new functionality to the site. Not everybody wants the added stress of developing a website; you may want to just oversee developments behind the scenes.

If your business wants to take the next step to online media then consider what it is you need.

Website Redesign – What Have You Considered?

Nathan — Sat, 20 Feb 2010 06:59:13 +0000

Websites can be looked at from many angles. If you ask the opinion of a designer, a coder and a marketer what they think about any given website, they will each offer you a different perspective; and for good reason too. They would question their area of expertise, mulling over aspects of the site that the others could probably even consider irrelevant.

These views are of course important, and it is equally important that each area is implemented well, but as a site owner, what you should focus on is usability. As that is the area of expertise for the end user.

If you consider the reasons an individual would visit a site it is always to serve a function. This function usually revolves around two things, getting information, and purchasing products. There are others such as online games social networking etc, but I’m thinking in terms of simplicity for a small business.

Of course this means that in for any website, the core content is king. And some people will definitely be aware, that a site without a solid foundation of content will not attract hits no matter how much you tart it up.

I’d like you to think about this. How many times have you heard someone say that they just don’t like the ‘feel’ of a site? That something just ‘isn’t quite right’. It’s just a bit ‘clunky’ or makes them ‘feel restless’.
As a web designer I get these calls often from friends about sites they have stumbled across. The funny thing is that the design of a site in all probability has nothing to do with the services offered by that site. It is, of course, merely the look and feel that the designer chose to use at the time of creation. But, it could be the turning point when a potential customer is considering using the services, or buying a perfectly good product!

A good design will reap benefits in terms of user experience and when retaining the user for a subscription, sign-up, purchase or whatever. It makes the user feel comfortable. This is achieved by using an eye catching design which is consistent with the content.

Information should be laid out clearly in an easy to read manner in a way which suits everyone you regard to be in your target market.

Your site shouldn’t look like every other site because your business isn’t like every other business. It should reflect the uniqueness of your services.

Good design is easy on the eye. Great design conveys a message. That message should be along the lines of, ‘we are different’, ‘we are professional’ or ‘we deliver such and such a service’. The message must match up with the content, which must match up with the business. A colourful theme for a children’s site, and a classier style for that of a lawyer.

Think about any site you have visited over the period of a few years. They have most likely undergone some kind of redesign. IGN springs to mind. This is not necessarily because their message has changed, they still concentrate on games, but more likely due to a need to refresh the message so it stays modern and relevant to their core audience.

The aim is to create an impression in the users mind which lasts, consider this when giving your site a makeover and you could be on to something great.

How To Create A Slick, Modern Website Mock-Up In Photoshop

Nathan — Thu, 11 Feb 2010 01:29:47 +0000

I think it’s time I started writing a few tutorials so here goes. We will learn how to make a simple colourful, professional web layout in Photoshop. I design my sites with the CSS in mind so typically this design should be easy to turn it into html and we won’t have a coder tearing his hair out. Anyway, enough talk.

Here’s what we want to end up with:

Step 1

Create a new document with a width and height of 1200px:

Step 2

We need to know what kind of dimensions we are working with in terms of the actual content. I usually go for around 900px, as today isn’t particularly special, that’s exactly what we will use. We therefore need a margin of 150px on each side. so go to the View >> New Guide. We will create 4 guides, vertical 150px and 1050px and horizontally the same values.

Step 3

We will use a very dark grey as the background. Click the ‘Create new fill / adjustment layer’ button in the bottom corner and select Solid Color.

Step 4

Now using the same menu select Gradient and create a gradient similar to the one below:

Step 5

Select the layer mask for the gradient layer we just created. Now using the selection tool and the guides we made earlier, delete the top and bottom margins on the layer so the dark grey is visible like below.

Step 6

Now create a new layer just above the gradient layer. Then right click it and create a clipping mask.

Step 7

On this layer, using your favourite set of abstract brushes, add some random shapes and stuff to give our website background some edge. Set the layer style to Overlay.

Try Brusheezy, Qbrushes or here for a few abstract brushes.

Mine came out as below, before I set the layer style as overlay. I also added some text for where the website logo would be.

Step 8

Next we want to create an area for our website banner image. So using the guidelines we created earlier, create a selection with a height of about 300px from the top of the content area and fill it with black.

Step 9

Right click this new layer (Color Fill 2) and go to Blending Options. Turn on stroke and give it a 1px white inside stroke. Then move the layer up by 1px to align the top.

Step 10

Now we are going to create an area for the rest of the website content. Duplicate the same layer and place it directly below. Align the top of the new layer with the bottom of the previous one. Then stretch the layer so that it reaches the bottom of the content area. We should have something which resembles this.

Step 11

Set the fill on this layer to 15%. This will make the background more transparent without affecting the stroke.

Step 12

We will now make the website menu bar. Duplicate the layer we just created (15% fill), but this time move it to the top just above the content area and shrink the height so that the bottom matches up with the top of the banner. Then change the colour to white so that we lighten the area underneath.

Step 13

Just to add a little gloss, create a new layer above the menu bar. Make a selection like the one below which covers the top half of the bar. Fill this with black, then make the layer a clipping mask of the layer below. Set the fill to 15% again.

Step 14

Add some text for the menu items and we should have something like this.

Step 15

Now add a heading and some place holder text below the banner. I used font Segoe UI sizes 32px and 12px.

Step 16

We are going to split the content area of our site into 3 parts, so we will need two more guides placed vertically at 450px and 750px.

Step 17

Now that we have our guides, select the line tool and place 2 lines, which will act as separators, in the blank content area.

Step 18

Breathe slowly, our design should look like so:

Step 19

Now we are going to move a little bit faster. Create three headers for our three sections. Then, create a new layer and using the selection tool, create a box for one of the blank sections below and fill it with black.

Give it a white internal stroke of 1px, centre it, then duplicate it for the other two sections. Add some place holder text underneath, and voila:

Step 20

Small adjustment, I think the design in the background is a bit too prominent. So go back to the layer which has the design (layer 1, should be masked above the gradient layer) and set the opacity to 60%.

Step 21

Add images! I did a quick search on Flickr (for licensed images of course) and found some great abstract stuff. So I added these as clipping masks to the banner and the Services etc. sections of the content; we should end up with something like the below!

Great Stuff.