Law Firm Site Review

Introduction

Tedioli is a law firm in Italy specializing in agricultural law, health general civil, sales commercial practice, insolvency and corporate law services. The website is extremely simple but communicates effectively to the end-users.

Form

The menu and layout is simple – cool. It might be a good idea to make the menu stand out more by adding background colors, more pronounced mouseover effects…etc. This is not critical because the current system is already quite functional. The display, however needs to be re-looked. The varying image widths on the right causes the entire table to stretch and contract. They author might want to work on the image sizes or even replace them by adding quick links or texts.

Function

The content of all the pages is short and sweet – good. Long stories tend to bore people easily. The images used in the site need professional help and some are inserted inappropriately. We would also like to see more images relating to customer services. The keywords in the header image could be extracted so that they are visible to the search engines. The author might therefore want to use transparent gifs instead of jpegs for the headers.

The news page should only contain news and not other things. Putting links, judgements and other sections there is not a good idea.

Because of the nature of the industry, we would expect the site to be content focus. All design elements in the site should sell the content and not distract users from reading it; We were particularly distracted by the animated gifs used in the website. As the site is not convincing in terms of its design, the company might want to consider adding a testimonial section with customer faces and quotations to boost the user confidence in the company.

Conclusion

The site is simple and is able to convey its messages easily across to the end-users. However, as a commercial law firm, we would expect some level of professionalism in their website. More work could definitely be done on the fonts, images and layout.

www.tedioli.com.1

www.tedioli.com.2

Visual Orange Internet Marketing

Introduction

Visual Orange is a Web Design, ailment Internet Solutions and Marketing company located in Thailand. They specialize in web based solutions for ebusiness, targeting small to medium sized companies.

Form

When I first entered the site, my first impression was that the site had a common corporate look and that it was well planned and designed. My eyes were drawn to the striking words(logo) on the top left hand corner named “Visual Orange”. The word “Visual” seemed to be emphasized and that made me think I should be expecting something visual… I then zoomed out and look at the site as a whole. The second part that caught my attention was the credit card icons in the payment section. I think exposing the payment procedures on the front page is not a good idea. It might give people a negative impression of the comapny.

I started looking at the content which bored me easily after some scrolling. I have to agree that long text is good for SEO but bad for the end-user especially when it is in the index page. Maybe it is just me or the design of the logo, I am waiting to see some strong graphics or surprises which I cannot find any.

I like the spaciousness of the layout but what impresses me most is the profiles of the employees at the top right hand corner. I am not sure if I like the male in the photo, but I definitely like the concept. This is what a company should sell; the people that makes up the company. It tells their customers that the company has nothing to hid and gives them a sense of security that they are dealing with real professionals rather than some ghosts from outer space.

The contents of the web pages are pretty boring especially those that needs scrolling. Perhaps more graphics could be inserted between the text to make them look more interesting. Alternatively, the banners on the right column could be changed more frequently. Very Often, I felt like increasing the width of the content area in the centre column. There are important contents in there but not enough room to show. In the worst scenario, I would change the layout to 2 columns just to fit in the contents and that would also allow for some interplay of graphic elements as well. I am not sure who started the trend, it seems that many designers nowsadays are very scared to show off their graphic design skills.

Function

The navigation is very consistent thoughout the site. The left navigation menu is simple and effective. However, the sub-menus are not easily recognized. I had to do a few clicks before I knew how to use the sub-menus. Other than lightening the blue at the side, it would help by adding some bullets, icons or even some spaces before each label.

The breadcrumb looks cool but I not too sure of the line above it. Maybe making the line thinner of even leaving it empty might be a better idea. While navigating the site, I stumbled across a link exhcange page, ie link_popularity.php

The title of this page is “Link Popularity Exchange Farms”….Hang on, Did I see the word “farms”? Mmm, this term seems negative to me. Term like these is prohibited in the SEO dictionary. The company might want to manually screen through all the titles of their web pages to make sure the titles are named approriately. The special char “|” looks cool but might not be a good idea to use in the title.

