Subscribe:

Friday, 29 June 2012

How To Choose A Web Designer


A little while back I had a bit of a discussion about a certain profession that I will not mention here in case someone from the industry in question takes it the wrong way. Don't get me wrong, every major profession is there for a reason and adds a tremendous amount of value to society. The fact of the matter is that every industry and profession has good aspects and bad. When you think of a doctor, lawyer, architect, accountant, etc, you tend to have a personal frame of reference, as well as a more widely held stereotype. There are usually some aspects of that profession that irritate you, or that you think could do with some improvement. Perhaps you don't make use of certain professional services because of these perceptions, whether or not they are commonly held or based on fact.

That got me thinking about my own industry, and what it is about the internet consulting and web design and development industry that drives people nuts, and that if things were different, people would utilize these services more often. What would people change about the industry if they had a magic wand? What would you do differently if you were, for example, a web developer, to differentiate yourself?

These are some of the things I have been told hold people back when discussing this topic with some small businesses:

- Web design and development is too expensive for the average small business

- Apprehension over how qualified an internet professional really is

- There is too much jargon in the industry, which makes it confusing to assess as a non-technical business person

- There is a shortage of internet programming skills relative to visual design skills in the industry

Personally, my big wish is that a certain level of qualification (a degree combining computer science, design and business) was a requirement to practice, the same way that older professions are required to, like accountants, doctors, lawyers, etc. The low barrier to entry makes it difficult for businesses to distinguish experts from hobbyists. Imagine having to choose your doctor based on what he tells you he knows how to do for you!

So, how then does one assess a potential internet partner, who can and should be a long-time partner in the online success of your business? Here are some things to look at carefully when choosing a web designer, web developer, internet business consultant, or related service provider, from my experience:

Technical and business qualifications and experience. Is the business comprised of an inexperienced person with a web design hobby, or has the business got people with tertiary level business, programming and design skills in-house? Make sure they have real-world business experience in developing e-commerce solutions, and look into how far back that goes.

What online business applications has the business developed previously, and how does this match your requirements? Some web design businesses will give you a very nice looking static brochure site, while others will be able to offer advanced functionality, such as a database and content management capabilities, e-commerce functionality, internet business consulting services, site promotion, site management, hosting, domain registration, design, application development, site optimization, newsletter systems, form processing capabilities, logging of user activity, online surveys and polls, user registration and authentication, advertising management, content syndication, and the like. Check how many of these are optional extras an how many are included in the price you are quoted up front. You should always get a detailed proposal up front, and compare apples for apples rather than being too subjective initially. My business, for example, differentiates by bundling over 250 enterprise-level applications into our small business package, at a lower price than most web designers will charge just for the design and some basic functionality.

Long term cost/benefit. What is it going to cost you the next time you need to make a modification? I've never yet come across a successful website that was designed and left as it was created on day one. Your site needs to change with your business, so make sure you know how you will be billed for those changes, and what the time frame for them will be. Every site also has hosting, bandwidth and maintenance costs that most people don't think of when first creating a site. Look into what these will be, and what you get for them, so that you can budget for them when starting your project. Also keep in mind that a cheap solution with one or two features will probably not serve you as well as a slightly more expensive one with extensive built-in capabilities.

Personal style and preference. Different businesses will bring different styles and methodologies to the party. Make sure that the one you go with suits your personal preferences. If your internet specialist loves graphic-intensive Flash-based sites, they will probably develop your informative content-based solution, just not as well as someone who specializes in your preferred style.

Online promotion. Make sure that the business you choose is good at promoting their own online presence. Google, Yahoo, and MSN are the three most popular search engines, so make use of them when choosing a provider. If you are looking for a web developer in your local area, search for the terms you find most important and include the name of your area. For example, I optimize my services for the Joondalup area of Perth, Western Australia, so a search for "web design Joondalup" or "web development Joondalup", or many other internet-based services, brings me to the top when people are searching for local service providers. An internet business that is no good at promoting itself online will be worse at helping you get yours up to full potential.

