What if Charles Dickey Designed or Inspired a Website?

Charles William Dickey is an architect known for his Hawaiian style shareing a lot in common with some of the architects previously discussed in this series.  These include the modernists such as Mies van der Rohe and Alvar Aalto.  His “Hawaiian Style” was ushered in during territorial era of sustainable design in the islands (LaPorte 2020).  This style used elements of the California Spanish Colonial/Mission style with a Hawaiian inspiration to it (Morris 2005) from the grass houses on the islands (Morse 1999).

A ‘What if Wednesday” Post

Charles Dickey was born in California in 1871, but grew up on the island of Maui in Hawaii.  Later he earned a degree in Architecture from MIT and worked in Honolulu on the island of Oahu in Hawaii.  After awhile, he moved to California and then returned to Hawaii, where he lived the rest of his life to 1942.

The Richardsonian Romanesque, Italianate, and a fusion of Hawaiian and Beaux-Arts styles influenced Charles Dickey’s earliest designs.  Early work examples, such as the Oakland Rotunda and Claremont Hotel (PR Newswire 2022), are in California.  Later in his career, while in Hawaii, he started to develop a Hawaiian style of architecture, favoring open spaces and few walls.  His Hawaiian styles were reminiscent of the Bauhaus school and that of Mies van der Rohe.  Adaptations to the climate and culture of Hawaii made Charles Dickey’s style unique.

Charles Dickey is most associated with a double pitched or hipped roof, now known as the “Dickey Roof.”  The Dickey Roof, used a lot in the Hawaiian Islands, is of southeast Asian inspiration, but is generally geographically associated with Hawaii (Hamilton, et al 2021).  Other Charles Dickey architectural elements include spacious lanais (Bissell 2007) and green-tiled roofs (Morris 2005).  His high pitched roof has been used in the architecture of other tropical areas such as Florida (Penny 2023).

Charles Dickey is associated with some of the most famous buildings in Hawaii including the Territorial Office Building, the Baldwin Bank Building, and the Halekulani Hotel (Takeuchi 1992).  Other buildings include Farrington High School in Honolulu, the Wakiki Theater, and the Varsity Theater (Morse 1999) and the Central Fire Station in Honolulu (another Hawaiian Art-Deco structure) (Burlingame 2004).

The Basics of a Charles Dickey Website

A  website in the style of Charles Dickey would prioritize the Hawaiian Island’s natural beauty.  It would have a sense of relaxation and connection with nature mimicking the feeling of being in one of his buildings.  Information would be clear and concise and represent the culture and heritage of the local area.  An outline of the highlights is below:

•  Website Visuals
  •  Prominence of Nature: Large, high-resolution images or background elements showcasing the beauty of Hawaii would be included.  Examples include beaches, lush greenery, volcanic landscapes, or the natural location you are trying to showcase.
  • Open Layouts: A simple layout, having ample whitespace on the webpage would replicate the open lanais (porches) of Charles Dickey’s architecture.
  • Earthy Color Palette: Website colors should reflect the natural environment and include blues, greens, browns, and with accent colors reflecting those of Hawaiian flowers.
  • Use of Traditional Elements: Fonts and subtle geometric shapes, inspired by Hawaiian tapa cloth, and other cultural motifs should be used.
•  Website Features:
  •  Focus on Visual Storytelling: The website should have large images topped with minimal text, priotizing visual communication, and reflecting Charle Dickey’s focus on form and functionality.
  • Empasizes User Experience: A simple and intuitive site navigation, reflecting the clean lines and and user-friendliness of Charles Dickey’s designs should be provided.
  • Integration of Local Culture: Website elements should showcase the language, history, and cultural practices of the local area.  For example, Charles Dickey’s architecture was specialized for the local conditions found in Hawaii.
  • Sustainable Design Principles: Environmentally friendly practices such as sustainable hosting, reflecting Charles Dickey’s integration of natural ventilation and local materials should be considered.

The Prominence of Nature in a Charles Dickey Website

Charles Dickey’s architecture highlighted the unique nature and flora of the Hawaiian islands.  Whether or not you are in Hawaii, you can include the natural elements of the local area you are in.  However, Hawaiian examples could include:

•  Landscape Photography: High-resolution photos that capture the beauty of nature, such as views of the ocean, lush rainforests, volcanic peaks, and cascading waterfalls.
• Botanical and Animal Close-Ups: Detailed photos of the flora and fauna of Hawaii such as birds-of-paradise, tropical flowers, and the unique textures of hala, palm trees, and Lahaina’s banyan tree.
• Natural Textures: Focus on the textures found in your natural environment.  In Hawaii, these could include volcanic rocks, weathered beams, and woven lau hala (pandanus leaves) mats.

