Verecom Web Design Blog

Coming to the point spot on, a web design company from Sydney would impart your website the following attributes to ensure superior website development by Sydney standards.

Logical and intuitive navigation

A neat and easy set up of internal links for browsing within the website determine the adhesiveness of your site. In other words, the ease with which a visitor can navigate across all your site’s web pages and come back to the home page, determines how much time he/ she would spend on your site.

Neat Layout Design

This is again critical. Keep the site layout such that it looks neat [hint: may be use white space a lot], maintains main focus on content and uses fonts that are generally available across computers worldwide.

Best website loading time

The shortest it is, the better. You can achieve better results by keeping graphics, flash and scripts to minimum; HTML & script code optimization; using Server Side Include (SSI) files wherever possible.

Pure CSS Programming

A contemporary web design in Sydney has moved beyond tables-based websites. It is in vogue to go for website development in Sydney using pure CSS programming, as it extends greater control over web design, reusability, accessibility and significantly lighter in file size.

Edited By Verecom Team

It is universally acknowledged at present that the web design of your website is extremely vital for the proper impact of your online presence. Your enterprise may be of any size or belong to any business area. Few aspects well taken care of would put your business right on track for success and speedy sales. And the good part is that web standards are equal everywhere for good web design, be it Sydney or Sri Lanka.
So, whether it is website development at Sydney or Somalia, you need to start with good ingredients. Quality of content, articles, images and efforts towards online marketing – all together make a website worthy of acclaim.

Another commonly committed blunder takes place during the designing phase. Ideally, it should constitute of many sub-phases, like identifying of a unique concept, building of the prototype, testing and upgrading. Only once a satisfactory and impactful design is finalised, should the development begin.

For designers, you may try designing the website from inside towards outside rather than working at it conventionally. Doing so, you will find it more convenient and fun to design the entire website step by step.

When feeling out of ideas, seek inspiration online or sketch something. Looking up magazines, newspapers and other offline media may also lend a spur of fresh ideas.

Edited By Gary Smith

404 error page “not found” page is not another way to say “server not found”, it is able to connect to the server but just unable to find the requested page.

You don’t want your visitors think it is the dead end, 404 error page needs to be taken into consideration to offer a more comfortable user experience, so you need to provide a way out.

A custom 404 page actually tells your visitors that you are not ignoring their request, but you are directing them what is next. Here is a list of things you can improve your 404 error page:

1. Help people go back by placing a “go back” link
2. Inform about the problem
3. Enable a life-saving link to continue visitors’ browsing from that point.
4. Place “previous visited page” tracker
5. Make an additional page, personalise your page

Effective 404 error page design

Users normally use their mobile to read, search, download and communicate at odd times. There are things need to be taken into consideration in the early stage of design.

In what state do users operate (understand the core needs and use pattern of users)

How to display message in a way that easily attracts users’ interest (screening suitable layout for mobile display)?

Why do users choose mobile to browser websites (analyze differences between web application and client application positioning)?

Mobile terminal user intended usage, operation behavior and potential difficulties are far more complicated than client side sitting next to a desk.  Quoting a graphical report released by Harris on study of mobile usage pattern, we can know more interesting mobile internet user behavior.

iPhone applications have three classifications: Efficient type application, utility type application and immersion type application (for detail, see iPhone HIG). Different product positioning will produce different design strategy, which may affect user interactivity.

Less is more design principle

Mobile application should follow less is more design principle, easy to interact, clear reminder or feedback, less demand but precise action.

Clearly define Application Definition Statement for mobile usage scenario, help user concentrate in obtaining information and finish current task.

For page design, you can try to summarize the core functions using simple sentences. If you find it hard to summarize in a simple and precise way, that may increase user understanding cost and memory burden.

Touchable interface requirement should consider links and widget size. Take iPhone 3GS as an example, a suitable size for finger is 44x44pix; according to variation of gesture weight, iPhone widget responding area should be between 22x22pix to 55x55pix.

High-end design spirit

What is the sort of high-end experience that brings pleasure? iPhone is an excellent representative of the mobile phone industry, but I prefer to consider it as an “art”. Its design elegance can be seen throughout every curves and material, as well as the design of the apps. Likewise high-end experience designer must treat it as a piece of art from the beginning to the end.

Balance between platforms

Touchscreen designs are mostly seen on iPhone and Android platform, (Symbian v5 is still restrained by keyboard, therefore is not counted as design target). Adaptation of different platforms needs to have balance between different software and hardware, in order to improve the interactive experience and system operation habit.

For example, iPhone only has home button (navigation is done through interface) no menu style, single page for single task. Android interface remain the back, menu, home and search functions.

If a more sophisticated design want to be achieved on Touchscreen, comparing Android-chrom and iPhone-safari, Android version is more complex, to ensure the unity of design, it often comprise the lower version, which makes it less attractive than Apple.

To pursue a higher level experience, you need to pass UA (user agent) in order to match different platform.

You must have come across some slow loaded websites. They make you leave earlier before the whole page content loads. This week I want to start from <a href=”http://www.verecom.com.au”>optimizing logo image</a>, to ensure essential elements such as logo is loaded in no time. Below is a list I will be discussing in the following weeks:

