An intranet is the cousin of the internet

An intranet is the first cousin to the internet and it yields a degree of credit to your business. I was fortunate to be working for a design agency in Edinburgh some years ago. The agency was being reviewed for a prestigious Scottish award and the MD wanted to win the award desperately. I was assigned the mission of designing and content managing the intranet.

Our first objective was to establish goals! In my case, my two most important goals for the intranet were:

1. Usability – It had to be something that could repeat over and over again without people getting tired of it.

2. Functionally – It must perform when the employees want to obtain and search for data.

Step 1: Research

The best start is to research. I asked around with questions about how the intranet would benefit them and what documents would be of use. Many staffs were kind enough to share with me their experiences about what they liked about the intranet and what they didn’t. I also researched other intranets and assessed what their strengths and weaknesses were. Finally, I came up with a set of features I want the intranet to have.

Step 2: Sitemap

This is a project the whole company will benefit from so a happy camp is vital. After gaining an understanding for the vision and necessities of the intranet, I sketched out a site map. I believed that a site map is vital to gaining an understanding of how the site is going to flow. It also ensures that I will have a clear path of what is required. To cover all my bases, I sat down with the MD, Operations Manager and the Web Developer to gain input and map out the sitemap. This ensured that my sitemap was watertight and that I had left nothing out.

Step 3: Getting Content

I started data mining early for the relevant content. It is very important to stick to the site map so you don’t get off track as building an intranet can be a long and tiring task. I had to ensure that all the information was up to date and relevant. Many emails were send to people in the company to get the the documents I needed. I also took down alot of notes and I believed effective time and assets management helped me alot that time.

Step 4: Designing

The aesthetics for the intranet is an extremely important element. In my circumstances, the design had to be with consistent with the company’s identity. Every day the MD, Creative Director and staff would be logging on to this – so I had to ensure that the design is non invasive, friendly and timeless. After a long brain storming process, I finally decided to import a concept into the design, ie to used pictures of staff outings and our favorite quotes in all the pages. As you can see from the screen shots, I tried to keep the navigation as simple as possible to improve the user friendliness of the system.

Step 5: Reflection

I kept reminding myself “To be educated and to educate”. That motivated me to develop compelling, user-friendly web page content and page layouts. Regular conversations and meetings prevented me from going down the wrong path. It also offered me inspiration and fresh ideas to re-design the webpages. One important process during this project was the 2 way communication between me and the web developer. The web developer had certain Dos and Donts for the intranet. He told me how he was going to code it and place it on our web server. That piece of information was important to my design.

Conclusion

I learnt alot when designing the intranet. The 5 steps described above are the basic elements I find vital to building a well excepted and functional intranet. PS – The company won the award.

47.1

47.2

47.3

47.4

47.5

Creating a Flash movie without using Macromedia Flash

After years of using Adobe CS, I attempted to learn Macromedia Flash, but was put off by the user-unfriendly interface and the long tutorials which didn’t seem to make sense. So after a bit of research on the internet, I found out how to make a Flash movie in ImageReady. These techniques can also be used to export a Flash movie from Illustrator.

Planning your movie

Decide what you would like to design and which programs you need to use (eg, I use Illustrator for cartoon graphics and Photoshop for photos). It helps to plan out what sequence of events you see happening in the “movie”, like mapping out a storyboard.

Creating graphics

Create the images needed for each slide of the movie in the particular applications. In this instance, I created images for the people in Illustrator:

– of the people sitting down
– when one winks
– when one opens its mouth
– when they jump up
– when they jump further up

Save the images as eps files, then open them in Photoshop and drag them all onto separate layers of the one file. By turning the layers on and off, you will be able to see what the movements would be. I created the background in Photoshop, using the handy brush tools to make grass, and the lasso marquee tool to create mountains and clouds. Save your work as a psd file. When satisfied with the setup, press the button on the bottom of the toolbar (or File/Edit in ImageReady) to transfer the whole thing to Adobe ImageReady.

Creating the movie

In ImageReady open Window/Animation to view the animation toolbar. You will have one frame showing by default in the toolbar. Turn the layers on/off until you have the image that you want to begin the movie with. Click on the little arrow within the frame to select how long you want this frame to play. (eg, I selected 1 sec for the first frame).

Click the arrow on the side of the dialogue box for New Frame. Repeat previous step, but for your second frame turn the layers on/off until you have something a bit different from the first frame. Set the length of the frame (I selected 0.2 secs). You can edit any frame you want by clicking on that particular frame and changing layers etc.

Repeat previous steps until movie frames are finished. If you haven’t already done so, press the “Play” button to see how your movie looks and adjust frames and times accordingly. Note: you have to press “Stop” to edit the frames again. Save your work (this should save automatically as part of the psd file you saved earlier).

When satisfied the movie is finished, click File/Export/Macromedia Flash swf (ImageReady CS and Illustrator CS come with this feature) and select any additional options you require.

44_1

44_2

44_3

Nifty Design and Development to NiftyBlythe.Com

NiftyBlythe.Com is the online catelogue website for N:ifty@Work, a Singapore base push cart selling Blythe Dolls’ accessories like clothes, eye chips, socks, shoes, anything that a Blythe owner would want to beauty up their Blythe friends.

My mum’s friend approached me one day and asked if I could help them to create up a website for their push cart. Mainly with the features like a product catalogue for their customers to get an update of new products and the pricing.

