This course provided knowledge about practical and theoretical skills in designing visually compelling, functional, and communicative websites, combining the principles of graphical design and visual communication with hands-on web design and implementation practices.
The course focused on how composition, typography, imagery, and content structure work together to support clear messages to a defined target audience in a digital context. A strong emphasis was placed on purpose-driven design, ensuring that visual form consistently supports content, usability, and user intent.
Core areas included in the course were image analysis and semiotics, vector and pixel-based graphics, functional graphic design for the web, information architecture, intuitive website navigation, and use of the WordPress Elementor framework.
A key outcome of the course was my improved abilities to connect the abstract strategic concepts, such as message, audience, and intent, into a concrete, publishable website design. By the end of the course, I was able to design and produce web pages that meet functional quality standards, adapt visual language to different contexts, and create optimized image assets for web use. Generative AI was used intensively to create both text, images, and videos.
Design project
The course was organized around a hands-on web design project tasked with improving the visibility on the web for Stillsamhetens Spa, a fictional Swedish spa resort. The project was to be delivered in two stages. An initial stage covering a graphical profile and graphical assets for social media and the spa resort website. The second stage involved the delivery of the website on WordPress.
Each project stage combined reading assignments, conceptual study material, and practical design tasks. Through these assignments, I explored typography, layout systems, color theory, image processing, and responsive web composition, while critically evaluating both my own work and the work of others.
Brief
A design brief was given as an outline of a business strategy and requirement specification for the design. I found the details in the handout brief to be insufficient in answering the strategy questions WHY and WHAT, required for a new communication and design plan. I performed a deeper market study and analysis on Swedish spa resorts, and additions were made to the project design brief to provide clarity in the intent, business priorities, and scope of work for a successful market launch. The following conclusions can be made regarding the spa and resort market, to further strengthen the project’s business and communication plan, contribute to the design of the graphic profile, and to the selection of content for the company’s website:
- The current spa offerings meet the basic expectations of private and corporate customers.
- Ecological and sustainable offerings can differentiate the message.
- New types of activities can extend customer stays and may increase revenue and staff efficiency.
- Growth within the segment today occurs primarily among private customers, with a predominance of female visitors.
- Increased digitalization, decreasing business travel, and fewer conferences mean that growth in the corporate customer segment cannot currently be expected.
- Marketing, market channels, and offerings must be based on the customer’s travel distance: day and evening treatments in the local area; treatments and themed activities in the nearby area; weekend spas and themed activities in regional areas.
- The primary market channels are social media, tourism, and industry platforms.
- The customer experience regarding bookings and payment must be improved.
- Meeting customer expectations is the most important factor in creating customer loyalty.
The deeper market analysis identifies that the company’s challenges can mainly be addressed through changes in three key areas: service offerings, marketing communication, and supplier agreements. The outcome this project focuses on is revised marketing communication. For marketing communication, it is important to clearly define how we want the customer to perceive the company and its offering. The message is based on the core values: Tranquility and Recovery. Local and Close to Nature. Sustainable and Organic. Personal, Professional, and Service-Oriented. The message can then be summarized as follows:
- Location & Atmosphere: The spa facility is located in a forest and lakeside environment. Buildings and interiors made from natural materials.
- Accommodation: Possibility of overnight stays in connection with treatments or conferences. Modern rooms with scenic views and proximity to nature.
- Food: Organic vegetarian cuisine with locally sourced ingredients.
- Spa: Massage & Skincare. Professional treatments with organic products, including classic massage, aromatherapy, facials, and body scrubs.
- Tranquility & Mindfulness: Quiet zones, relaxation rooms, saunas, and nature walks for mental recovery. Social interaction. Retreat.
- Ecological Profile: Sustainability focus with organic vegetarian food, eco-friendly products. Sustainable zero-emission energy systems. ‘Carbon neutral’.
Graphic Profile
In conclusion, the developed graphic profile must reflect the core values, expectations, and customer behaviors identified in the market analysis, particularly emphasizing the importance of customer understanding and target group adaptation. Spa customers in Sweden are primarily private individuals or small groups, often middle-aged and older women, seeking relaxation and a holistic experience in nature-oriented environments. The graphic profile should therefore convey calm, serenity, and rejuvenation. The analysis highlights the importance of sustainability, local anchoring, and an ecological profile. The profile should thus be based on colors, styles, images, and illustrations that evoke nature, sustainability, responsibility, and environmentally friendly choices. Core values, such as “nature-oriented,” “local,” “sustainable,” “professional,” and “affordable”, should be clearly used in the design language. The imagery should highlight the unique location: forest and lake, buildings made of natural materials, and ecological food. At the same time, simplicity and accessibility in the experience design are required to facilitate online booking, as the target group includes the older middle-aged demographic. In summary, the graphic profile should convey tranquility, exclusivity, and sustainability while fostering customer loyalty through recognizability and credibility. Marketing channels require a unified and recognizable profile that works in both digital and print media.
Colors
The colors in the graphic profile were designed to align with a spa, creating a calm, harmonious, and professional experience. The selected colors are based on core values from the lake and forest location of the spa, as well as its natural materials in buildings, interiors, and fabrics. The color scheme, along with the chosen names of the shades, is intended to visualize and verbalize a unique experience where nature meets the spa guests. “Find stillness between forest and lake”, in Swedish “Lugnet mellan skog och sjö”. A mood board was created to identify and evaluate suitable natural tones.
Identify the moods when finding stillness between forest and lake.
Two primary colors were selected. A medium forest color green (#407249) and a darker blue lake color (#4A6B7C). Additional complementary colors in green, blue, brown, orange, and red were selected for backgrounds, text boxes, and buttons. The green color is suitable for headings on a light background or as larger planes in the website design. The blue, brown, beige, and grey shades are suitable for separate planes and cards with light backgrounds. The signal colors are to be used for warnings, errors, or to draw attention to orders and offers.
Primary and complementary colors.
Logotypes
The logotype and complementary image were designed to fit the visual identity of the spa, creating something unique, associated with the company’s identity and core values. A list of keywords and associations was identified early as the starting point for the design:
- Calm – Still – Flowing
- Forest – Trees – Leaves
- Lake – Waves – Life
- House – Castle – Stone
The design of the logo is a calm, sweeping, script based on the Agatta typeface. The type was vectorized, and the individual character shapes were slightly edited. Kerning and modifying ligatures were easy to achieve a harmonious, connected form. The letter ‘i’ has been modified and tied to the company’s identity by replacing the dot with a filled leaf. The logo can be used on its own or together with complementary profile texts. The logo can be used in various contexts on a white or colored background, with the profile’s primary color.
Alternative logotype ideas tested during the design process with different shapes and color schemes.
Final complementary image and composition with logo, profile text, and complementary image.
A larger logo illustration was created as a composition of the logo, profile text, and a complementary image. The illustration is based on the same keywords and core values but uses a form with more size and detail in its composition.
Alternative illustrative composition with logo, profile text, and complementary image.
Web design
User roles and scenarios
An analysis, design, and marketing strategy, grounded in customer understanding through customer surveys. My updated design brief highlights the importance of business development for Stillsamhetens Spa. As a result of the strategic work, the website’s navigation is based on three archetypes and three typical users.
- Booking a spa treatment. Private individuals who frequently book spa treatments want to quickly reach the booking page, select a day, and book an available treatment time. The website’s navigation should be optimized so that the booking can be completed in under 1 minute with the fewest possible clicks and choices.
- New visitors as individuals, couples, or groups want to follow an advertisement from social media and explore more about Stillsamhetens Spa. They then want to design their stay with packages, treatments, and activities and receive a clearly comparable price. The navigation should offer a seamless experience with menus and buttons where the visitor’s interests and questions continuously guide them toward a booking. A customer should receive about 10–15 minutes of reading content.
- Companies and organizations want to see what Stillsamhetens Spa can offer and then request a price proposal for a conference stay that meets the company’s unique needs and requirements. The navigation should give the purchaser sufficient material to formulate a conference inquiry that can later be answered by the reception without additional questions. A purchaser should receive about 5–10 minutes of reading content.
The design must provide the following customer purchase phases:
- Discover. The customer discovers the company and its message on social media. The customer clicks a link to our website.
- Inform. The customer visits our website to be informed about our offers.
- Evaluate. Customers evaluate the spa offerings.
- Plan. Customers choose products, packages, discounts, prices, and availability.
- Book. Customers book, confirm, and pay.
- Rebook and Cancel. The customer can view and change the booking via the booking confirmation.
- Remind. Customers receive reminders about the booking and tips on preparations.
- Facilitate. Customers can get practical information during their stay.
- Recommend. Customers can share their experiences with others on social media.
Page design
The website’s initial design work was carried out as a series of analogue sketches that explored different alternative layouts with columns and grid frameworks as lo-fi sketches. During the second design phase, a more hi-fi design was created for typical pages such as Home, Spa, and Booking. Detailed designs were also produced for the header, footer, pop-ups, and buttons. The design defines the layout of the pages with sections, color blocks, images, and text. Typography is particularly emphasized with margins to create a balanced and consistent layout. The placement of text in direct proximity to images within a context creates a multimodal visual language, where meaning is formed by connecting words and images.
Page hi-fi design with header, sections, and cards. Paddings using a 2x design of 15-30-60px increments for blocks.
The page design uses sections, colors, panels, and cards that follow principles of visual hierarchy and readable information design to guide the user’s eye. The initial graphic profile and colors were refined based on the website’s content and its classifications. Pages are regularly given a beige background with a title in the green primary color. Intro and body text in black.
- Spa treatments and treatment staff are given a beige background with black text.
- Relaxation areas are given a blue background with white text.
- Hotels and accommodations are given a brown background with white text.
- Bookings, activities, and news are given a gray background with white text.
All text panels with a color, according to the graphic profile above, are also given a colored image overlay with 85% transparency, which brings the colored surface to life. The overlays are either custom images or patterns rendered in grayscale.
- Pages in beige use a pattern of a plastered wall from Astrid Lindgren’s World.
- Pages in blue use a downloaded pattern with bubbles.
- Pages in brown use an original photo of a wooden table.
- Pages in gray use an original photo of a brick wall from Astrid Lindgren’s World.
- Buttons are assigned colors based on the surrounding background color.
- All buttons related to an order are given an orange color.
Graphic line illustrations have been created to provide context, style, and vibrancy to the main headings of the pages. The illustrations use simple graphic symbols and patterns to convey mood and thematic elements. They are made using lines, circular segments, and pictograms from the Carbon Design System with a 0.7px line thickness.
Navigation
The three user scenarios are supported by the website’s navigation design. We can categorize the navigation into three classes: Top-down: Menus for structured choices. Sideways: Buttons to follow a reading pattern between pages. And finally, Steps: a sequence of steps leading toward a booking.
The website uses a menu that is common across all screen formats. For desktop, a horizontal menu bar is used. For tablets and mobile, a hamburger menu with a vertical menu bar is applied. The menu is hierarchical, with a main level for Spa, Activities, Conference, Accommodation, About Us, and Booking. A second hierarchical level exists for Spa, Conference, and About Us, with content divided across several pages to create easier overviews, navigation, and cohesive material. The website’s three typical cases and three typical users are directly defined by the menu. A simple booking can be initiated directly by selecting the Booking button, clearly identifiable on the menu bar in orange. The other two exploratory scenarios are driven by the remaining menu options, such as About Us, Spa, and Conference. The design supports the visitor in the question “Where am I?” by marking the current menu selection in orange.
A design that relies solely on menus results in an experience where users constantly return to the menu bar to proceed. This causes users to lose context and a sense of continuous forward movement. It is therefore important to present content within a section in context and then provide the user with guidance toward related or more detailed information. Buttons with options like “Read more” and “Book” are repeated in the design. The visitor is supported in the question “Where can I go?” by having navigation options clearly presented in each section. Navigations that lead to a booking are highlighted in orange on hover.
Text content
For marketing communication, it is important to clearly define how we want the customer to perceive the company and the offering. The website’s text and imagery are based on the core values: Tranquility and recovery. Local and nature-oriented. Sustainable and ecological. Personal, Professional, and Service-minded.
The texts for the website have been generated with AI to provide a clear, descriptive, attention-grabbing, and engaging advertising message. The images are descriptive in line with the page content and aim to provide a visually inspiring and sales-oriented view of the facilities, staff, treatments, and types of activities. An example of an AI prompt for accommodation is given below.
“I need a text for Tranquility Spa that describes the accommodation. There are both double and single rooms in premium and standard classes. The accommodation is arranged with premium rooms in the spa’s main building; the stone house. Standard rooms are located in the north and south wings. All buildings have a character of masonry stone with elements of wood and other natural materials. Some premium rooms have balconies facing the lake. All rooms have views of either forest or lake. Create sections with: An introduction to the accommodation. A section describing the stone house rooms and the wings. And a concluding section describing the premium and standard rooms.”
Image content
The visual material for the website has been developed and designed to create recognition, trust, and emotional presence. The images have been generated with the AI model Nano Banana. On the website’s ‘About Us’ page, two historical images of the Stone Houses from the 1890s and 1960s are displayed with the following two AI prompts. In both AI inferences, the image of the Stone Houses was attached to the AI prompt.
“An old black and white photo taken on photographic plate in the style of the 1890s. The house in the image with a gravel courtyard in front. Workers in 19th-century clothing. Several horses and a wagon loaded with boxes in front of the house. Piles of timber beams and boxes at the side of the house. A scene from an industrial plant. Landscape 4K format.”
Generated image of the Stone Houses from the 1890s
.
“A slightly faded photo of the house from the 1960s. Keep the house as in the image. A few people in typical 1960s clothing. A VW Beetle parked in front of the house. A roadway leads to a parking lot in front of the house. Landscape 4K format.”
Generated image of the Stone Houses from the 1960s.
Video content
A video for the website’s homepage was designed and developed. The composition aims to, through storytelling, show a day at Stillsamhetens Spa, from arrival at the spa, to check-in, accommodation, conference, spa activities, nature walks, a romantic couple at the evening spa, and concludes with a zoom-out of the Stone Houses in evening light. The video’s narrative structure follows the principles of visual storytelling where image sequences create meaning through rhythm, direction, recognition, and dramaturgy. The shorter video clips were generated with the Veo 3 model, each cut to about 3 seconds, and composed into a single 30-second hero video for the home page. Low quality, 540p, and high compression gave a small file size allowed for upload to WordPress.
A clear workflow for text, image, and ideas has been established. One begins by providing AI with all the text material. For texts, a simple AI prompt is given about the desired content. The AI response is checked, edited, and then included in a document with the body text section. Work is done in sections, page by page. For images, one freely starts with an image idea in an AI prompt to Nano Banana. One generates one or several images, selects one, and continues iteratively by adding objects, people, or changing the size of the image with new AI inferences. Generated images are often combined, e.g., by generating models and then placing them in a generated image as a scene. Finally, the image is given to Veo 3 with an AI prompt to “Create a video with motion in the image. Landscape 4K format.”
Example below of a generated image and the animated video clip.
The shorter video clips were generated with the Veo 3 model, each cut to about 3 seconds, and composed into a single 50-second hero video for the home page. Low quality, 540p, and high compression gave a small file size allowed for upload to WordPress.
WordPress and Elementor
The website was implemented in a standard installation of WordPress, configured with Elementor v3.30.2 and Elementor Pro v3.30.0. The website uses components, structures, and global definitions from the Elementor framework. The Elementor editor has been used for editing. Global definitions are used for site settings, fonts, and colors. The Elementor framework is used to create the header, footer, loops, and popups. Elementor’s page and component hierarchies are used to build the site’s pages and content. Elementor components such as containers, headings, texts, images, buttons, spacers, grids, tabs, and accordions have been utilized.
The website’s information architecture was defined early in the design process by identifying pages, categories, and posts.
- Pages implement the static structure accessible from the website’s menu. The number of pages is fixed based on the site’s navigation and functions.
- Posts implement the content that dynamically fills the pages. By categorizing posts, queries can be created to select which posts will appear on a page. Examples of posts include spa, accommodation, and conference packages, treatments, conference and guest rooms, activities, and news.
- Categories were structured as hierarchies to allow for precise content selection. For example, the category ‘Activity’ selects all activities, and ‘Activity’ + ‘Guest Speaker’ selects the activities planned as topic-specific events. Similarly, ‘Accommodation’ + ‘Rooms’ + ‘Available’ selects the rooms that are available for booking. By using the Elementor loop grid component, a query can be defined. The query selects categorized posts which are displayed in a grid, e.g., on a booking page with rooms or activities available for reservation.
Stillhetens Spa
The final website consists of the following pages.
lnu.seBild och grafisk design för webben.