Conclusion

Visual Orange is obviously a commercial site targeting at people who are looking for professional services. With that in mind, I thought the site could be more professional by injecting some strong visuals and portfolio to showcase their talent. I feel that the colors, font selection and layout are carefully planned but I am not yet convinced of their design skills. Would I be tempted to use their services? Not at the moment.

www.visualorange.net.1

www.visualorange.net.2

www.visualorange.net.3

www.visualorange.net.4

Music CD Design

Last year, I was approached about designing the cover for a free promotional CD. The timeline was short, but critical, and the printing budget was relatively small. This project was completed within two hours from initiation to completion and went to printing the same day.

This project began with an urgent phone call because a local music production company had a concert coming up in three days along with almost a thousand promotional CD’s but no cover for the case. With a low printing budget, I knew I had to keep the use of colors to a minimum, the font relatively common, and the graphics simple since there was not a lot of time to build custom graphics.

The client needed me to design a front and back for the CD and get it to the printing company the same day. The things that I asked them before starting this project included:

1. Is the spine a third cut sheet or does it wrap around? To this, the told me that the spine graphics would wrap around within the case from the back.

2. What would you like on the spine? To this, they responded that they just wanted their name and a volume or a year, since they intended to do this every year. I chose to go with a year since it fit in better with the theme of the CD, which was a compilation of music from some of their artists for that year.

3. Would you like to say anything specific on the front or back? They simply wanted to show their name, the name of the album, and the artists on the album, along with, “Special Thanks To: Our fans for making this another successful year. We hope you enjoy this free CD provided to you by our sponsors, our affiliates, and most of all, by our artists. We looking forward to seeing you again to make 2005 another great year!”

4. Did they have any special graphics requests? Their response was to make it simple but attractive and professional, and to design it to it would look good printed and on their website. With this being said, I opted to use websafe colors so it would look identical.

I started with the back and the spine since, to me, everything should progress off of the spine. After all, most CD’s are stored so we can see the spine and pick the one we want to listen to. I chose to go with a dark red color and put the words “Fusion 2004” on it in white and red to help the spine stand out more. I replicated this for the front and back of the spine (which would be to the left of front and back covers while viewing them). I chose to use the Baunhaus font since the printing company had this common font and it matched the font of the client’s logo and website.

Since I feel that graphics should flow from the spine I used Photoshop to draw a triangle with the same dark red color on the left edge and warped it to get rid of the hard edges. In addition, I drew a white music note and warped that to give the graphic more of a fluid nature and help the note stand out against the background. I also chose to use a black background for the rest of the cover to allow these graphics to stand out more then added the requested text to the back. All text was entered in a staggered line to flow with the edge of the now warped triangle better.

I then begin designing the front cover. The client wanted a simple layout with just their company name and names of their artists. I used the same theme of the back cover and applied it to the front cover to give the CD a unified look.

In the end, we were able to accomplish designing an attractive CD cover with very few specialty graphics and very few colors to lower the cost of printing. It conveyed everything the client wanted to convey in very little time.

About The Author

Uday is a freelance graphic and web designer. With eight years of experience in web design, Uday makes a variety of web pages from corporate to personal and built pages which are easy to edit for the end user. All coding is written cleanly to ensure that pages are run smoothly, load quickly, and perform to it’s full potential.

16_1

W3C Compliant Website That Has Great Potential

Introduction

limeVista is a new web design firm located in Banbury, sale UK. As opposed to my counterparts in Sitecritic.net, I am more of a developer rather than a designer and that makes my taste of a well-designed site different from them; I like this site because it is W3C compliant…

Form

The layout and navigation is simple and consistent. The mouse over effect for all the links in the site is almost identical. I though the top menu can be highlighted by using a slightly different effect to show its importance as compared to the links used in the body. The hyperlinks can be named with an underscore or dash to separate the important terms. If you search for “graphicdesign” and “graphic design” in different search engines, they might all return different results. This is not terribly important but I thought it helps abit in SEO.

