Graphic Design maven Todd Hedgpeth tasked 1REALTOUR with a website production that would embody the sleek, cool, and effortless design that reflects TAWDDESIGN and his renowned portfolio in the print, digital, and branding world of graphic design. With a clear visual directive from the creator, 1REALTOUR not only brought Todd’s design to life on the web but also introduced modern web practices and style to showcase his incredible scope of work. The result is a website that looks great on all devices, yet shares the same theme design and presentation for both mobile and desktop devices. A truly seamless, responsive site that 1REALTOUR is proud to have been of part of creating.
TAWDDESIGN.com is built using a custom one-of-a-kind theme that was developed by 1REALTOUR for WordPress. The design utilizes a full width, responsive design that allows the work to shine. As a graphic design website, it was important to be able to showcase the extremely high-resolution artwork with zero compromises. Many of the image galleries include images exceeding 5000 pixels in width and height. In order to achieve fast load times and crystal clear images, a variety of techniques are employed. First, all images are delivered in the optimized file type for the device that is being used to view the site. Enabling modern file-types such as WebP allows the site to load incredibly fast, yet be backward compatible for all browsers. This also allows for the images to be retina-ready and look great on high DPI screens. Next, all images are delivered using a special custom API that resizes and scales pixel-perfect renders of each image. This technique is enabled on all raster-based images, such as TAWDDESIGN’s Print, Digital, and Packaging pages.
Logo Design is one of the many skills that TAWDDESIGN showcases on their site. As a branding powerhouse, TAWDDESIGN has created countless brand identities. These logos and their artwork require special attention when displayed on the web. Logos are what is considered a vector-based image, which means that they need to be absolutely crisp with no compression artifacts. These logo files are displayed using SVG and custom scripts because WordPress does not support this necessary file format natively. 1REALTOUR also included unique viewing parameters to maximize the browsing of each collection for phones and high-resolution production displays.
All of the galleries are enabled with custom touch-controlled gestures, such as swipe down to close. Also, the galleries are optimized to display the correct backdrop color, so that logos and photos are not affected by transparencies or blending of colors.
TAWDDESIGN.com is built using functional CSS. It was critical to his design vision that each page scale and look exactly the same on all screen sizes. To achieve this, computational styles are calculated using viewport and viewport height. This allows the browser to scale the text and images to maintain the correct layout without changing the proportions of the elements on the page.
Another unique aspect of the site is the use of custom typography. Special font packages were converted from hard to find legacy postscript typography into beautiful web fonts. You’ll see the use of this responsive text throughout the site.
The result is a timeless clean design that is unlike any site on the internet. TAWDDESIGN.com scores an excellent result on Speedom.net.