Mechanical Engineering Site
Desktop | Phone | Tablet | Conversion to Divi | Replication of UX Design | Development | SEO | Migration
This was an interesting project. The original site was Flash-driven (a dead program) and written in static ASP pages. The client requested the site to be rebuilt using the WP codex and Divi asking that the entire site design be replicated exactly, including its fixed-width design.
Project Summary
This was an interesting project because I was asked to recreate the entire site, switching a static, fixed-width site to Divi – which is flex. To replicate the flash video in the original site, I decompressed the flash file and using a flash player, I recorded the video on my OBS platform and converted it to an MP4, then used this as a background.
The flashing images which only existed as angled images (no originals were available) I converted to gifs. The interior pages use these gifs along with a tab-like script to switch between projects that replace the page content without the creation of a new page. For this, I wrote a jquery script to accomplish the project.
The website was recreated perfectly with WordPress and Divi. The only change was an addition of a mobile-friendly layout.
Project Details
Client Name
DDG Virginia Enngineering
Project duration
1 Month
Strategy
WP and Divi are flex systems. Therefore, trying to build a fixed-with site with several different layers was quite complicated. To keep the original look and to avoid the site from breaking on small screens, all sections were created with fixed widths and heights, including a fixed page height overall. Setting the breakpoint to 1000px, the exact width of the main content, it then switches to mobile view with a separate layout.
I converted the flash video to mp4, and the flash text to a simple text slide show. Every single item and design element was recreated with precision through custom CSS and custom jquery scripts. This includes the angled dropdown menu and the tab-like content switches on the interior pages.
UX Design
The US design was replicated entirely from the original site. The only change up to any design features was to a mobile layout that did not previously exist, making it extremely difficult to navigate on the phone. The site is now mobile-friendly.
Visual Design
I replicated the colors from the original site, using Photoshop to detect the exact colors and convert them to hex.
Bluish
Basic White
#ffffff
Light Blue
#6699cc
Navy
HEADERS
Aa
Trebuchet 32pt
Trebuchet 24pt
Trebuchet 16pt
Trebuchet 14pt
“Trebuchet™ Bold Italic, designed by Vincent Connare in 1996, is a humanist sans serif designed for easy screen readability. Trebuchet Bold Italic takes its inspiration from the sans serifs of the 1930s which had large x heights and round features intended to promote readability on signs. The typeface name is credited to a puzzle heard at Microsoft, where the question was asked, ‘could you build a Trebuchet (a form of medieval catapult) to launch a person from the main campus to the consumer campus, and how™’ The Trebuchet fonts are intended to be the vehicle that fires your messages across the Internet. ‘Launch your message with a Trebuchet page’. Character Set: Latin-1, WGL Pan-European (Eastern Europe, Cyrillic, Greek and Turkish).” – From Fonts.com
BODY TEXT
Aa
Trebuchet 32pt
Trebuchet 24pt
Trebuchet 16pt
Trebuchet 14pt
“Trebuchet™ Bold Italic, designed by Vincent Connare in 1996, is a humanist sans serif designed for easy screen readability. Trebuchet Bold Italic takes its inspiration from the sans serifs of the 1930s which had large x heights and round features intended to promote readability on signs. The typeface name is credited to a puzzle heard at Microsoft, where the question was asked, ‘could you build a Trebuchet (a form of medieval catapult) to launch a person from the main campus to the consumer campus, and how™’ The Trebuchet fonts are intended to be the vehicle that fires your messages across the Internet. ‘Launch your message with a Trebuchet page’. Character Set: Latin-1, WGL Pan-European (Eastern Europe, Cyrillic, Greek and Turkish).” – From Fonts.com
Mobile
The original site had no mobile design, maintaining a fixed-width the user would have to scroll over using his/her touch screen. The new design is mobile-friendly with a traditional hamburger menu.