Presentation of Visuals

•  Include Fullscreen Backgrounds: Use landscape photos to create an immersive experience that transports your users to the Hawaiian Islands or to your location.
• Hero Images: Key pages should have hero image to capture attention and set the visual tone of the content.
• Subtle Overlays: Fullscreen backgrounds text should have a low opacity to allow the beauty of the natural world to shine through.  However, maintain functionality and the color contrast needed to comply with the Web Content Accessibility Guidelines (WCAG).
• Use Minimalist Framing: Simple frames or image borders should be used in order to not detract from the beauty contained within.
• Match the Typography to the Organic Shapes: Use fonts having curved letterforms or handwritten styles, such as those from sans-serif font families.  However, make sure that they are readable and clear with generous letter spacing, optimal heights, and have moderate stroke weights.  Reduce cognitive load with minimal font counts and loads.

Additional Things to Consider that Emphasize Nature

•  Have a Dynamic Background: Have subtle animations or background videos loops showcasing natural elements such as swaying palm trees, crashing waves, or passing clouds.
• Incorporate Black and White Photography: Just as Mies van der Rohe used black and white imagery, this image can be used to add some classicism and elegance to the setting.

Using Open Layouts

Charles Dickey used lanais (porches) that brought the inside out, similar to Mies van der Rohe, but he also brought the outside in, similar to Frank Lloyd Wright.  Your website can replicate the same feeling by:

• Having Spacious Content Areas: Include whitespace around text and images allowing the elements to breathe and avoid a cluttered feel.
• Focus on Content Hierarchy: Use a visual hierarchy to guide the user’s eye such as large fonts for primary content and smaller fonts for secondary content.
• Use Aymemetrical Balance: Use elements that are visually weighted, but not perfectly mirrored, by varying block sizes and placements.
• Use Minimalist Navigation: Simple and intuitive easy to find navigation bars would represent the clean lines and user-friendliness of Charles Dickey’s architectural designs.
• Use Plenty of Whitespace: Whitespace can be used to create a sense of calm as though you were in one of Charles Dickey’s buildings and allows the user to focus on the content.

Examples of Open Layouts

• Single-Column Layout: Profile large images in a single middle column that has whitespace on either side.
• Split-Screen Layouts: Divide the screen into two sections or columns.  Then have one for images and one for text.
• Asymmetrical Layouts: Layout elements asymmetrically to create visual interest and give flow and functionality.

Earthy Color Palette

Charles Dickey used colors inspired by the Hawaiian Islands.  Some of these include:

• Blues: Blue colors representing the vastness of the Hawaiian sky and ocean, ranging from calm light turquoise to deeper navys.
• Greens: Green colors representing rainforests and Hawaiian vegetation, ranging from light sage to dark forest green.
• Browns: Brown colors representing volcanic rock such as pumice and wooded houses, ranging from terracotta shades to taupes.

Accent Colors

Many attractive and colorful flowers are located in Hawaii and can be used accent colors.  Examples include the pinks of Plumerias, the yellows and oranges of ginger, and the reds of Hibiscus.  These colors can be used in calls-to-action buttons and adding some pop without overwhelming the earthy color scheme.

Choosing and Applying Colors

A cohesive feel can be acheived by using complementary colors.  However, when selecting colors, keep in mind the color contrast needed for accessibility under WCAG.  Use colors specific to the context, such as blues and turquiose for beach areas and greens and browns for rainforests.

Hawaiian Color Scheme Examples

All of these examples are reflective of the nature of Hawaii and serve as a starting point to finding a website color palette that is in the spirit of Charles Dickey’s designs.

• LIght and Airy: Light blue, light green, and beige, with pops of coral pink.
• Warm and Earthy: Terracotta brown, olive green, muted turquiose, accented with a mustard yellow.
• Serene and Sophisticated: A mixture of navy blue, forest green, and taupe, with accents of muted lavender.

Use of Traditional Elements

Charles Dickey’s designs had a local distinctiveness by incorporating Hawaiian cultural elements.  A website designed by him would endeavour to incorporate these same Hawaiian elements.  However, you can incorporate elements of your local area as well.  When using local elements, subtlety is key.  The references and nods to local culture should complement the overall website and not overwhelm it.