If the author can find a way to extract the sentences used in the banner as text, it would be even better. I thought the words used are cool and they should be visible to the search engines. Another way is to make a part or the whole banner clickable. I am very tempted to click on the banner especially when I see the word “Click”.

Function

Though the layout is effective, I thought certain areas could be enhanced with nice graphics. Professional pictures and icons can really make an idea stand out. For instance, when the author is talking about their design services, I would be more convinced if there are some pictures relating to design beside the words. There are times when certain sections such as “Web Design” becomes too lengthy and confusing… Again, intelligent use of graphics can help out.

The black box description that appears beside each menu when mouse over is cool. The contrast makes the descripton stand out and is very useful in providing extra information to the user.

On further inspection, this site may look like a blog site using a template. I think it is important for the designer to add in some “business touch” and make it look more like a commercial Web Design site which will give more credibility to the company.

The site seems to be still under construction but is already showing great signs of success in terms of the code used. All the pages are extremely light weighted and the alignment is rock solid across all browsers.

Conclusion

It is a pleasure to navigate the site though I would love to see more graphics not related to lime but related to human interaction, services, design…etc. The coding is professional and will lay a strong foundation for future changes in web technologies.

www.limevista.com.1

www.limevista.com.2

www.limevista.com.3

Creating a Banner Advertisement

After Hurricane Katrina, I quickly organized a benefit concert to raise money for the Red Cross. Due to the short notice, using online advertising was the best way to quickly promote the concert and get interest. I decided to go with a banner advertisement. The primary things to keep in mind for banners is a graphic of small size, but eye catching enough to gain the attention of web surfers.

The first step of creating a banner is knowing what needs to be promoted and building the graphics. In this case, we were promoting relief efforts for hurricane victims so it was important to immediately let the viewer see the cause. The graphics I was given to work with included the logo of the concert host and a logo from The American Red Cross.

There were a few more things I needed to know to make this banner affective.

1. Which websites would they go in and what were the colors of each site. In this case, both websites had black backgrounds and I wanted each banner to blend into the site, but the content to stand out, so I chose a black background for the banner.

2. What my file size limitations were for the site. I also wanted to convey as much information as I could with the smallest file size so it would load quickly. My limitation was 30K for one site and 35K for another. In addition, each needed to be 468px X 60px. Of course, I wanted to keep this files as small as possible so they would load quickly, but easily noticable.

3. What information I needed to display. For this event, it was critical that I let the viewer know immediately what the cause was, who was involved in it, where the event was, and when the event was to happen.

I decided to start my graphic with the words “Hurricane Katrina Victims” which, in itself was an attention getter at the time. Due to file size limitations for a banner, I wanted to not use too many special affects or colors and keep it simple. This is what I started out with:

I then wanted a transition between this and the information, so I made a new gif with the following: “Hurricane Katrina Victims”

Third, I wanted to display the information on location, who was involed, and when the event was. In addition, I wanted this frame to stand out a little more so I used some photoshop effects and made the third message.

Finally, I wanted to tween my three images so there would be a smooth transition between the three. Using photoshop, I put two tweened frames between each of the three images. Again, I only went with two frames each to save on filesize. In addition, I assigned time delays to each frame to give the viewer enough time to read. I chose 1 second for the first frame. Two and three were transition frames and received no delay. Four was the frame saying “Need Our Help” and it recieved 1 second. Five and six were transition frames which received no delay. And finally, our frame with all of the information on it received a 5 second delay in order to give everyone time to read it and so it would appear for the longest period of time. The final image was roughly 26K and the animated .gif is shown below.
Estimates showed that average clicks on the banner ranged from 0.30 percent to as high as 1 percent. In the 9 days that this banner ran on the two sites, it was viewed 12386 times, but received 464 clicks, which is roughly 3.75% and the show was a success, raising slightly over $4000 for the American Red Cross.

