Abstract
Responsive Web Design, a flexible that works for multiple screen sizes and devices, has changed the web eco system. However, maintaining a strong and consistent visual identity in a responsive web design is challenging because of nature of its flexible or liquid layout and navigation. The purpose of this study is to identify design strategies for managing the visual identity of a site, the placement of images, and navigation methods that work consistently across the framework of responsive websites and devices.
TopBackground
Responsive Web Design
To create a successful responsive web design, a layout that can easily be customized for different screen sizes is key (Voutilainen, Salonen, and Mikkonen, 2015). According to Voutilainen, Salonen, and Mikkonen, it is important to consider “proportion-based grids and flexible images, where element sizing takes place using relative units instead of absolute ones, and CSS3 media queries, where different styles can be used for different devices (2015).” Since the web page layout is liquid and flexible, the exact structure of the layout would not be an element that can be used to maintain the web site identity. Using images and design elements that can be modified using CSS media queries and script language while still maintaining the essence of the visual characteristics of the site are essential to a successful responsive web design.
Key Terms in this Chapter
Grid: Organizational structure used to create information templates.
Brand Identity: The visual elements and company’s identity can distinguish the brand in consumer’s mind and create brand identity.
Monochromatic: Color schemes uses only one color (hue) with various shades and tints.
Logo: A graphical element composed of a symbol and/or organization name.
Visual Identity: Visual elements such as a corporate logo, system elements, color system, typography to build company’s identity.
Experience Design: The way that the target audience experiences the brand from the first knowledge of the company through the complete consumer process.
Signatures: Combination of a logo mark and a company name.
Corporate Identity: Taglines, logos, and marketing elements which could build company’s identity and brand image.