Satisfaction guarantees. No website can make a flawed business model work, but an online expert should be able to help you make it everything it can be over time, much the same way a personal trainer can't make you fit overnight, but they can help you become a top athlete with focused ongoing attention. Find out what guarantees, if any, are provided. This is a real differentiator, because, understandably, many web design businesses won't do this. Those that do are at least serious and confident in their abilities to ensure that their clients are happy and successful.

Management of expectations. Any internet business that claims excessive short term success rates is probably overselling themselves. Make sure that they (and you) are realistic about the time frames in which your online presence will start producing results.

Consulting skills. Make sure that you are dealing with an internet consultancy, not just a web design house. Experienced internet consultants have the business experience to help you make your business successful online in ways a web designer will probably not.

Find successful web sites online. Many will have the site developer's details in the footer, or in a credits section of the site.




David Malan is an internet and e-commerce expert with over ten years experience in designing and developing enterprise grade online solutions for business.

He owns and runs RealmSurfer Consulting, based in Perth, Western Australia.

Website: Web Design Perth
About: About RealmSurfer Web Design Perth




Saturday, 16 June 2012

36 Brilliant Icon Shots From Dribbble

Sorry, I could not read the content fromt this page.

View the original article here

Friday, 15 June 2012

Web Design in 2010-2011 - Analysis


As we're coming to the middle of this year, everyone is trying to analyze the recent trends in web designing and web development. However, in this article, we'll see what web designers and developers are trying to utilize with the new features to create impressive designs. We will also try to look into the factors that are driving this change.

1. The days of static design visuals are dead

With the online technology that is available today, web designers are coding websites more creatively than using simple images and html/css. Clients have come to expect a higher level of functionality and interactivity as they visit more and more websites that utilize things like Ajax, and JavaScript. Whilst CSS3/HTML5 has started to step on the toes of JavaScript, JavaScript itself has started to inch into the territory of Flash. JavaScript has just finished a major revision of its specifications for the language. Once browser companies adopt these standards, web developers will be provided with more tools to improve their capabilities in creating web applications.

2. Grid-based designs, Mobile Designs, Retro Designs are gaining popularity as well.

But Grid based is used mostly in portfolios, product pages and big blogs; they almost never appear on corporate websites or in online shops. With the huge amount of data present, classifying information based on context rather than content will be paramount for companies which handle large amount of data (financial, social, etc).

3. Print Design influence

Traditional techniques from print design are increasingly being applied to the Web, be they layout techniques or rich versatile typography. Web Designers are taking layout and design inspiration from print. This includes lots of whitespace, large type,use of a grid and clear hierarchy of elements. The layouts of these websites often resemble those of print magazines or posters, with striking headlines, multi-column text, highlighted quotations, indented text, supporting imagery, side notes and footnotes.

4. Faster and better Web browsers

Google Chrome, Firefox, Safari, and Opera has offered more choices to web users. But, well, it is part of a web designer's job to make sure that texts are easy and nice to read on all major browsers and platforms. With browser wars is in full force, Techniques for progressive enhancement are more commonplace than before, giving users of modern web browsers a better web experience than those who will not or cannot use them. This has surely drive competition in web designing.

5. Growth of community-oriented Platforms

In many ways, the growth of platforms such as Twitter and Facebook has led the web to be much more community-oriented. Along with these changes will come increased focus in getting information in real-time. Twitter is one of the examples that give immediate and breaking information on the sites. With more and more growth of such social media platforms and more people participating in the creation of information on the web, the way in which we obtain information has shift from being from a singular source, into a more community-created source.

6. Interactive Designs