About The Author

Uday is a freelance graphic and web designer. With eight years of experience in web design, Uday makes a variety of web pages from corporate to personal and built pages which are easy to edit for the end user. All coding is written cleanly to ensure that pages are run smoothly, load quickly, and perform to it’s full potential.

15_1

15_2

Personal privacy hole is a real concern

Introduction

OnlinePharmacy.com.au is a web store selling various prescription drugs and medications. Headquartered in Australia, the company sells over-the-counter products all over the world. Citing legal restrictions, they do not offer RX medications outside of their home country of Australia.

My visit to this site began rather uneventfully, although there were a few things along the way that raised some big red flags in my mind.

Form

The site design is a bit plain, and not very tidy. Nothing jumped out as absolutely atrocious during my first visit, yet nothing seemed impressive in any way either.

The company’s name is the same as their Internet domain name, and they display it promptly and often – the name is in the header located at the top left of every page. Of course, their logo (or lack thereof) is really nothing to speak of. It just doesn’t stand out, and the colors don’t quite match up between the logo’s background and the site’s background around the logo, giving it an odd sort of “boxed” look. Also, the site’s width and top margin jump around a lot from page to page, and are especially noticeable at higher resolutions using a large browser window.

The font type is mostly the same throughout the website, however they use bold and italic text in various places for no apparent reason. They change font sizes all over the place, and even throw in a few different colors – all on the same page – which just makes everything appear jumbled and busy.

The checkout pages don’t really look anything like the rest of the site, and the shopping cart is obviously some kind of add-in that maintains its own look and feel separate from everything else. Consistent, this site is not.

Overall, the image of OnlinePharmacy.com.au was sloppy, and my visit there was just plain boring – at least in the beginning. Upon further examination, I was able to identify a number of things that eventually did catch my attention; some good and some not-so-good. In fact, one particular point definitely made things interesting, and the thought of becoming a victim was rather frightening…

Function

A large personal privacy hole exists in the checkout functionality of this website. While credit card purchasing appears secure, the personal information side of things is definitely weak in the security (if you can even call it that) department. When it comes to keeping personal information safe, this site truly misses the mark.

After having selected some items for purchase and entering the check-out process, there is a page where you enter your personal information. (Not credit cards at this point; rather your name, street address, phone number, etc.) This is where the big problems exist. Instead of maintaining a “traditional” account with a username and password, this site simply allows you to recall a profile by entering an email address and a last name. That’s it? You only need an email address and last name to pull up a whole personal profile? Yep. Scary, isn’t it? That’s insecurity at its finest, and just a plain-old bad idea.

There are a ton of products available for purchase, and a lot of medical information put into layman’s terms on this site. The site is fairly easy to navigate, and they have a very comprehensive F.A.Q. to help you get started. Oh, and at least the credit card area is secure using SLL/128bit encryption. Of course, you must ask yourself, “Would you trust a company with your financial information that is so irresponsible with your personal information?”

Conclusion

OnlinePharmacy.com.au has a good idea and a ton of products at a great price. However, they desperately need the assistance of an Internet security specialist and a professional web designer. This web business has potential, but I just can’t get over that security hole and how sloppy their presentation is. If their electronic store is this “dirty” and they are this careless with other peoples’ information, what does that say about the quality of their products and services? Remember, they’re in the medical/pharmaceutical field, where cleanliness, quality and privacy are supposed to be priority #1. Ouch.

www.onlinepharmacy.com.au.1

www.onlinepharmacy.com.au.2

www.onlinepharmacy.com.au.3

Melbourne University Website

Introduction

Over the years, nurse the University of Melbourne has established itself as one of the finest in Australia, if not the world. This website provides comprehensive information on everything you want to know about the Melbourne University.

Form

The gracious logo in the middle captured my attention when I first entered the site. The clever interplay between blue, white and multi-racial images communicates well to the end user of what the web site is trying to sell, the quality of their services. Actually, I am convinced that this school is the best simply by just visiting the home page. This is a good example of a well-designed academic site.

