Students inside a College Interior.

    Legat Architects—a distinguished architecture firm in Chicago sought creative design assistance from ArtVersion with the goal of revitalizing their web presence, and brand identity with a modern look, and crafting a brand-new look and feel.

    Project Disciplines

    01
    Web design
    02
    Brand strategy
    03
    Logo Design
    04
    Logo Design
    05
    Graphic design
    06
    Marketing collateral
    Desktop Screen UI Design Learning Project.

    Design Language

    For Legat, their vision was to tell their story in an engaging and inviting way.

    The website allows Legat’s audience to newly discover the impactful architectural work that they continuously design to improve lives and inspire communities.

    College Library Interior and Large Windows.

    Web Design

    ArtVersion collaborated closely with Legat team to design a website that truly reflects their innovative approach to architecture. Our team focused on creating a visually compelling and user-friendly platform that showcases Legat’s extensive portfolio, emphasizing their commitment to sustainable and community-focused design. By integrating responsive design elements and ensuring a seamless user experience, we helped Legat Architects communicate their brand values and expertise to a broader audience, positioning them as leaders in their field. The result is a digital experience that not only highlights their architectural prowess but also engages and inspires their target audience.

    Desktop Screen UI Design featuring school grounds.
    Web design examples on multiple devices, showcasing ArtVersion Web Design Agency work.
    Website design examples featured on multiple screen sizes designed by ArtVersion Web Design Agency.
    Web design examples featured on mobile and desktop devices.
    Early wireframe designs for work, about us, and design webpages

    Responsive Web Design

    Mobile First Approach
    Care at the Core Wellness Mobile.
    Design with a Difference Mobile Screen.
    Benefits and Perks Mobile Screen.
    Staff Quote and Headshot Mobile Screen.
    Learning Project Mobile Screen.

    User Interface Design

    Web Design

    Learning Pillar Section of UI Screen.
    Design With A Difference Statement on UI screen.
    UI Screen Services.
    A desktop web design screen featuring a staff quote and headshot.
    Wellness Portfolio Project.
    They are extremely talented designers and experts. They created a user interface that gives site users meaningful experiences and a digestible roadmap on the website.
    - Director of Marketing | Business Development
    keyboard_arrow_up
    keyboard_arrow_down

    Entrepreneur and Fast Company Spotlight

    ArtVersion’s work on the Legat brand and website design has been prominently featured in both Entrepreneur and Fast Company, showcasing the seamless blend of graphic design and web development principles that the agency is renowned for. The article in Entrepreneur highlights how ArtVersion’s design approach transforms concepts into visually compelling digital experiences, while Fast Company feature focuses on the purpose-driven, human-centered design philosophy that anchors the Legat website. 

    Brand Identity

    The refreshed brand identity included geometric shape elements that uniquely represented each sector of Legat’s project portfolio: learning, wellness, and community. They added visual appeal and pops of color that worked cohesively together. Each element had a symbolic story — an oval for learning and renewal of new generations of students, the square for strength and health, and the circle, evocative of community and togetherness.

    Brand colors in geometrical shapes for an architects company.
    Poppins Light A letter.
    Poppins
    Light
    Poppins Regular A letter.
    Poppins
    Regular
    Poppins semi-bold A in orange.
    Poppins
    Semi-Bold
    Poppins bold A in orange.
    Poppins
    Bold

    Typography

    Poppins typography was selected to be utilized across Legat’s website—headers, body text, as well as for brand collateral. As a geometric sans-serif typeface, Poppins offers clarity and structure for easy readability in all visual representations. The curvature and roundness of this typography selection reflect the welcoming tonality of Legat’s brand mission with a modern look and feel.

    Color Selections

    The primary colors represent the different segments that encompass Legat projects—learning, wellness, and community. The orange color is one of the core colors found throughout the Legat logo, branding materials, website, and represents the ‘community’ segment.

    The lime green color selection was also chosen to represent the ‘learning’ sector, along with the blue which is visually representative of the ‘wellness’ sector. 

    Lime Green
    #D1D62B
    Teal Blue
    #4A9CB8
    Bright Orange
    #FF6B0D
    Blue Gray
    #D9E3EB
    White
    #FFFFF
    Charcoal
    #313131
    Hotel Interior Reception Desk.

    Logo Design

    An all-encompassing website revamp often goes hand in hand with brand rejuvenation to ensure a cohesive brand representation. ArtVersion refined the Legat logo typeface with different font weights — using a robust, bold style for ‘Legat’ contrasted with a delicate, slimmer ‘Architects,’ added a dynamic quality to the brand identity. 

    Logo With Tagline Layered on Image.
    Client's logo negative space and area of isolation.
    Logo on a Tote Bag.
    Logon on Journals.
    Four phones with ui screens bouncing on blue background.

    Anniversary Logo Design

    After reaching their 60th anniversary, Legat celebrated this milestone by posing ArtVersion to create a commemorative emblem to enhance their existing logo.

    ArtVersion's graphic design team incorporated shapes from the new design language, crafting a logo that emulated the idea of the building blocks coming together to visually build Legat's 60-year legacy throughout the years.

     

    To add dynamism, the team also designed an animated version of the emblem, which appeared alongside Legat’s standard logo, narrating a story of celebration and brand values. Furthermore, an interactive element was introduced with a hover animation on the anniversary logo. This feature, when engaged, showcased underlying layers that spotlight significant projects in Legat’s portfolio, linking directly to those specific project pages. Additionally, ArtVersion augmented the Legat website with a dedicated page that promoted the anniversary while also showcasing the company's culture and teamwork.

    Anniversary logo construction design.
    An anniversary logo design for an architects firm.
    Anniversary logo design for an architects firm celebrating 60 years displayed on a banner.
    Anniversary logo design for an architects firm celebrating 60 years displayed on an iPad device.

    Scalable Design

    Building on their successful collaboration for the 60th-anniversary logo, ArtVersion extended their partnership with Legat by developing additional pages for the website, focusing on Legat’s “Special Projects” services.

    This section, prominently featuring construction and safety services, included a landing page with sub-pages for various case studies. ArtVersion embedded a familiar layout and hierarchy consistent with the existing website design, creating a seamless integration of the new pages to maintain a unified site experience. To enhance visibility, the team purposefully created pathways leading to the new section, incorporating links across the website, service pages, and homepage navigation.

    The additional pages enriched the website's content and showcased the CMS’s scalability and the forward-thinking design approach that was initially envisioned in the early stages of the website development. This addition emphasized the adaptability and longevity of Legat's digital presence, aligning with its ever-growing impact in the architecture space.

    A mobile device displaying menu navigation of an architects website.
    A flat UI tablet view showing scope of services webpage.
    A laptop screen displaying an anniversary celebration web page.
    ArtVersion graphic design: Legat business cards.

    To accompany the visual design, there was a comprehensive refresh of Legat's messaging and narrative ethos. 

    The content strategy team collaborated closely with Legat, meticulously crafting a narrative woven around a core theme: design with a human-focused lens. 

    This central theme emerged from Legat's mission to underscore their positive impact on their communities and their commitment to enhancing lives. 

    To weave the brand's revitalized identity into every aspect of its presence, Art Version also overhauled Legat's marketing materials. This included an updated brand style guide, redesigned collateral templates, modernized business cards, sleek presentation templates, and more. 

    A clients logo on tape stationery.
    A close up of an article design.
    A collateral inner spread design.
    An article designed inner spread.