Ensure authenticity by using the elements respectfully and in the proper context.  For a contextual example, a section on Hawaiian history might include tapa patterns, while a section on surfing may include references to the ocean and waves.  Any of the elements used should look natural and not overwhelm or rule the site.  In 1998, a number of Charles Dickey inspired elements, such as tapa cloth and metal stencil designs, were used in the construction of the Hawaii Convention Center (Successful Meetings 1997).

Hawaiian Examples of Traditional Elements in a Website

• Geometric Patterns: Hawaiian geometric patterns would be inspired by tapa (barkcloth) designs and can be used for background textures, broders, or icons.
• Font Choices: Fonts could have a Hawaiian feel, incorporating curved lines or shapes suggesting tapa patterns.  However, whichever font is used should maintain legibility.
• Muted Colors: Using colors that are generally included in tapa cloth or other elements of the Hawaiian culture.
• Black and White Illustrations: Black and white line drawings or illustrations of Hawaiian flowers or plants, outrigger canoes, or surfers can add elements of culture to accent the page.
• Micro-Animations: Subtle animations of Hawaiian dance movements or weaving patterns can add some cultural connection to the page.

FOcus on Storytelling in Your Website

Charles Dickey made efforts to tell the story of Hawaii through his architecture.  You can do the same with your website by highligting a connection to place, integrating it with the local environment, and featuring real people and experiences.

Ways to Tell the Story

• Compelling Visuals: Include ample images and/or videos in your website to immerse the reader into the story.
• Engaging Text: Use clear and concise language to paint a picture and evoke emotion.
• Interactive Elements: Use interactive elements and user generated content to get engagement and develop deeper stories.

Examples of Storytelling on a Website

• A Dedicated “Our Story” Section: Detail the story you want to tell.  For example, with Charles Dickey, a story could detail his Hawaiian architectural journey, his design philosophy, and his impact on the islands.
• “Meet the People” profiles: Have feature interviews of local people or their short stories.
• Include a Blog Section: Publish articles that go into depth on aspects of your local culture.

Emphasize User Experience

Charles Dickey designed his buildings for people to truly immerse themselves into, experience the climate, and the culture of Hawaii.  Your website should strive to immerse the user in the local experience.

This can be accomplished by ensuring simplicity and clarity in navigation and text to develop the overall experience.  User feedback such as surveys or feedback forms should be used to identify places where the experience can be further improved.  If your local area has a particularly unique culture, an onboarding tutorial can be used to educate readers.  Gradually bring in information so as not to overwhelm readers and allow them to absorb the experience.

How to Incorporate the Local Culture (With Hawaiian Examples)

So far we have talked about how Charles Dickey strove to incorporate the Hawaiian culture in his designs.  Below are some Hawaiian examples, but these ideas can be adapted to your local area.  Just insert your area instead of Hawaii.  For example, include local language, but do not overdue it so you do not lose readers who are not familiar with it.

When depicting local cultures, be sure that it is done accurately and respectfully.  Respect the local culture and do not stereotype.  Working with local organizations can help ensure that the local culture is portrayed accurately.  In the case of a Charles Dickey website, you can make it a virtual journey through Hawaii.

• HIghlight Hawaiian Cultural Practices: Have dedicated sections that showcase Hawaiian activities such as hula dancing, lei making, surfing, or outrigger canoes.  Include clear explanations and images of what is happening.
• Incorporate Hawaiian Language: Use Hawaiian words or phrases throughout the website, using translation where needed.
• Feature Local Businesses and Artisans: Show the local flavor, by including local crafts, products, or places of tourism interest.
• Include an Interactive Map: Highlight local places of interest and spotlight their significance on a map.

Using or Educating on Sustainable Design Principles

Here at Silphium Design we help environmental businesses and organizations develop and design their websites.  A core value in the philosophy of Charles Dickey was respect of the natural environment.  This same value is central to the mission of those who working for the protection of the environment.  Imagine a website that is not only beautiful and informative, but minimizes its environmental impact.  Some aspects of your website that align with Dickey’s legacy and reflect a holistic approach to design include:

• Energy Efficiency: Charles Dickey designed his buildings to focus on natural ventilation and passive cooling using lanais.  Your website can do the same by using a green hosting provider and have an efficient data delivery process so as to not use a lot of resources.
• Use a Minimalist Design: Charles Dickey’s use of clean lines and focus on functionality aligns with efficient websites.  Having minimal and optimized graphics and images reduces the data load and energy consumption of the overall site.
• Use Sustainable Fonts: Use a lightweight font or a system font that is light on resources reducing data load and energy transfer.
• Show Green Badges and Certifications: If you are using green hosting and have designed your website with sustainability in mind, proudly show it.  This can encourage others, in a small way, to do their part in the protection of the planet and its resources.