Function

The navigation is well organized. Extreme care is taken not to clutter the pages with too much information. However, the switch from 3-column to 2-column layout and vice versa in some pages sometimes confuses the user. I thought the mouse-over effect could be made more effective by avoiding yellow background as the hover. Some of the inner pages uses underlined red effect which I think is better….But then again, it is just me and may not work for everyone.

At times, the left menu seems to drop down a little which seems odd but most of the time, the menu is well aligned. All the information is organized and separated by using green dotted borders, making it easy for the user to read. However, I was abit confused with the sub-menus within each categories. I thought they might be easier to read by adding simple bullets or graphics. The images used are also appropriate and touched up nicely which again shows the professionalism in designing the site.

The only part that I really do not like about the site is the footer…I think too much information is given there and most of them are useless to the end user.

Conclusion

Overall the website has been well structured, consistent and precisely presented. I hope more academic sites can follow the footsteps this one.

www.unimelb.edu.au.1

www.unimelb.edu.au.2

Web design flawed, but content solid

Introduction

At first glance, I was certain I would be disappointed with my experience at scribbleskidsart.com. While their name and logo are simple and their message clear, my first take on this website would not exactly be defined as highly impressed. However, after a time, my opinion of this website changed for the better…

Form

The home page design reminded me of something thrown together by an amateur website designer in their spare time using the most basic three color template available. The overly simple blue leftbar and plain white body with virtually no formatting leaves the visitor initially unimpressed.

As I perused the website, I noticed that any formatting present was primarily either a simple left-aligned paragraph or centered text. Everything is displayed using a relatively medium-large, boring font, and page headings usually contain some simple, yet relevant clipart. Most pages are sectioned out by basic red horizontal lines. Some of the pages displaying multiple pieces of artwork look a little sloppy, as the graphics were not cropped to common sizes.

The overly simplistic nature gave me the feeling that this site was designed for five year olds. It’s definitely no corporate masterpiece. Then it dawned on me…that’s exactly who it was designed for! It is consistent and simple – even if boring and a little messy at times – and even the most novice web user would most likely understand what they’re looking at right away.

Function

Navigation is extremely simple. There is so little to the style and design of the site that it’s just-plain-easy to get where you want to go. All of the main topics are listed on the left, and most pages have clear blue hyperlinks within the body text that take you to the next logical place you would want to visit. There’s nothing confusing about this website at all.

If a link takes you away from scribbleskidsart.com, they present the target website in a new window, keeping your visit to this website intact. Nice touch and properly done in that respect.

What made my visit to this website truly intriguing was the nature of the content. There’s just a lot of stuff to read and look at, and a lot of offerings in the way of contests, art education, art history, articles, and other resources. They are targeting youth artists, and seem to stay true to their mission. There is wealth of knowledge here, and you’re not flooded with advertisers and sponsors at every turn. This site is also obviously always evolving and current. Nothing felt stale. Monthly awards offered by this website to various contest winners ranging from art supplies to blue ribbons and a place in their “Hall of Fame” for things such as “best artwork” and ‘first to answer the monthly quiz correctly” keep their visitors coming back and contributing to this growing community of young artists.

Conclusion

The website’s content is right on the mark for its target audience. If you’re under 18 and an artist or interested in art, then this website has something to offer you and there is true value to the information held within. I highly recommend spending more than a few minutes browsing its pages.

That being said, this site could use a major design overhaul by a professional website developer. There’s a ton of potential here. A touch of real art-in-design could turn this diamond-in-the-rough into a real gem!

www.scribbleskidsart.com.1

www.scribbleskidsart.com.2

www.scribbleskidsart.com.3

www.scribbleskidsart.com.4

Photo Montage Fun

A montage can make an excellent design element for nearly any type of material – print, web, or even a beautiful piece of displayed art. For the designer or artist, this type of project may be a little challenging, especially the first time. However, with a little practice and a keen eye, the final product can turn out to be a masterpiece.

