Day & Zimmermann Open Shop – Mobile Concept

Recently I was asked to redesign the Day & Zimmermann Open Shop website, which would be responsive for desktop and mobile browsers.  Currently, the project is on hold.

The design was made in Photoshop.

4-OpenShopMobileConcept

ECM Print Shop

ECM Print Shop Home Page

ECM Print Shop Home Page

ecmprintshop.dayzim.com

Development Time:  2.5 weeks.

Launch:  November 2014

Purpose:  For Day & Zimmermann marketing employees to browse and order marketing collateral.  (e.g. posters, stickers, signs, product datasheets, company booklets, etc.)

Product listings.

Product listings.

Product preview.

Product preview.

Order form.  Orders get emailed to administrator.

Order form. Orders get emailed to administrator.

 

Day & Zimmermann Open Shop

D&Z Open Shop Home Page

D&Z Open Shop Home Page

dayzimopenshop.com

Development Time:  Two months.

Launch:  November 2014

Purpose:  For contractors to search, view and apply for current engineering, maintenance and construction jobs.

  • Hosted on an IIS 7 server with an ASP.net/C# back-end.
  • All jobs, categories and user data with resumes are stored on a MSSQL.
  • The design comp was created in Adobe Photoshop and its HTML/CSS template was later constructed in a Visual Studio ASP.net/C# project.
Job search results.

Job search results.

Job application page.

Job application page.

 

ECM Vendors iOS App

Splash Screen

Splash Screen

iOS App

Development Time:  1 month.

Go-Live:  September 2014.

Purpose:  To allow Day & Zimmermann employees in the ECM (Engineering Construction & Maintenance) business to browse and view contact information of current third-party vendors the company does business with.

  • This iOS is optimized for iPhone and iPod Touch devices.
  • Built from the ground-up in Objective C.
  • The vendor category carousel, which represents a “directory rolodex”, uses a third-party plugin called iCarousel.
  • Vendor data is queried to a Microsoft SharePoint via a SOAP web service call and is synched onto the app’s internal SQLite database.
  • The splash screen image was designed in Adobe Photoshop.

Vendor data synching

Vendor Carousel

Vendor search and results list.

Vendor search and results list.

Vendor info screen.

Vendor info screen.

2010 Year in Review

2010 Year in Review

2010 Year in Review

courierpostonline.com/2010

Completion:  2 days.

Launch:  December 2010

  • The purpose of this project is for the reader to vote for the top stories of 2010 in each category.  They given a list of headlines and should order them from most to least important.
  • The page was hosted on a LAMP server.  MySQL was used to store and query the headlines and update the rankings.
  • PHP was used for server-side page processing.
  • A jQuery library function was used to allow the user in ordering the headlines form.
  • HTML and CSS was used for presentation.

2010 Year in Review Voting Form

2010 Year in Review Voting Form

 

2010 Year in Review - jQuery

Prototyping Tool for Firefox

Pencil Project is a free Firefox plugin tool that helps web designers sketch a web page they’re planning to build.  When they’re done, they can export their creation into an image file, whether emailing to clients or beginning designing.

For me, this tool is nice because I don’t have to waste any paper or ink sketching and I can easily import into Photoshop or Fireworks and begin designing.

Pencil Project for Firefox, a free web page prototyping tool.

Pencil Project for Firefox, a free web page prototyping tool.

Varsity All-Stars, Front and Back-Ends

Varsity All-Stars

Varsity All-Stars, Front-End

courierpostonline.com/allstars

Total project turnaround time:  Two weeks.

Utilizing:  PHP for dynamic server-side processing, MySQL for data storage, and HTML, CSS and Photoshop for GUI design.

Purpose:  For readers to browse and view the best high school athletes in the area and for administrators to import them onto the database.

Varsity All-Stars, Back-End Data Entry Form

Varsity All-Stars, Back-End Data Entry Form

Varsity All-Stars, Athlete Image Upload Form

Varsity All-Stars, Athlete Image Upload Form

Varsity All-Stars, Back-End Home

Varsity All-Stars, Back-End Home

The Art of Wireframing

image

Wireframing is nothing more than sketching what a web page or any computer or mobile app would like when a user is on it.  I’m currently designing a web page for my work.

Game of the Week, Version 2 (Co-Brand Template Example)

Game of the Week V.2, 2010
Game of the Week V.2, 2010

courierpostonline.com/varsitylive

Used table-less HTML, CSS and Photoshop for GUI design.  This second version design of this sponsored, co-branded website, is loosely inspired by the Comcast SportsNet GUI interface.  (See below.)

Black History Month

Black History Month, 2011
Black History Month, 2011

courierpostonline.com/blackhistory

Help Wanted

Help Wanted, 2011

Help Wanted, 2011

courierpostonline.com/helpwanted

Use: HTML, CSS, Photoshop

“Game of the Week” Branding…In Print!

My "Game of the Week" Branding Logo on a newspaper.

My "Game of the Week" Branding Logo on a newspaper page, 2/11/2011

I re-branded the Varsity Game of the Week page back in December, 2010 with a new logo and web page re-design with table-less HTML, CSS and Photoshop.  My logo ended up being in the February 11, 2011 issue of the Courier-Post Varsity section, page 4D.

Camden Computing Services Help Desk Intranet

Camden Computing Services Help Desk Intranet

Camden Computing Services Help Desk Intranet - 2004

Before my maturity in the PHP and HTML web languages, I designed and used a simple and intuitive intranet page for all student college computer help desk employees.  Utilized PHP, HTML, and JavaScript and CSS to hide or show left-rail menu texts.

Republican National Convention 2008

Republican National Convention, 2008 Section Front

Republican National Convention, 2008 Section Front

Used HTML, CSS, Saxotech Script (for headline display), and Photoshop for section titles.

The Obama Presidency

The Obama Presidency

The Obama Presidency - January 2009

All HTML, CSS and Photoshop.

Follow

Get every new post delivered to your Inbox.