Design Education

January 14, 2026

Digital Image Editing

The course balanced the practice- and analysis-driven practices in Digital Image Editing by focusing on how digital images are created, edited, and optimized for contemporary digital media. The course included technical image-editing workflows in Photoshop and Lightroom from raw image to publication-ready visual content.

The coursework included pixel-based image editing, color correction, retouching, non-destructive layer-based workflows, and image optimization for web and digital interfaces. Particular emphasis was placed on understanding color spaces, resolution, file formats, and how technical image properties influence visual quality, accessibility, and user perception across different platforms.

Through hands-on assignments and book-led exercises, the course strengthened a structured and reflective workflow for image editing, often as a technical process. The course developed skills in visual analysis ensuring that images effectively support purpose, context, and target audiences

Flying geese in the morning sky

This image is a recomposition of an advanced layer exercise. The new composition takes an alternate approach to the cloud coloring as I noted that the original composition of high and low clouds did not make physical sense with incoming sun from the left. There should be sun reflections also in high clouds. Then, added a scene with flying geese in V-shape caught in the moment when an SAS Airbus was passing by for landing. The airplane, as the goose, is illuminated by the rising sun. Many layers used that could have been flattened, but kept for clarity on approach.

Home preparedness

Design for a promotion image used os a billboard, poster, print, or screen from Naturkompaniet as part of a fictitious marketing campaign to push home products to consumers taking actions on guidance from Eng:’In case of crises or war’, Sv:’Om krisen eller kriget kommer’. The intent of the design is to attract viewer attention by using short, familiar phrases like “Home preparedness”, “Hemberedskap”, “Beredskapslager”. But also add a little twist to the message by introducing color and symbols of forest, nature, and expeditions. This leads the viewer to a dual conclusion and question: is this home preparation for a crisis, or for my vacation? The design is intentionally simple and clean. All to attract with a sticky, simple, actionable message: “Buy now to be prepared for any event”.

The composition uses logos and products related to the topic. It also uses a ‘forest’ pattern as a PNG file that was imported and used as a background pattern. There is a ‘background green to transparent’ gradient that only shows the forest pattern on the top of the image.

Into The Wild

The design of the poster is a progression from my previous LNU class in design and typography. The task was to create an ad on the theme of limitations using only objects as characters, and to secondly, in a following step, explore contrast to create an alternate design, with a radically different outcome. The ad is promoting the launch of a fictitious second book by John Krakauer in an ‘Into The Wild’ series, to be presented by the author at the Gothenburg book fair in 2026. The objective was to deliver a better design by applying my new image editing skills in composing a more vivid ad.

The composition for this assignment contains three basic parts: the header and copy text, a man in a kayak in rough winter weather conditions, and a surrounding border. The composition is applying limitations and contrast? through type, a monochrome color scale, and greyscale images. The typefaces used are Script, Brush, and Sans fonts. The kayak picture part of the composition is using an arrangement of multiple edited images; a photo of ocean sea waves, a photo of a man in a kayak, and several overlay images with clouds and drops.

To make the kayak and sea appearance visually convincing, the sea waves photo has been masked into foreground and background layers. The kayak and its surrounding waves are placed in the layers stack between the foreground and background. A masked photo of Häradskär lighthouse has been added at the horizon. The sea and sky layers have been converted with a B&W adjustment to a harmonious greyscale. The kayak, the man, and equipment have been isolated into new layers by using selection tools and the ‘New Layer by Copy’ command. The colors of the kayak layers have been uniquely tuned by Contrast and HSL adjustment layers. This creates the recoloring to red, resulting in high contrast. The sky is central to the composition. It graphically creates a readable contrast, with grey ground to red text, and visually creates the connotation of survival under rough winter adventure conditions. Overall, the composition is using a vertical central line. The balance is achieved by the asymmetry of the waves and kayak to the left, balancing the copy text to the right. Similarity with the monochrome red color objects, in contrast with the grayscale background. Texts in proximity.

Workflow-wise, much of the Photoshop editing of individual objects has been made in separate development-style PSD files. Then promoted by copy-paste when ready into the final integration-type PSD file. A common software development workflow. Hence, working in stable stages with minimal risk of crash-and-redo. Rulers, guides, and layer groups are used in the layout to ensure linear adjustments. Especially layer groups are extremely valuable both to organize layers by containment, but also to apply common adjustments to a group of layers by providing a single handle for performing pixel-perfect layer group adjustments.

Halloween Twins