I have been in the graphic/web design industry for over 8 years. One of my most challenging and rewarding creative endeavors was that of the montage. I found that the elements that go into the creation of a montage are far less important than the ability to place them and seamlessly blend each element into one another. After trial and error, I finally managed to get it right. I learned that I could take digitized photos, no matter what quality, subject matter, or else and combine them into an interesting piece of art.

In addition to skill, the designer must have the right tools. There are many pieces of software available to designers, I happen to prefer Adobe Photoshop for this type of work.

So, where do I begin? Photos. I like to select three to four photos to begin with. After selecting the photos, I place them on the stage. This is one of the important steps. When working with multiple photos, the designer must be sure to balance them. (fig. 1) There should be a natural flow in the focal points of the photos. If there is not, rearranging may be in order, or try selecting a more compatible photo.

Once the photos are posed, the fun begins – masking. Layer masks in Photoshop are an effective way to produce different results that can be manipulated on many levels. It might sound easy at first, but…there is a trick to it that a person must discover for their self through trial and error. Even now, it often takes me 2 or 3 tries to get each photo exactly the way I want it. I start by selecting the photo that I want the others to blend into. For this project I chose the center photo. On the other two photos, I added a layer mask and used the airbrush tool to create my blends. After airbrushing, I put a ‘screen’ on the middle image in order to complete the effect. (fig. 2)

So far, the composition is nice, but there is still something missing. Notice how the color differentiates between the photos a little too much and does not create the streamline effect I am looking for. At this point, I am going to merge and convert the photos to grayscale (fig. 3) so I can then add a filter, to get the “rustic” look I’m going for.

I’ve added the filter, and now have decided to add some text to the montage. At times, I may add only a word or a symbol or I may add a large quote, it all depends on the montage theme. For this piece I’ve included a small quote and title that fits well with the rustic theme I was going for. The text breaks up the piece as a whole and also adds a design element to the composition. (fig. 4)

In the end, my composition turned out exactly how I wanted it to. Any designer can realize the ideas in his or her head and at the same time have fun creating it. The end result is well worth the effort.

About The Author

Leslie Fredericks-Leamon has been in the web design business for 8 years. During that time she has freelanced as well as taken full-time in-house design positions. Currently Leslie runs a freelance operation under the name of Muz Media, located in Cedar Rapids, Iowa. What started out as primarily a web and graphic design studio, Muz Media has turned focus onto other aspects design and development, such as multimedia, SEO and online marketing, and integrated them into the business, bringing many important elements of web-presence to our clients without the politics of a large advertising agency. www.muzmedia.com

14_1

14_2

An Artistic and Resourceful Website

Introduction

The Drawing Center is a dedicated online art gallery that blends historical and contemporary art. This website can be a good resource for all creative artists.

Form

The front page invites the user to venture into the neat and clean website. The colors used in the site is very calming, check consisting of red and grey. The logo is text based and eye soothing as well. Navigating the site is a pleasure which can be simplified to match with the overall theme of the site. However, online I realized that the page alignment could be more effective in higher screen resolution.

– Simple and multi facilitated menu on top of the page for easy navigation.
– Vivid fonts with excellent color combination for titles, ambulance sub titles, links etc goes well with the theme.
– Consistent standard footer.

Function

The site is very informational. From exhibitions, publications to membership details, it basically covers everything that an artist would like to know. The intelligent use of images and photographs on different categories breaks the monotony of the site and gives extra value to the text. Though the contents are well presented, I would like to see abit of variation in terms of color or layout because after spending 15 mins reading the text, I felt abit bored.

The name of the web designer or design company at the footer could have been avoided. Let the work speak.

Conclusion

This website has succeeded in the artistic representation of the subject, giving full justice and launching pad to prevailing art in the ancient backdrop. However, more design elements could be used to spice up the site. I really hope to see more surprises.

www.drawingcenter.org.1

www.drawingcenter.org.2