DTFsuperstore
Responsive ECommerce STORE Website Design
This eCommerce website UI/UX redesign project was a follow-up project to a user interface touchscreen design previously worked on for the client. Our task was to revamp the visual and user experience design for DTFsuperstore.
During the discovery phase, we observed a surprising lack of color on printing supply websites, especially considering the industry's focus on ink color. Determined to differentiate our client's site, we infused vibrant CMYK colors (Cyan, Magenta, Yellow, and Black) into masthead imagery and design elements throughout the site. Using generative AI Artwork (via Midjourney) and Adobe Photoshop, we crafted captivating masthead images for the various standalone & product category template pages. The overall design features modern, curved-cornered panels with subtle drop shadows, while neumorphic design elements added depth to the sub-footer and select areas.
Please Note: Some of the web pages we designed for DTFsuperstore.com are quite tall. We encourage you to click on the tall images to view them at full size.
Registration + Login Main Screens
The Registration Screen and Login Screens feature slide-down panels that overlay the top of the eCommerce webpage, ensuring user focus. Vibrant explosions of cyan, magenta, and yellow against an all-black background, not only integrate the new chromatic brand identity but also infuse the entire website design with a dynamic visual language. The explosions of color were created using a generative AI artwork application. To differentiate between Registration and Login, we used different ink explosions.
Navigation Dropdown Menus
The Main Homepage + Custom Mastheads
We used neutral colors for the foundation of the website design. Jet black on the chrome and footer, white & light grey for content sections and dark grays for the sub-footer. This neutral base allows the vibrant colors to stand out while content blends in seamlessly.
Looking to break away from the monotony of plain rectangles or full-bleed images for mastheads, we've crafted the mastheads with extended areas specifically designated to showcase the section names for the product, product category and standalone web pages. That design langugae was carried over to the 6 main masthead images we crafted for the top of the main homepage using generative AI artwork we created specifically for the project. Each image injects vibrant colors drawn from the standard CMYK ink color palette. Some images were directly generated by the AI art application and subsequently refined using Adobe Photoshop, while others are composite creations that combine multiple images into a cohesive whole. Click the Homepage image to view at full size.
Product Category Page Template Design: List + Grid Views
The cornerstone of any successful eCommerce platform lies in its category and product pages. Understanding this, our web design team crafted a product category template page for DTFsuperstore.com using endearing, modern design elements that were equally as intuitive as they are trendy, serving as a blueprint for their developers and subsequent category pages. Within this framework, we designed a template for both List and Grid Views to cater to diverse user preferences.
For the important “Note” announcement at the top of the page we used a vibrant neumorphic design base for the icon to call attention to the Note + Tip sections. A breadcrumb was added below the masthead for easy navigation while the magenta hero color of the page carried over to the Featured Product labels and Note icon background below. A filter sidebar, which is ubiquitous on e-commerce websites, was added to facilitate quicker product discovery.
Click an image to view at full size.
Product Page Template + Category/Product Section Mastheads + Quick View Modal
A sophisticated, sleek Product Page template design, from the convenience of estimating shipping costs directly on the product page to the effortlessly legible product descriptions, every detail is designed to enhance the shopper’s user experience. With the added convenience of a discount table tailored for bulk orders, along with standard features like Recently Viewed products and curated suggestions in the You May Also Like section. With a focus on simplicity and functionality, our Product Page template design sets a new standard for e-commerce excellence.
Infusing Generative AI Artwork into the Brand Identity
Each Product Category & Product Page was adorned with captivating mastheads infused with generative AI artwork, reflecting the essence of the product lines. Delving into the intricacies, we carefully curated a unique color palette based on CMYK+W standards, ensuring visual cohesion and brand consistency across all six main product categories. In a stroke of creativity, we tackled the challenge of representing Powder Adhesives, employing a nuanced approach to depict their unique application process.
An additional masthead was created for Mimaki. Mimaki, is a leading manufacturer of wide-format printers and has their own branded, dedicated web page on DTFsuperstore.com which we designed.
QuickView Modal
On the Product Category List View page, each product entry has a quick view button that enables the user to view pertinent information about the product without leaving the page.
Shopping Cart + Orders & Addresses
To further emphasize the vibrant color branding, we integrated generative AI artwork into both the Shopping Cart and Orders & Addresses pages. Vibrant hues infuse the shopping cart experience, while a delivery truck adorned with the DTFSuperstore logo reinforces the brand's identity. Streamlining the user experience, we consolidated Orders and Addresses into a single page, eliminating unnecessary clicks and enhancing efficiency. This unified approach acknowledges that orders are associated with addresses, minimizing user effort and simplifying navigation.
A Look at Some of the Generative AI Artwork Mastheads
This masthead image conceptualizes a vibrant and dynamic office environment, showcasing employees engaged in phone calls and email correspondence. Designed with an artsy and colorful aesthetic, the base color palette adheres to CMYK standards, aligning with the project's overarching visual identity. The glass walls symbolize the company's commitment to transparency and openness, characteristics for which they are widely recognized.
For the DTF University masthead, we opted for a visually striking concept: a graduation cap descending amidst a burst of vibrant CMY colors. After generating the initial AI artwork, we brought the image into Photoshop and added the tassel using Adobe's generative fill tool.
For the Contact Us masthead, we crafted a dynamic composition by blending three distinct generative AI artwork images. Each element, including the tech support headset with mic and the illuminated keyboard, were generated separately. We then refined each image in Photoshop, removing imperfections and backgrounds, before seamlessly combining them. This approach visually conveys the diverse ways customers can reach out to DTFsuperstore.
Enhancing the visual impact, we've created a straightforward image showcasing a computer display prominently branded with their logo. Set against a backdrop of vibrant ink explosions, this composition captures the essence of DTFsuperstore's new sitewide branding.
Service & Support + Mimaki Landing Page
Incorporating custom generative AI artwork and neumorphic graphics, both page designs feature standout icons that enhance users’ visual interaction.
For the Mimaki masthead, we crafted an image of a warehouse bathed in vibrant CMYK colors, symbolizing their extensive range of printer supplies. Reflecting Mimaki's marketing strategy, we integrated two female figures into the scene, aligning with their brand identity and messaging. Because the Mimaki landing page is designed for the trading in or the trading up of Mimaki printers, the warehouse signifies the perfect visual metaphor for the abundance of options and opportunities available to DTFsuperstore’s users.
Be sure to click the images to view at full resolution.
Contact Us + Video Library + DTF University
The final three web pages we designed showcase a new visual style that is both structured and modern, offering a more intuitive way to deliver information to users. Click on an image below to view full size.