My photo montage for a final Photoshop assignment is a composition named “Evil Halloween Twins” with my grandchild Ellie appearing as a pair of creepy twins in a Halloween scene. The intent is to create an unpleasant connotation with a contrast between an unnaturally happy twin in the foreground and a creepy twin lurking behind, being ready to strike. I tested the final image with friends, and they confirm that they get an uncomfortable feeling, not knowing who of the two twins they would rather like to meet.

The composition is made up using our family photos. A background photo from Halloween at Kolmården in 2024. And two recent photos from 2025 with Ellie getting ready for a Halloween party at school. The montage also uses a fog stock image. Backgrounds in the Ellie-photos have been removed in Photoshop using the Object Selection tool and selection fine-tuning using the Quick Selection tool. The selections are used to create a mask that removes the photo background. Resulting twin characters have been added to the scene background so that Creepy-Twin is behind Happy-Twin in the foreground. Their individual scale has been adjusted to visually match their relative position and the perspective to the background. Their head positions have been guided by the Rule of Thirds, creating a dynamic symmetry to the final image.

The original images, both background and characters, do not have a lot of shadows and highlights. All photos are rather flat. Also, any original lighting may not work well in the composition. Hence, a better situational approach was used by creating transparent gradients simulating shadows. Masks in the gradients are used to create highlights. To create depth in the montage, a lens flare is added and a gradient is used from the lower left across the background. The fog photo is used as a mask layer to produce a faint fog on the background. Colors have been corrected to a uniform, slightly warm red shade. This darkness hints to the viewer where evil hides. Shades are added on the characters, creating light to come in between the two twins. The faces are lighter and sharpened, and bodies are blurred and darkened by the shadings. The use of directional shading gradients was essential here. Masks are used to make the eye creepy bright with eye light reflections adding contrast and dynamics.

The Photoshop workflow in this assignment is identical to the previous poster. I do editing of objects in separate PSD-files and then integrate the ready result into the final integration PSD-file. Layer groups are used for layer organization.

lnu.se
Digital Image Editing.

Into The Wild (full size).

Halloween Twins (full size)

January 13, 2026

Image and Graphic Design for the Web

mats Design Education

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.se
Bild och grafisk design för webben.

January 4, 2026

Graphic Design and Typography

mats Design Education

In this Graphic Design and Typography course, I developed my abilities to apply composition, graphic design, and typography as a visual and communicative expression. The class included basic rules and theories in typography, composition, color, and design. I deepened and practiced my abilities to reflect on the relationship between graphic elements and typography in different contexts, the importance of visual communication for the recipient, to critically examine my own and the work of others’ in the class. The class did not only explore practical tasks in graphic design but also written reports and reflections.

Key takeaways

Understanding principles and rules in compositions and layout.
Understanding rules in typography and classification of typefaces.
Understanding rules in gestalt and color theory.
Performing critique and reflections on graphical designs and typography.
Production use of Adobe InDesign, Affinity Designer, Affinity Publisher, and Affinity Photo.

Denotation and Connotation

An image selection task practiced finding and composing pictures on a theme ‘I have a dream’.

US Football: “I have a dream of a play and victory.”
Ukraine: “I have a dream of peace and freedom.”
C-level executives: “I have a dream of shareholder value.”
Generations: “I have a dream of motherhood. Past, present, and future.”
Refugees: “I have a dream of a meal today”.

I have a dream composed of royalty-free images.

Brainstorming

A brainstorming task practiced finding solutions to a “Social when apart” online event for distance students to get to know new people at the university. The task practiced the discovery stages of ideation, sketching, refinement, and reviews.

Mindmap with information object relations.

Sketches of event poster and experiences.

Page layout

A task in layout practiced the design process to produce a magazine print layout from an article by Sarah Laskow, including the steps of sketching, choosing imagery, creating the design, and analyzing the work.

The layout used a Portrait A4 layout with a 3-column and 4-row grid. The opening spread used a brown dwarf star with an intense galaxy background illustration that catches the eye and creates an interest with the reader. The text is much elaborate on the physical items sent into space, and I want to bring this to the reader as photos. I found photos of the Pioneer 10 and 11 plaques, the Sound of the Earth disc, and the Moon Art chip on Wikipedia. The author also discusses the event of a return message from space. I wanted to create a fun illustration on the topic and took a modern chat-rail design to make that into a conversation between the radio telescope sending out “Hello” in all human languages and a rather weird reply from the alien. I used AI to generate a list of “Hello?” into 100 unique language translations, that then was used in the graphic illustration. The alien language is using mathematical symbols as a text string.

The ‘Is there anybody out there.’ article layout.

Limitations

The Limitations task was exploring the communication of the message “Into the Wild”. The design was limited to only using a kit of found objects, assembling these objects into letters, and creating a composition that conveyed the message. Objects may also be used as illustrations, backgrounds, and patterns to enhance the message.