Ideas to show your commitment to Sustainability

• Include a Sustainability Section: Include a small section, perhaps on the “About” page, explaining how the website was built sustainably.  Educate readers about the environmental impact of websites and the benefits of sustainable design.  Remember, the impact of an individual website is quite small, but collectively they do make an impact negatively or positively.  Make sure your impact benefits the planet.
• Highlight Local Businesses that are Making a Difference: Show and partner with businesses that are making a difference for the environment.

How to Measure Your ENvironmental Impact

• Website Carbon Footprint Calculator: Include a tool on your website where users can estimate the impact of their visit to your website.  This can help educate them and encourage them to adopt sustainable practices.  For instance, my native plant and butterfly garden blog at the McMullen House Garden Shop was designed for environmental sustainability.  On the Beacon and on the Website Carbon Calculator it scores an A+ and scores in the top 5% of websites for sustainability.  Some Website Carbon Calculators you can use include:
  • Website Carbon Calculator
  • Beacon
  • Ecograder
• Have a Plan for Regular Monitoring and Optimization: Monitor your website’s performance and identify areas for improvement in terms of energy efficiency and data usage.

Additional Things to Consider in Designing a local focused Website

A lot of the points covered in this section are considerations for the Hawaiian Islands, of which Charles Dickey was a part, but you can adapt them for your own area.

Repectfully Represent Your Area

• Acknowledge the Indigenous People of Hawaii: Clearly state that Hawaii has a rich cultural heritage belonging to the Native Hawaiian people.
• Avoid Stereotypes: Avoid portraying the Hawaiian culture in a simplistic or cliched way.  Explore it in depth and with respect.  The same can be done in other areas such as the American South, where there is a strong cultural identity.
• Partner with Cultural Events: Work with locals to make sure that your representation is accurate and respectful.
• Be Mindful of Appropriation: Celebrate your local culture, but do not exploit it for commercial gain.

Focus on Understanding

•  Use Inclusive Language: Employ language that is welcoming and inclusive to all, regardless of cultural background.
• Provide Context: Offer clear explanations of cultural elements to educate users.
• Focus on Shared Values: Connect the Hawaiian culture or your own local culture to others to promote a sense of understanding and appreciation on both sides.

Focus on Community

•  Include Local Voices: Showcase stories, perspectives, and experiences of local communities.
• Celebrate Cultural Diversity: Explore the cultures of Hawaii or your own area.

Example of a Charles Dickey Inspired Website

Conclusion

To conclude, a website designed or inspired by Charles Dickey will bring out the local elements of your area.  A website by him, should also be sustainable and respect the underlying culture of the subject being presented.

References

• Bissell, Therese.  2007.  A Tropical Variation.  Architectural Digest 64 (8).
• Burlingame, Burl.  2004.  Central Fire Station in ‘moderne” style.  Honolulu Star-Bulletin March 7, 2024.
• Hamilton, Sue, Thomas Heterki, and Mike Seager.  2021.  Imagining Polynesia: Heritage, Identity Politics and the Evolution of a New Rapa Nui architecture.  Journal of Contemporary Archeology 8 (1): 53-88.
• LaPorte, Brooke.  2020.  3 Prominent Architectural Styles of Hawaii.  Hawaii Home + Remodeling.  March 24, 2020.
• Morris, Nancy.  2005.  Hawaii Territory.  American Heritage 56 (2).
• Morse, Harold.  1999.  Architect’s work in Hawaii Notable.  Honolulu Star-Bulletin October 14, 1999.
• Penny, Marie.  2023.  The Tropical Ranch: Examining the Ranch Style (1948-1970) on Everglades Island, Palm Beach, Florida.  ARRIS: The Journal of the Southeast Chapter of the Society of Architectural Historians 34: 42-51.
• PR Newswire.  2022.  Rubicon Point Partners Acquires Historic “Crown Jewel of Oakland” Rotunda Building.  PR Newswire January 24, 2022.
• Successful Meetings.  1997.  Hawaii Convention Center: Jewel in the tourism crown.  Supplement Hawaii 46 (13).
• Takeuchi, Floyd R.  1992.  An architect is given his due in a new book.  Honolulu Star-Bulletin & Advertiser October 25, 1992.