Web designers of Web applications are paying significantly more attention to the way in which functionality is presented and are trying to improve the user experience with more interactive and responsive solutions. There's a lot more emphasis now on site usability and creating sites that are minimalist in design and easy to navigate (perfect use of CSS and a grid based layout). Horizontal scroll bars have been out there for a decade, but today it feels that they are gaining a new context. The move to horizontal scroll bars is probably an attempt among some designers to provide a more distinct user experience. One way to make websites more responsive is through "keypress navigation," which hasn't been widely adopted so far. But lately we've observed more designs implementing this effectively. Web designers of Web applications are paying significantly more attention to the way in which functionality is presented and are trying to improve the user experience with more interactive and responsive solutions.

7. Slab Typefaces

These are relatively new as in the past logos and headers were smaller and more understated by web designers. However, combined with the trend toward larger headers, slab typefaces demand the reader to take notice.

8. Rich and strong Typography

It has played a major role in Web design for years now. Bold, strong, heavy headlines can effectively convey the purpose of an e-commerce website or portfolio, while subtler headings help structure content and improve legibility. Obviously, the big change we're seeing today is richer, more versatile typography. Oversized logos on an equally oversized header and Footer. We've further noticed that Web designers are extending their font stacks, adding increasingly more fall-back fonts in case a specified font is not available.

9. Recent trends

