Using wonderful designs, icons and colors, this jeweler manufactures most of her products. She assembles and sells full pieces (necklaces, bracelets), individual parts and custom designs. This site was a collaboration with Kiki LaPorta, a top of the line designer and Phil Tardif, a very talented and skilled PHP programmer.
The above slide shows a still from a Flash animation I created from the jeweler's collection of charms, flying from the sides, spinning in the air, landing on the chain along with other graphic parts moving into place that are seen on the rest of the pages. The visitor can turn off the music, if desired, and/or skip the movie to move on to the rest of the site.
At the end of the movie, the opening page automatically flips to the main Home page (see next slide).
The Home page allowed the trained staff to display 1-4 images in the center. The side columns, the same throughout the site, gave visitors the ability to get to the main groups of products easily or search by categories (on the right). Some the parts of the site were tied into the database which populated the pages from uploading updated Excel spreadsheets.
All parts of these pages were editable.
Such a talented and strong musician required a bold design. Ferro was using a tiger logo (seen in the left column). I felt she needed a stronger presence on the site with this in-your-face tiger in the banner. I used the stripes from the tiger photo, screened back, as the background for all the pages, behind the text and left column.
The Home page features all of the Band's upcoming dates, which the owner fills in through the Content Management System's easy-to-use forms. Once the performance date passes, it automatically gets removed from the Upcoming and is placed in the Past Performances list below.
The slide above of the Band page is constructed where each band member has its own form the owner fills out. This allows her to add, edit or delete each subsection of the page without disturbing the rest of the page. These subsections, in the editing area, are in numerical order. If she wants to move the item in second place to, for instance, third place, she would renumber that item 3 instead of 2. She can also put any item into a draft mode which then would not appear on the site but would be saved for later use if needed.
All parts of the page is editable: center, side columns, etc. They each are separate pieces which can be accessed easily under a content drop down menu listing all the pieces to edit. In the case of the columns, they are the same on all pages. The owner only needs to make a change in the one place and it will update all the pages.
I always style the forms on a site with the color palette of the site (instead of what you normally see on sites — plain form gray styling).
In this form, I added more than just the typical contact form. The owner wanted her fans to be able to write to her so she could post, if they agreed, their comments about the band.
This organization had hundreds of photos available to them but most were in people's garages and not in digital form. After some research, I found a reliable service which would scan the photos in bulk and offered a self-scanner machine in the store. There were many images that one member had collected and made into a traveling slide presentation.
For the first phase of this project, we scanned many of the stored photos and slides to use on the site. Many of best photos needed major Photoshop corrections. I did this work on the photos with most interesting stories and were most visually impactful.
The above Home page slide shows a photo essay I designed to help the history come to life. Much of the text on the site was from a simple site put together by a board member and terrific writer, Penny Hutton, who also wrote a book named The History of Forestville. We highlight on the site where one can buy the to the book.
The above Photo Gallery slide contains almost 500 photos. Each photo has at least one category. The categories are by family names, type (ie: trains, beaches), organizations, locations and more.
When the visitor clicks on the one of the categories on the left, they will only see photos related to, for instance, that family name.
The member who had a traveling Forestville history photo slide presentation was trained to add captions to each photo. This is an undertaking in progress.
The Webvanta CMS had a built-in Blog which is styled differently for each site. We renamed this section Stories. The Stories home page has the beginning of each story. When one clicks on the title or continue, the entire post is shown with larger images and a comment area to allow the public to respond to the story.
On another page, the public has the opportunity to send their own Forestville family stories for publication. The comments are emailed to the admin and are also backed up in the CMS system.
In the Stories section, we are adding videos of interviews with older Forestville folks whose families have history in town, some dating back to the early 1880s. The project of making the video interviews are progress.
This company had never had a website. The owner started his own logistics business after retiring from doing this type of work as a manager at a large corporation. He knows his work and is extremely smart but had a difficult time communicating it. I worked with him on how to write for the Web and which keywords to use for his ideal clients.
The left column was set up to bring in parts of the site from his other pages. When he writes new pieces for these other sections, the latest ones will appear in this column.
The slide above of the Home page is constructed where if he wants to move the item in the top place to, for instance, third place, he would renumber that item 3 instead of one. He can also put any item into a draft mode which then would not appear on the site but would be saved for later use if wanted.
The site has three sections set up like Case Studies: a main landing page for the section with a photo, a summary of the topic and clickable title, image and read more. The title is seen over the summary in the section navigation and on the individual topic page (see slide 3).
Why is the above mentioned as a feature? Because the owner only needs to type that title once and it automatically appears in all places, displayed as it is styled for each case.
The images, when uploaded to the site, are made into versions (a feature of this Content Management System). I have defined which version size of a photo goes in which place. When the owner wants to change or add photos, he only has to worry about getting one good photo and the CMS does the rest.
As in slide 2, this individual Case Studies page has the section navigation and the same but larger image displayed. For this kind of page, the owner fills out forms that define what section of the page it is for: Situation, Solution or Benefit.
The CMS automatically creates a new page if he wants to add a new Case Study, adds a summary to the landing page and adds the title to the section navigation.
This company had a very old website that lacked any real design. However, the owner is a prolific writer and had a lot of good content both on the old site and more she had written.
Patricia Brunelle, a ZagDesign partner, who is a professional photographer and videographer, was hired to photograph the owner and many of her past and present clients. Her clients and their families were glad to partake in the photo shoot since they were very happy with the results of their work with the center which changed their lives.
The owner requested a very lively and colorful site. Thanks to the great photos and great content, my job was to not just design a site but to help organize all the content available to make it a cohesive site.
The above slide of the Are You Dyslexic page, is a typical page found on the site that is formatted predominantly with lists making it easy to read for all. It also is a very easy page to edit by adding bullet points and/or deleting others.
All of the photos that the photograph did were uploaded to the Content Management System's server which also makes it easy to change out any photo. This CMS has a system to create renditions (or multiple sizes of each image). I determine which size image belongs in the different areas so whatever image they choose, will display in the correct size.
This slide is again a typical page found on the site. Each content block is a separate form the owner fills out. It has a head or title and the definition of the term which have been pre-formatted. The owner just needs to fill in the form without doing anything else but saving.
I construct a lot of pages like this because it allows a freedom how the content is used. If one wants to move the item in the top place to, for instance, fifth place, that is done by just numbering that item 5 instead of one. One can also put any item into a draft mode which then would not appear on the site but would be saved for later use if wanted.
This company had a website but had no way of editing it. They liked the look of the basic site. I moved them to my preferred Content Management System, Webvanta, and reconstructed their site design.
I built in a lot of features to make it easy for them to edit and especially to add photos. This company does amazing work with various metals for roofs, gutters, siding and architectural details. Photos are important to show their work.
Since photography was of major importance for this site and many of the photos would need to be taken on the job site as the jobs progressed, I suggested training them to photograph (right time of day, right angle of sun, good composition, etc.) and to help them choose the right camera to buy for their budget and use. They agreed.
Patricia Brunelle, a ZagDesign partner, who is a professional photographer and videographer, trained one of the owners who would often be on the job sites.
The above slide, the Portfolio, shows the built in photo gallery/slide show with this Content Management System, customized for their design. When the site owner adds new images (which can be taken from images downloaded to a computer or directly from a mobile device), she chooses what categories she wants to assign and adds a caption.
The above slide shows one of the pages from a new section we created called Featured Projects. Different than the Portfolio, the section consists of a main landing page with large thumbnails and with key titles and captions (helps with Search Engine Optimization) relating to each project.
When that project is clicked on, the page shows a slide show with a lot of other details about the project. For the owner to create new featured projects, she simply fills in a form with text fields to add the correct content, uploads the images and gives them categories and captions.
This company needed to really show their off their landscape work. The older site made them appear as a low-cost service. Their work is stunning. To get that concept across, on the Home page I set up the page background to display edge-to-edge photos which is also a slide show. No matter how wide or small the desktop or tablet browser window is, the photo will fill it.
Then I overlaid the navigation and text with a semi-transparent background so the text was very readable but the background images could still be fully viewed.
My preferred Content Management System, Webvanta, has a built-in photo gallery which I customize for each site. The above slide shows thumbnails and one of the larger images on page 3 of 5 pages.
Each image is assigned to multiple categories and captions. When the site owner adds new images (which can be taken from images downloaded to a computer or directly from a mobile device), he chooses what categories he wants to assign and adds a caption. If he wants only to upload the images to the site's server, he can return later to select the details.
I created a mobile site for this company. This slide shows the mobile Home page before the menu is expanded and after. The background is the same one used for all the inside pages on the desktop version of the site. The mobile site contains the same content of the desktop version only less of it.
Using the customized database, I selected which pieces of content would show on the mobile version. When the owner makes updates, he only has to go to one place in the database to make changes but it will update all the same pages on all devices.
The artist, Don Scott Macdonald, wanted simple — just the work on most pages. His wife, who is an excellent graphic artist, prepared the basic layout for me to follow.
Don wanted to do his own maintenance. At the time, there were no robust Content Management Systems available but there was a program which was CMS-like which worked in conjunction with a well known site editor, Dreamweaver. I set up his site so he could add pages (each new image) to each section and edit all the text easily.
This slide is an example of one of the wider horizontal paintings. I set up the display area to accommodate the display of vertical and horizontal paintings as well as some much wider horizontal paintings.
The Home page is regularly updated with the current issues, committee meetings, latest news. One of the board members writes a monthly column in a local newspaper containing events, announcements and news in the town. I turn each subject into blog posts for the site. I set up a part of the Blog database to automatically display all the new posts' titles to be clickable links on the Home page. View this on the Home page slide above under Latest News.
In the above slide, the Blog page, shows the Blog landing page with all the categories being used in the right column. The CMS, Webvanta, comes with a built-in blog, which I customize for each site. This landing page shows a summary of the latest posts. The categories are also customized and show each post related to that category. All posts have multiple categories.
Images can be used by attaching one to the original post. The images will display in the right sizes for all situations (thumbnail for the summaries, larger in the full post). I set up the right image sizes for all areas on the site in the backend. The owner can upload any size image and it will display the size for that particular kind of page. No imaging editing program needed to do this.
In the above slide, the Donate page, shows different ways to donate (via credit card or via check). For credit cards, I have set up three different buttons to allow people to donate to the fund they choose. On this site, I use Paypal for the e-commerce provider.
The original website was a few pages with very little text or anything else, created in the mid 90s. This company's products were innovative and they had some nice brochures made from very interesting photos. They designed and manufactured all their products. One of the owners was a hospital emergency room nurse and the other was an emergency room technician. From their experiences, they saw a need for designing products that would be extremely beneficial for use in these situations.
After determining who would be coming to their site, since they had no track record from their first site, I designed their home page like a brochure, displaying their main products graphically with a few details.
The above slide lists all the products in that group (in this case Silent Suction) with short descriptions. When clicked on, the visitor gets a much, more detailed description of the product.
The company had a system of description to let the customer know how each product could benefit them. On some of individual product pages, it was simpler like the above slide. On some, there were tables of the different choices of size, etc. for each product.
Another page (not shown), named Problems and Solutions, I set up like a FAQ page. When the visitor clicked on one of the common problems in this industry, a solution was displayed with the right product for this problem.
The company had a lot of images of their products but many were damaged or needed the wrong backgrounds removed. The above slide shows the Home page with a banner which appears on most of the site. The photo was a terrific shot but was inadvertently wrongly exposed by the photographer. It also had objects in the shot that covered up some important details.
Using many tools in Photoshop, I was able to save this photo and keep the integrity of the composition as well as show off their main product — safe pedestrian crosswalks.
This page lists the main products the company carries. The digital images of these products came with backgrounds that did not work with this site.
In Photoshop, I meticulously removed the unwanted backgrounds and saved the images as large as a file size as possible in order for the company to use the images not only on the site but also for print (brochures, etc.) and for sending to potential customers in brochure-type PDFs.
Like the site's main banner, I created this banner for this particular section to show off this product's use. The original photo was weak with objects in the shot covering up important details.
In Photoshop, I recreated the true picture of this scene with the lights blinking to warn pedestrians and motorists of the danger of a train crossing.
The author of this book, George Pandi, came to me before he started writing it. He wanted me to help him design it, to self publish and, if possible, have a publisher carry it. Pandi had published many books during his career as a writer on both travel and food. He also was widely published in daily newspapers in Montreal and Ottawa (where he lived) and global travel magazines.
We decided after discussing it, that the book should be set up like a coffee table eBook, an odd concept but it worked — a horizontal 2 page layout.
We used his own travel photos, some well known country-centric dishes like Hungarian goulash (Pandi was from Hungary) and many perfected dishes he had developed over a lifetime of being a non-professional, world-renowned cook.
He wrote with humor, on the history of dishes and the regions they were from and for any diet. The eBook includes recipes of main dishes and sauces, the right way to use condiments and about the best regional drinks.
Within each section, the author, Pandi, would take topics, such as: Airline food: the good, the bad and the boring, Basilic magic, and Biting chilies, describe his experience with these foods, conversations he had, definitions of terms and recipes where they made sense. The above topic is, as Pandi put it, "a feast built around a sauce."
Two easy recipes to spark up any dinner.