• pre-load logo image: logo image and background should be the first elements displayed on the website, avoid empty space and without background;
• combine logo into background: to reduce page requirements;
• optimize compressed logo: keep the file size to the minimum;
• define alt text for logo image: increase page usability and compatibility;
• define logo size: to improve browser rendering efficiency;
• turn off logo tag: to improve browser rendering efficiency.

Pre-load logo

Before anything else, load necessary images first: in this way, logo can be displayed first on the page (unless you do not want it to show first). Google homepage uses this method to combine logo and background, do a right click on the logo, you can only view background image, but not logo as a separate image. On the search page, the original image around logo should look like this:

Images around logo

Optimize compressed logo

1. png8 is the first choice
2. fireworks does a better job in compress image than photoshop
3. at last, compress with dedicated compressing tool (e.g. PngOptimizer)
4. if you do not have this tool, install firebug onto firefox, then install page speed, as a performance analyzer, and directly save compressed image.
5. too complicated? Go for online compressing tool then http://www.smushit.com/ysmush.it/.

From the user point of view

Information design
For an interactive designer, whom needs to collect information on website content, positioning, target audience, and also a closed collaboration with the content provider in order to produce a appropriate solution with matching visual representation.

A former procedure to produce a solution is: Useful -> Ease of use -> Want to use

However most of users do not have the knowledge of graphic design and usability design, so their judgment on a website is heavily relying on the first impression, which therefore brings the visual design as a prerequisite, therefore visual design should not be overlooked.

Visual design
Visual design consists of use of colour scheme, texture, text and image and attention to visual detail. Successful visual design can create a powerful first impression to the user, but if colour scheme is over colourful, and too many textures applied on buttons, may leave user an impression that the website is not professionally designed and not reliable, as a result, they will not come back again.
Ultimately a website is to deliver an overall impression, and visual plays a heavy role.

Other factors
Stability is another consideration for the quality of a website. 404 error page should not appear on the website, and all functions should be tested before launching.

Edited By Dan Li

Visual design is not my profession and strength, but recently because of work, I kept thinking about this topic. So I might as well explore the factors that determines the quality of a website, hoping to give some feasible design guideline.

What is so important about quality?

Quality can improve credibility and reliability of a website, which then gives your users a good first impression, initial trust.

Ordinary users do not understand user experience, nor colour dimensions, even the quality are not their concern, but they evaluate a website through the first impression.

1. What does this website do?

2. Is this website credible?

3. Is this website professional?

It only takes a few seconds to leave the first impression to the users: is this website worth trying?

Within the few seconds, users certainly not have the time to read the long-winded “about us” article, nor do they bother to experience the interaction process through searching, shopping and registration.

So what affect user decision within seconds?

1. Branding and reputation – you may not find the visual attractive, but if you have enough reputation, e.g. “as seen on TV”, that may help to stay longer.

2. Channels – user may enter a particular website through other sites they know well, for example links in eBay or partnership sites, though the website itself lack of reputation, but through its friend sites, it could affect user decision.

3. Content, also the base – a few seconds, user can skim through and get the idea of what this website does and if it fits what they need. Headlines, bold letters, pictures and price, all are helpful for user to make judgement.

Now in some companies, content and brand strategists are recruited to plan columns and contents.

Edited By Dan Li

Microsoft Windows user experience design principles:

1. Reduce concepts to increase confidence
2. Small things matter, good and bad
3. Be great at “look” and “do”
4. Solve distractions, not discover-ability
5. UX before knobs and questions
6. Personalization, not customization
7. Value the life cycle of the experience
8. Time matters, so build for people on the go

(Source: http://msdn.microsoft.com/en-us/library/dd834141.aspx)

iPhone human interface design principles:

Figure 1 http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.html

1. Metaphors

When you design applications, please learn about the existing metaphors in iPhone operation system, and do not redefine these metaphors.

2. Direct Manipulation

With multi-touch interface, iPhone users can enjoy a high level direct control over the operation system. Using gesture to communicate with the object gives user a feeling of control, as they do not need any media in between, such as mouse.

3. See and Point

Users no longer need to remember the steps of an application, because now the design is more intuitive.

4. Feedback

Besides seeing the result of their operation, users also need to have an immediate feedback from their action, especially in an application that takes long time to take effect.

5. User control

Let users initiate action and control behaviour, but not the application. Keep actions simple and direct, so that users can easily understand and remember them. It is best to adapt standard command or familiar user behaviours.

6. Aesthetic Integrity

Users expect a nice interface appearance, promise interests and encourage discoveries. Make sure your interface design elements are delicate in the application, so that they can provide a unify experience.

Edited By Dan Li

It is worth noting: the design principle is an aid rather than a base for creative ideas.

It is helpful to use design principles to screen on all sorts of ideas, but if it gets too adhere to these principles, or even just to design around these principles can destroy creativity. Although it seems secure to brainstore design ideas within the framework of the principles. However, if we are confined by that, it is difficult to come up with surprising ideas.

This kind of idea is bound by specific principles. it is easy to gather different inspirations to enrich it.

The main points of design principles:

1. which is built on the basis of design research
2. it is concise
3. it is memorable
4. it runs through the entire design
5. it should be “easy to use”
6. it results from different sets of ideas
7. it is not self-contradictory

Finally, let’s share some examples of design principles once again:

1. quick, eye-catching, the use of pleasure
2. with a simple way input information into the calendar
3. it is more than just a calendar (memo to reminder and other functions)
4. easy to share, you can easily see your entire life schedule

Edited By Dan Li