like embossing, PNG transparency, rich user Interfaces, Font replacement, Huge Images, Modal boxes(A modal box is like the pop-up's more sophisticated They serve as a user-friendly alternative to classic JavaScript windows), Media blocks, The magazine look, Carousels (slideshow navigations, in which the content rotates vertically or horizontally), Introduction blocks(place the most important message of the website right there and thus make sure that readers get the message as quickly as possible.) will continue to grow in this year.

10. More Personalization

As web designers look for more ways of attracting users and prospects to their websites and generating business online, personalization is emerging as an important component of managing the web experience for site visitors - and delivering business value. Be simple, invisible complexity, big and bold, art and creativity, bigger picture. Web Typography is going to reach some new heights in 2010-2011. JQuery, Mootools as well as CSS3 are evolving and reaching new levels of quality and 'interactivity'. Everything seems to be moving forward to larger elements which focus the attention.

If you haven't checked out CSS3 and HTML5 websites yet ( like http://www.12thi.com ), you should really look into it because they will change the way you design and code. You can take advantage of the new features to create cleaner and more efficient layout.

It is possible that we have missed some other great trends and factors. Why don't you contribute some interesting information here? Please don't hesitate to share it with us in comments.




Maryam Naqvi
(Journalist and Freelance Writer)




32 iPhone App UI Shots from Dribbble Members


User interface designers have begun the transition to working with mobile interfaces. iPhone apps are more popular than ever before and we’re seeing a huge uptick in the total numbers published for the app store. Inspiration is a huge piece to the iOS design framework.

In this gallery I’ve put together some recent Dribbble submissions for iOS interface design. These shots include tabbars, title bars, gradients, textures, buttons, and other key interface elements. You can gather tons of inspiration by collecting these ideas together and pooling your own resources. Be sure to let us know your thoughts in the post discussion area below.

iPhone sketch web app design



View the original article here

The Difference Between Web Design and Web App Design


With iPhones and other smart phones steadily taking over the big wired world, the development of iPhone applications, or apps as they are affectionately called, are the hot new things that all businesses are focussed on developing in order to take their marketing campaigns to a whole new and infectious level. However, as people all over the world catch on to the business of app design, it's important to differentiate application design from website design which can be a common mistake.

To begin with, let's take a look at what is meant by website design. The term web design essentially refers to all the processes of creating the visual elements of a website such as its graphics, layout and content. The process of web design involves the provision of a complete outline for the visual appearance and mood of the web page. Web page design can sometimes, but does not usually include the creation of web codes. Rather, web design is concerned with devising and presenting all of the content that will be visible to a visitor to the site.

To explain the differences between website design and web app design, it's necessary to understand what a web app is. Although an application relies on the internet, it is not strictly speaking a website. Rather, it is an application that utilises the technologies of web coding, such as HTML and JavaScript and serves a role closer to a software program, except it can be run directly from a website or downloaded and installed locally for use off-line. In it's similarities to software design, the process of web app design is more the domain of web design and development combined. In contrast to web design, web development refers to the processes entailed in the creation and compilation of web code and the programming necessary for the website to have the appearance and functionality intended by the web designer. Therefore, while website design determines with the visible look and mood of the website, web app design is concerned with the preparation of hidden display mechanisms and operational capacities.

Although these initial definitions may not seem too different, website design differs to app design because applications differ to websites in several important ways. Firstly, they are self-contained items, as opposed to websites that are designed to encourage browsing across pages and following links.Web app design is concerned with the integration of interactive user interfaces and advanced device capabilities and technologies that web design does not touch on. Web page design and websites in general are more orientated toward providing information, whereas web app design prioritises the status of applications as an action-orientated tool designed to serve a specific purpose.




Contact Infinite IT Solutions for professional web design in Melbourne. Infinite IT Solutions is one of the leading companies who provides for web design, online marketing service, seo service and web development in Melbourne.




Case Study into CSS3 Effects on Popular Websites


It doesn’t seem like the many CSS3 standards are so “new” anymore. Web designers have been implementing these properties into most of the new layouts I run into. Rounded corners and text shadows are commonplace for the modern web.

I want to use this article as a small case study into CSS3 effects. I’ll be examining some big-name websites and how they are building unique web interfaces. The techniques are not exclusive to any single entity – and it’s actually simple to put together some code of your own. But it is my hope these examples can spur new ideas in budding developers.

In this scenario I’m actually not talking about their voting badges. Actually I noticed that Digg has setup a new follow/unfollow button which appears next to each username. It’s also on every profile page when you are logged into an account.

Digg follow button for v4 layout

The button HTML code is using a simple anchor element with the link. The whole button interface is created using CSS properties. The border radius and background gradient is all hard-coded. We can actually build a similar button using much of the same CSS. Check out the code below:

.bluebtn {display: block;font-family: Arial, Helvetica, sans-serif;font-size: 12px;text-decoration: none;letter-spacing: -0.03em;line-height: 1.25em;overflow: visible;padding: 5px 8px;max-width: 200px;cursor: pointer;outline: 0;font-weight: bold;text-align: center;text-shadow: 0 1px 0 white;color: #6788A6;background: #cfdff1;background: -moz-linear-gradient(top,#f0f4f8 0,#c6dAf1 100%);background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#f0f4f8),color-stop(100%,#c6dAf1));background: -webkit-linear-gradient(top,#f0f4f8 0,#c6dAf1 100%);background: -o-linear-gradient(top,#f0f4f8 0,#c6dAf1 100%);background: -ms-linear-gradient(top,#f0f4f8 0,#c6dAf1 100%);background: linear-gradient(top,#f0f4f8 0,#c6dAf1 100%);border: 1px solid #b9cce3;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}.bluebtn:hover {background: #cfdff1;background: -moz-linear-gradient(top,#f0f4f8 0,#d2e3f6 100%);background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#f0f4f8),color-stop(100%,#d2e3f6));background: -webkit-linear-gradient(top,#f0f4f8 0,#d2e3f6 100%);background: -o-linear-gradient(top,#f0f4f8 0,#d2e3f6 100%);background: -ms-linear-gradient(top,#f0f4f8 0,#d2e3f6 100%);background: linear-gradient(top,#f0f4f8 0,#d2e3f6 100%);}

This is so simple to implement, yet it builds such a powerful button. This effect should render properly even in the latest version of Internet Explorer and Opera browsers. The fact that we’re using an anchor link instead of the button element gives us more control over the styles.

But theoretically you could use this as your standard link by resetting the display to inline-block. Then all your paragraphs would be littered with blue buttons. With these styles added to your page you can setup a blue link btn just like I have in this code example:

my button

Another favorite website of mine is Dribbble which is full of new CSS3 effects. One that always strikes my interest is the box shadow style you can notice on every shot.

Dribbble home page box shadows with css3

And this isn’t just a scenario with Dribbble. I have noticed this effect on a few other websites as well – blogs and showcase galleries mostly. But I do remember first running into this design on Dribbble a year or two ago.

If we look into the code the whole setup is very basic. The layout actually uses an ordered list to display shot photos and user metadata. But if we want to build a simple white box with a text-shadow effects the CSS3 code is a few lines long – very minimalist.

.box {display: block;padding: 4px 5px;background: white;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);}

The difference between this basic example and Dribbble’s design is the original background color. Setting a white box with a drop shadow onto a blank white webpage will not look as spectacular. Try a few different color schemes faded out into a light grey shade.

I am also a big fan of new startups popping into the tech scene. Pinterest is one such example which has built a cult following of sorts – possibly because of their invite-only system for registration. The layout runs much like Tumblr where users can share and repin photos.

Pinterest Register Invite and Login buttons

Their buttons are the first thing to catch your eye. Both hover effects and solid-state default designs are incredible. Their gradients and text shadows alone are worthy of your attention. But another page that I love is their custom login form.

CSS3 input shadow effect with forms

The input fields feature a really cool box shadow effect. Whenever you focus onto a field the label text will dim and a new outer box shadow appears. They are using transition properties in CSS3 to make these changes happen. It’s such a unique setup, and truthfully I haven’t seen any other websites doing it like Pinterest.

The old Vimeo web layout was brilliant. But recently their design team has jumped on the task of rearranging the entire layout. This has created another fantastic avenue for web design inspiration.

Alternative CSS3 button effects on Vimeo redesign

One piece I’d like to point out is their new green registration button. You will only catch this if you are not logged into an account already, once you visit the home page. The hover effect animates an outer glow and brilliant shiny green gradient. You can see these properties below:

.btngreen {background: #a8cc5e;background: -moz-linear-gradient(top,#a8cc5e 0%,#75a851 100%);background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#a8cc5e),color-stop(100%,#75a851));background: -webkit-linear-gradient(top,#a8cc5e 0%,#75a851 100%);background: -o-linear-gradient(top,#a8cc5e 0%,#75a851 100%);background: -ms-linear-gradient(top,#a8cc5e 0%,#75a851 100%);background: linear-gradient(top,#a8cc5e 0%,#75a851 100%);-moz-box-shadow: 0 0 35px #fff;-webkit-box-shadow: 0 0 35px #fff;box-shadow: 0 0 35px #fff;}

But aside from this button there are so many other interesting page elements. Their new UI has really stepped up competition to another level. A particularly interesting design on the page for exploring video archives features their new header navigation and dropdown links. Not to mention the fascinating text styles for paragraphs and headers.

Hopefully these examples can provide evidence of the growing trends in web design. CSS3 has changed the way we build interfaces. Images are slowly dropping out of context, and you can perform much of the same Photoshop-esqe designs right inside your browser.

Surely some CSS developers will love these case studies I’ve included. But there is no way I could touch upon every major website. If you know of similar designs feel free to share with us in the comments below. Or alternatively you can add your own code which developers could play around and build with.



View the original article here

Thursday, 14 June 2012

Being A Freelance Web Designer - Pros and Cons


Being a freelance web designer in Sydney, or any city for that matter, is tough. There are many pros and cons which I'll try and cover in this article. Over 10 years of working in Sydney, I have come across a number of factors which may help you, if you are (or you are thinking of) becoming a freelance web designer.

Pros of being a Freelance Web Designer in Sydney

You can be your own boss - Being your own boss can be a great thing. You make your own hours... you answer to yourself and you choose which clients you work with. Being a freelance web designer means you also have to be very disciplined. You need to push yourself to get the work done, but also make sure you aren't overdoing it, and working all hours of the day and night. Most freelance web designers I know suffer from the latter! Taking regular breaks and finishing at a reasonable hour is as important as making sure you start work in the morning and don't slack off.

You can choose your clients - Being able to choose the client you work with means that, most of the time, you are working on jobs that you enjoy. I'm sure most web designers have worked for a client they just don't click with. It makes for a long, tedious process during the project and is not fun to work on. A web designer and their client should have an understanding that they're working together. If they are constantly bumping heads and clashing on ideas, it will make the job hard to work on. So, my point is... as a freelance web designer in Sydney, you don't have to work for those clients. Choose clients that you will enjoy working with. This way you enjoy your work, create a better design and the client gets a better result.

You can charge what you want - This statement is not totally true... you can only charge what you're worth and, more to the point, what the client thinks you're worth! However, if you are a skilled designer you have the freedom to charge clients what you are willing to work for. Some jobs may be tedious and not very enjoyable to work on, so, charge more for those projects than what you would for something that is exciting for you. It's totally up to you.

You have creative freedom - Having creative freedom is vital when working on a project, as every freelance web designer should know. Design comes from within and it is all left to interpretation by the viewer. You need to have freedom to create something from nothing as you see it. Being your own boss means you don't have any marketing department or micro manager analysing your every move. You are free to design to your hart content.

Cons of being a Freelance Web Designer in Sydney

Larger clients may not find you - Being a freelancer means you don't always have the means to present yourself to larger clients. You may not be able to get your website ranking against the larger players, or you can't afford to go for the pitch. Quite a few larger businesses may be apprehensive in employing a freelance web designer. This is because there is no security and they would be taking a risk when employing you - you could just up-and-leave half way through the project or (touch wood!) get hit by a bus and the client would be stuck with half a website.

You need to manage yourself - Not all web designers have experience in management. Even if it is only managing yourself. There are many aspect you need to consider as a freelance web designer, other than just designing websites. Most of us would like to only worry about what concept we are going to go with or which colour scheme and imagery we are going to use but, unfortunately there is a lot more to running your own freelance business! Managing yourself involves:

Taking care of your own accounts. i.e invoicing, paying bills, paying tax... Not all of us can handle this at first, as we're not accountants. One thing I would recommend is utilise the services of a bookkeeper. There are also some websites and programs out there which can manage billing for you.
Liaising with clients. As a freelance you don't have the luxury of an account manager or art director dealing with clients. You need to keep your clients up-to-date at all times and this includes chasing up invoices.
Managing your time. You need to keep track of how much time you are spending on projects. This is very important - you may have quoted for 32 hours work but if the job takes you 48 hours, you're cutting yourself short. You also need to make sure you are splitting up your time evenly between projects. It's OK if you're only working on two, three or four jobs but if you are working on ten, fifteen or twenty, you may have trouble.

You work in a solitary environment - This does not always have to be the case. There are shared offices around where you can rent a desk or small room. However, most freelance web designers will probably work from home by themselves. That may sound good but it can get lonely. Not only that, you don't have anybody to reflect ideas off or help you with the workload.

You need to find your own work - This is crucial. If you have worked in a web design agency or studio before, you would have been given a brief by the art director, account manager or sales team. When working for yourself, as a freelance web designer, you need to find you own work. Even if you're busy working on lots of well paying jobs right now, you still need to be thinking about three to six months down the track. This also crosses over with your time management - you will need to factor in time to your schedule to look for more work.

Overall, being a freelance web designer in Sydney can be a very rewarding job, both financially and for your lifestyle. As long as you have plans in place to manage the negatives, the pros far outweigh the cons.




To read more about freelance web design in Sydney, web development, seo and small business, please visit Justin Robert's website here - Web Designer in Sydney. You can read his personal blog here - Freelance Web Designer.