An initial concept composition of objects into the message using keywords associated with Sensation-Seeking: Adventure, Survival, Boredom, Sensations, Existential, Idealism, Identity, Hero, Nature, Freedom, Reliance.

Concept composition and layout.

The graphic layout is putting a focus on key design concepts. The objects form a hierarchy using different colors to associate green with letter objects and red with the kayak and route objects. The layout is using lines and planes as base graphics elements, such as the form of squares, borders, line thickness, and color. The elements are also using symmetry and asymmetry with the grid, rotation, and non-centered text alignments. The elements and background are using color contrasts to enhance the object design. Also, the type is using a graphical hierarchy of title, author, and abstract.

Final realized composition as a poster for an author session at the Gothenburg Book Fair.

Constrasts

A sequential task explored the design of an entirely different composition, using the contrast keywords: Concrete pictorial. Natural analogous colors and scales. Sans, sans, serif, and script typefaces.

A moodboard was a highly productive tool in identifying themes, colors, and moods. I used similar techniques in UX designs but did not make the connection back to this field of graphic design.

Moodboard for ideating on shapes, analogous colors, themes, mood, and expression.

The final graphic layout was further deepening the key design concepts. Using analogous colors with Yellow, Orange, Red as a base color combination. Also limiting color use to 3 shades of Blue and Grey for background. Staying strictly to the recommended typographic design rule of Sans for title, Serif for copy text, and Script for call-outs. Using vivid strong color images to guide the viewer on mood. Calm, Restful, Silent, Open. Using simple shapes for vector illustrations. Planes, Circles. Contrasting the static and abstract illustration designs with natural organic forms.

Second composition in contrast to the first poster, advertising the session at the Gothenburg book fair.

Ocean Plastics

The final graphical design and layout task used all new skills in one design project; research, ideation, sketching, and creating a visual tone, composition, typography, and page layout, using images and color. The task was to create a design on the topic of ocean plastics. ‘Plastics polluting our waters – what can you as a graphic designer do?’.

For this design, I needed to deepen my understanding of ocean plastics, complementing my current insights into the sustainability subject area from university classes and my professional experiences in sustainable enterprise SW design. I focused my research on the following questions required by the design task. Who are the users of the design? What is the problem to be addressed? What is the intended outcome? How can design contribute to this outcome? What are the requirements on the design delivery?

From these questions, a series of more detailed research topics stood out. Understanding of the Ocean Plastic crisis. Understanding the chemistry and industrial use of plastics. Understanding drivers of learning for students. Finding validated statistics and leading quotes that will engage a senior student and influencer. Understanding United Nations social and environmental sustainability programs for plastic resources and the ocean environment. Understanding any graphical and typographical design languages and standards applicable to the task.

During ideation, a set of storyline statements for the project was created. These statements of outcome and intent form the core of the project pitch:

“This fictitious design project has been initiated by UN DESA, post the UN Ocean summit 2025 (UNOC3), to produce senior student material targeting the ocean plastic crisis. The delivery is to be owned and published by UNESCO. The material design is commissioned to a design studio to be delivered by August 10th.”

“The United Nations wants to build senior student cognition of a global ocean plastic crisis, give clear opportunities to reduce the one-time use of plastic products, and through deeper studies build motivation for a personal and community-centric sustainable behavioral change.”

“Senior students can, in less than a day, learn about the ocean plastic crisis, become self-motivated to deepen their environmental awareness, and start changing their plastic consumption patterns while influencing others to join.”

The research provided input to the multi-page structure of the student workbook: The ocean plastic crisis, The great Pacific garbage patch, The chemistry of plastics, The lifecycle of plastics, The UN SDGs, especially goal 12 and 14, Behaviors and actions, Study topics and science projects.

For this student workbook, I needed front- and back-page layouts, a consistent spread layout, guiding designs for image layouts on spreads and pages. Guiding quote, callout, figure text, page numbers, and image gallery layouts. The final decision was to choose:

A4 portrait format.
Spread / page layout is using 20mm top / bottom / outside margins, and a 10mm inside margin.
3-column symmetric layout.
Blue monochrome color swatches. Yellow accent color swatches.
A hierarchy analysis leading to a specification of fonts and scales used in the layout cases.

The final design was performed using Adobe InDesign. Illustrations were created as vector art in Affinity Designer. Photos were edited in Affinity Photo.

ocean-plastics

The delivery owned and published by UNESCO will be delivered in multiple languages. To test the layout, a localization to Thai was produced.

lnu.se
Graphic Design and Typography.

Into The Wild poster

Into The Wild contrasts poster

Ocean Plastics student workbook.