Of course I accepted the project and we discussed a few possibilities and noted down the features needed, the style of the design and their preferences etc. After browsing through a couple of reference sites on Blythe Dolls, we all got a better idea on the exact direction.

I went home and continue researching from references, see what additional things can be done in order not to be the same as other competitors. There were many ideas to the design. Other than thinking of a suitable look and feel, another important area was marketing strategy to keep the traffic going. During then, Google Adsense was not that popular yet and the clients didn’t expect paying a little bit more on Advertisement. Instead, they rely solely on Referrals and Recommendation through word of mouth.

Finally, after the whole thinking process, I came up with one solid concept for the website which the client loved. To create a wonderful Blythe Land with rainbows, hot air balloons, pastel sweet colors etc. While encapsulating this Blythe land is a border like paper bag handle. Sort of like those Macdonald Happy Meal paper box. This simply represents effectively that NiftyBlythe.Com is a place where you can buy wonderful Blythe related items!

It was a hit and jackpot. Furthering the design was good features that promote interaction and customer returns over the normal catalogue. I understand the need of Blythe owners; they like to have a place to show off their Blythe Dolls. That’s what buying those accessories is for isn’t it? By implementing a open source Coppermine Gallery, users are able to login and upload photos of their beloved Blythe dolls for all to see.

The traffic began to come especially towards the photo gallery section. Many others browse through the catalogues and pick up their favorite clothes or shoes to beautify their dolls.

It was pretty successful. Another simple implementation was a Tell Your Friend section, which allows satisfied customers to tell their fellow Blythe lover friends about NiftyBlythe.Com. Words spread easily with this simple feature.

Most comments on the guestbook were good and positive. This was really a good motivation by seeing all this satisfied users of the website.

From all this, we can see that with an effective marketing strategy implemented, it can really generate good results and exposure to even a small pushcart business. I learnt through this that having a effective marketing strategy can really determine the life and death of your website. Whether there’s traffic or it’s a ghost town all depends heavily on how you market it out.

Many times, websites are done and expect it to be shown readily on Search Engines and people will eventually bump into the site. This is a purely wrong concept that many developers this days are trying to correct their thinking. In this world, its not really much about creating something, but how to market it in order to make it successful.

Perhaps right now, with more marketing techniques implemented on NiftyBlythe.Com, it may become one of the successful Blythe Dolls website. Sadly, after some time, costs began an issue as push cart overhead was quite high, the owner got into debts and slowly, began to give up the business. That’s where it all ended with a wonderful land of Blythe .

As the business is already down, the website can still be viewed at an alternative url: http://www.dejuicestudio.net/niftyblythe

42_1

42_2

42_3

Marvellous Menu Bars

Adding customised design to web menu bars can really improve the appearance of your website and the clients love it. Even a simple line drawing in a pastel coloured menu can add effectiveness and individuality to the viewers first impression of your website.

The menu I am about to show you was created in 2005 for The Knitters Choice website and the website itself is still a work in progress, for sale though the client absolutely adored the menu bar.

I needed to design a menu that was simple, unique to the business, fast loading and colourful. I began by creating a 170 pixel wide basic table in Adobe GoLive CS, with the individual links in coloured cells. I then used the GoLive CSS Editor to make the settings for the rollovers:

a: link (shows the style you want to display for the link)
a: visited (shows what happens when the link has been viewed)
a: active (shows what happens just after the mouse has clicked on the link)
a: hover (this is the rollover state, and the one I changed the most)

I used the same properties for each one and then modified the hover function to turn yellow and display the text in capitals. This meant that when a visitor put the mouse over the link it turned yellow and in caps. I would recommend making the menu bar using CSS to keep loading times faster (much faster than using rollover images) and also because one adjustment to the CSS editor means you can change everything on the page.

The highest computer resolution I try to fit in with when designing for the web 1024 x 768 pixels, so this meant the menu was at least 768 pixels high (including the logo up the top) but the part of the menu most commonly viewed would be at the lowest screen resolution (600 pixels). For the excess part which wouldn’t be seen at 800 x 600 resolution, I just had a colour or simple graphic that was not important and didn’t matter if it was chopped off at the bottom.

Since the viewer landed on the “Home” page when they first entered the site, I felt that I would separate the “Home” link so that the viewer could immediately go somewhere else if they desired. I moved the “Home” link to the top of the menu as it is a universal link that the viewer would want in an easy-to-find position.

Next, I looked through the multitude of photos included with the original material and decided to include a photo of the client’s child (the couple often remarked how sweet their little girl looked in the knitted jumper they made). I decided to make this into a mini-ad, since there was no catchline, tagline or subheading with the logo, so I added the words “be inspired” on it and placed a brief caption with the type of wool used (available from The Knitters Choice store) underneath.

One of the photos had a great picture of shelves of coloured wool, which didn’t seem to fit well anywhere in the rest of the website, so I cropped it and placed it under the menu to add more colour to the whole thing. Then, to fill in the last bit of space, I created another mini-ad with a bit of a joke “Come in and have a good yarn”!

All images were saved as medium resolution jpgs, using the “Save for web” function in Photoshop (this makes the file size smaller and therefore faster loading).

The sky is certainly the limit when it comes to designing interesting menus. Your websites will appear much more customised and personalised, as well as being a step above the common menu content that is freely available for beginners on the internet.

PS – Don’t forget to upload your CSS style sheet to the cgi-bin or Generated Items folder of your website for it to work!

32_1

32_2

32_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