the UC project
Client: UC the Source
Summary: Designed and developed a website for an event-planning company. Also wrote copy and designed logo. The illustrations were drawn by Sandra Boitel
Visit: www.ucthesource.com
Inside pages: UC the Source was looking to shift their focus from hospitality consulting to event planning, and I strived to reflect this ambition in the site's structure. My primary goal was to get the visitor to contact the company, so all call-to-action buttons intentionally flowed toward the contact page.
Former site: The old site was scattered, muddied and confusing; I wanted direct, fresh and clear. Every element on a website needs purpose, otherwise it risks diluting the design's overall message. The message for ucthesource.com was, "We know the most, want the best for you, so get in touch."
Style tiles: The decision maker at the company was highly visual, knew what she wanted, but had difficulty explaining her thoughts. So I used style tiles (mood boards) to break through the blockage. I took her own words from an earlier questionnaire, created three different pages inspired by these words, and asked her to pick one based on feel. This gave me great direction and allowed her to participate in the ideation process.
Copy writing: When writing the site's text, I chose a tone of voice that matched UC the Source's owner. I strove for clarity, brevity and compassion for the potential customer, focusing on the benefits and positive experiences which UC could provide, not merely listing features. No one cares about the screw you sell them; they care about the feeling when they hang their child's picture on the wall.
Mobile responsiveness: With mobile devices fast outnumbering desktops in online usage, it was imperative that the site be designed responsively. Using LESS, media queries and aiming for clean code, the site changes form depending on screen size.
The Blanchard Project
Client: Mark Blanchard Insurance Agency
Summary: Under contract for NextGen Web Studios, and in collaboration with a programmer, I redesigned the client's existing website.
Visit: www.blanchardins.com
Inside pages: The project included 11 second-level pages, all unique and posing their own challenges.
Former site: The client wanted to retain the site's primary function as a sales and information platform for the insurance company, but add a blog and other dynamic elements to draw repeat visitors.
Logo: By removing the sword, choosing a cleaner font and bolder gold, the core Knight icon was given stronger emphasis.
Color: The new gold became the impact color, used throughout the site to draw attention to important elements. A friendly blue suggested familiarity, while slick grays and black kept it professional.
Menu: Because the site had to hold a lot of material and risked overcrowding, I added white space wherever possible.
Buttons: Custom hand-drawn buttons were featured prominently to help current customers and attract new ones.
Interactive: I created a button to be inserted into a blog post. When clicked, the visitor was taken to a page of Blanchard products related to the post's topic. This added another entry point into sales and helped tie the blog into the business.
Revisions: The site went through several revisions, many discussions with the client, and constant interaction with the code programmer.
the shirkey project
Client: Shirkey Golf Course
Summary: Designed an interactive course map for the golf club's website.
Visit: www.shirkeygolfcourse.com
Presentation (as it appeared online): The course map was overlayed with circled numbers. Clicking the numbers brought up a photo and information for the related hole. I also designed the header graphics for the site.
Detail: Every tree on the map indicates the actual tree line along the fairways, correct to the type of tree (pine, oak, etc.). Careful consideration was given to the distances between every tee box and green. I had played the course and was familiar with it, so I used that to my advantage.
Process: Using Photoshop, I took a Google satellite image and traced paths around the fairways, lakes, sand traps, greens, etc. I added texture, flag pins, trees and shadows, tilting the whole image on its side to create a three-dimensional effect. Finally I added the gray background and circled numbers (not shown).
the spiegel project
Client: Dan Spiegel
Summary: Designed a personal blog site for a professional golf instructor.
Visit: www.danspiegel.net
Menu: Because of the various blog categories, I chose silhouettes so the links could be easier recognized. In another version, a circle pattern mimicked golf-ball dimples.
Color: I used shades of gray, allowing the color of the blog's featured photos to attract the eye to what mattered most: the material. A bright green (green like golf grass) was used as an accent.
Shapes: I carried the silhouette idea from the menu into the footer and other page elements, creating a crisp, clean layout.
the citi field project
Times Herald-Record
Employer: Times Herald-Record
Summary: Asked by the sports editor to create "something cool" for a special pullout spotlighting the Mets' new baseball stadium, I designed an illustration and layout that gave our readers a unique tour of Citi Field.
Presentation (as it appeared in print): My main goal (besides creating "something cool") was to enhance the staff writer's words, using arrows and numbers (for distances) to meld his work into mine. I interspersed staff photography to further illustrate the writer's points.
Detail: While I knew a lot of the fine details would be lost in the blurry world of newsprint, I felt the details would be felt, even though things like the scoreboard titles, the shine on the Pepsi-Cola sign, and the shadows of the bullpen's pitching rubbers would never be seen.
Detail: The shadows on the bases, the actual markings atop the dugouts—again, more things the reader would probably never see, but I made them anyway. Maybe because it was fun. Or maybe because I went crazy. I was working pixel by pixel at some points.
Detail: Speaking with the staff writer, I knew he had material on the Jackie Robinson Rotunda, a grand interior of the stadium. Not wanting to rely on photos alone, I chose to illustrate it, and the only way I could do that was to cut away the roof.
Process: Photoshop was used to create the entire illustration (Indesign was used for layout). I scoured the wire for an aerial photo that was taken at the right perspective. Then I began tracing every single line I thought important. Layer after layer, I added texture, color, and shadows. I had already gone through this process with two earlier projects (the Yankees and Middies stadiums), so I tried to take what I had learned even farther. The .psd file was close to a gig, and took nearly 20 hours (and about 10 pots of coffee) to complete.
the yankees project
Times Herald-Record
Employer: Times Herald-Record
Summary: Created an illustration and designed the layout for a special pullout spotlighting the Yankees' new baseball stadium.
Presentation: I used staff photography and my illustration to clarify the unique information found by our staff writer.
Detail: As expected, many of the details included in the illustration were lost in the inaccuracies of newsprint. The reader never saw that home plate actually had five sides.
Process: In Photoshop I painstakingly traced an aerial photograph of the stadium, then added layer upon layer of texture, color and shadow, until everything was reproduced as accurately as possible.
the middies project
Times Herald-Record
Employer: Times Herald-Record
Summary: A local high school had built a new sports complex and the sports editor wanted a creative presentation for a special pullout.
Presentation (as it appeared in print): I wanted the illustration and the staff writer's words to complement each other, using staff photography when needed, but keeping extraneous elements like arrows to a minimum.
Detail: I visited the actual site and took photographs before starting the project, which helped when reproducing the field lines and the edging on the curbs.
Detail: Up against deadline, I wasn't able to go three-dimensional with the tennis courts, but felt it important to show the new pool and weight room.
Detail: The handicapped-parking symbols were too small for readers to see in newsprint, but they were there.
Process: The sports editor had only a blueprint for me to work with. I scanned it. Then, using Photoshop, I traced every line and added color and texture. Finally I tilted the whole work on its side and drew the three-dimensional objects, followed by more layers of detail. I had never tried doing a graphic this way (I had yet to do the Yankees and Mets stadiums), but it was a great learning experience.
news pages
Times Herald-Record
Employer: Times Herald-Record
Front pages: Here are ages I designed for the Sunday Record, the flagship edition of the newspaper. Bright colors, kids and happy people—proven ways to get an Upstate local to pick a copy off the newsstand.
Single pages: The left page was designed for the paper's entertainment section, a special look at prison artwork. The right page was a special feature on daycare.
Spread pages: A special Sunday spread angled at locals dealing with the effects of state politics. To help illustrate the writer's story, I had the idea to create a graphic of Mr. Spitzer holding a briefcase of money.
sports pages
Times Herald-Record
Employer: Times Herald-Record
Special feature: I designed this page as a special preview to golf's Open Championship. I also researched and wrote the article.
Single pages: The left page featured a story about special plays employed by local football teams. The right page was a preview to golf's US Open. I not only designed the page, but wrote the article.
Spread: Spread over two pages, this was a feature on the Yankees' minor-league system.
Spread: On a rushed deadline, I designed a two-page spread the night Barry Bonds set the career home-run record.
brochures
Ogilvy & Mather
Employer: Ogilvy & Mather
Coca-Cola: Here is a brochure I designed and set introducing a new eco-friendly coke bottle to suppliers. Went for a clean, colorful layout.
Download: View as a pdf
Coca-Cola: Using silhouettes and keeping the lines clear and simple focused the eye on the information presented.
Download: View as a pdf
OgilvyRojo: A simple 44-page brochure designed to showcase Ogilvy's best of IKEA advertising.
Download: View as a pdf
FE logo
Frederick Electric
Client: Frederick Electric
Summary: Designed a logo for an electrical company.
Ideation: I sketched over 100 logos (only a few are shown here), eventually happening upon the plug-in idea. This led to many iterations, with and without the wire. I kept the wire, because the company operated mostly in small towns; the circle gave it a traditional, classic feel.
UC logo
UC the Source
Client: UC the Source
Summary: Designed a logo for an event-planning company.
Ideation: Over 100 logos (only a few are shown here) were presented to UC the Source. The company was international and its business was bringing people together, thus the idea of circles (worlds) linked together. The founder, being a woman, wanted a feminine, yet strong, color. The teal, matched to a professional gray, honors this request.
logos
various
2XL Games: Volunteered to design a logo for 2XL Games, a video-game company primarily focused on racing games. I went through many concepts, playing here with the idea of acceleration—particles at the speed of sound, rocket ships.
2XL Games: Volunteered to design a logo for 2XL Games, a video-game company primarily focused on racing games. Here I played with the idea of speed, and that each logo would be animated. For example, the orange needle in the middle logo was to rev like a dragster's tachometer at the starting line.
Dan Spiegel: Asked to design a logo for danspiegel.net, a personal blog site. The challenge was to incorporate golf, sports and travel into one simple design. I also tried to keep a personal, less corporate feel.
mechanical
Ogilvy & Mather
Employer: Ogilvy & Mather
Direct Mail: Mechanical set for a UPS direct mail product. Included custom folds, tear marks, and bleed, trim and safety marks.
Magazine: Mechanical set for a Barclays Capital magazine ad. Included bleed, trim and safety marks, and strict adherence to style guide.
Digital: Mechanical set for digital American Express ad. Included CMYK to RGB color conversion.
this Web site was designed & developed by
josephfrederick
