MDM690 Reflection

Telling the Story of a Project

I write stories for fun in my free time but I have never applied this type of thinking to explaining a project. My initial understanding was to just go through the project element by element. While this covers the pieces it does not always tie them together to illustrate the overall concept. Understanding CAST helped to learn how to apply something like the three part story structure to the project narrative. Using a story structure walks the audience through the goals and ideas in a way that is more than just presenting information (Sykes, Malik, & West, 2012). Approaching the structure this way made me look at the information and images I had and experiment with layouts.

Each layout experiments with a different hierarchy to present the story of each project. Finding the right way to tell a visual story rarely comes on the first try, it can take days, weeks, or months of iteration to find the right one (Sykes, Malik, & West, 2012). The iteration did not stop in the sketch stage. Once I got into Wix I experimented with the tools and features to find interesting ways to present the information. Eventually I found a solution for each page that allowed for the images and text to work cohesively to tell the story.

Screen Shot 2019-10-27 at 11.53.00 PM
This is a portion of the Solving Problems page that demonstrates how using a story structure organizes the information.

When approaching a narrative, I focused it around a central question. The major dramatic question is the protagonist’s main goal and it is what keeps the audience reading (Dahlstrom, 2019). In the narratives for these pages, the central question was the client problem. The question for the Solving Problems page was how to increase tourism for Reykjavík. The first image on Solving Problems shows the design process with text below it that elaborated on how that process was applied to answer the central question. An alternate version of the process is added except this uses visuals from the project. This shows how the design process influenced the workflow and informed the next step.

By being able to fully layout and expand on the process it helps to create a cohesive and persuasive argument. This skill will transfer to making pitches for projects. It can also be applied to learning how to tell a brand story. Being able to gather elements of a brand and lay them out so that the reader can understand the product will help with getting a new consumer on board. This story telling will also help when creating brand guides. By creating a full blown narrative that keeps the reader going, a greater understanding of the brand can be imparted.

 

Utilizing Page Layout

My background mostly involves working with print but I have done some web design. At first creating a layout that balanced the text and images was difficult because my previous experience with web design had very little text handling. Approaching this project as a magazine or book spread made the process a little easier. When creating thumbnails for different layouts, I tried to utilize different grids. Grids provide structure without forcing the design into even and symmetrical layouts. Mix and matching grids creates more interesting layouts that arranges “different elements for a more dynamic look while still being well structured” (George, 2013). Combining different grids allows for a layout that can have a block of text and then an image with a break down next to it without disrupting the flow.

This project also forced me to look at how to use space. Being able to break up a composition so that it was not a wall of text was important in setting the pace. Separating out elements using negative space “works best when you have a clear structure that anchors content together” (Hampton-Smith, 2018). The anchors that I used for the pages were the boxes of color. They help to separate out information and the bright pop of color draws the eye. It helps the viewer understand the hierarchy.

The Innovative Thinking page uses space to separate the information while keeping the pacing intact. The space in Acquiring Competencies is meant to separate the information into a list format. The headers act as an anchor to draw the eye.

Understanding how to better utilize space will help to create stronger hierarchies, and more interesting layouts.

 

Creating An Overarching Theme with Variety

While each page had to look different, they are all part of the same site and need to have some cohesion. Repetition of design elements were used to create this unity. By “identifying and re-using a motif or design treatment throughout [the] layout, can provide a reference for the reader so that disparate areas feel connected and part of the same overall composition” (Hampton-Smith, 2018). The unifying element I used was a consistent use of color and margins. The colors that were chosen match the colors on the homepage images. This helps to tie each page to the image that was clicked. Adding the color to grids, lines, and boxes created a set of visual rules that create continuity despite the varying layouts. Keeping a consistent margins also helped to create unity because it kept all the content in similar sized containers. It just varied how the information was stacked. Developing this skill helped to develop my web design skills and can also be applied to my ability to make page spreads.

These screen shots show how color is used to create a unifying theme without using the same layout for every page.

 

References

Dahlstrom, A. (2019, December). Storytelling in Design: Principles and Tools for Defining, Designing, and Selling Multi-Device Design Projects. OReilly Media, Incorporated. Retrieved from https://ce.safaribooksonline.com/book/software-engineering-and-development/user-interface/9781491959411.

George, J. (2013, January 15). Grid-Based Layouts 101 – DesignFestival. Retrieved from https://www.sitepoint.com/grid-based-layouts-101/.

Hampton-Smith, S. (2018, September 26). How to create balanced page layouts. Retrieved from https://www.creativebloq.com/netmag/create-balanced-page-layouts-7-pro-tips-121310009.

Sykes, M., Malik, N., & West, M. D. (2012, December). Stories that Move Mountains: Storytelling and Visual Design for Persuasive. John Wiley & Sons.

Thumbnail Sketches for Thesis Site

Image Selection:

CST_Images  PS_Images  IT_Images  AC_Images

 

Layout_001

Layout 01

This type of layout uses a simple, centered design. The strength of this layout is that the text blocks create a focal point to help lead the reader through the page. Using a “strong visual can provide a powerful way to lead the reader…and also supplies a useful structural element around which to arrange the remaining content” (Hampton-Smith, 2018). The text will act as an over arcing block that will provide a container for the rest of the page. There will be a section of the written thesis followed by imagery that illustrates the points that are being discussed. By setting up the information this way, it provides both a written explanation and a visual to demonstrate a mastery in both the conceptual and the application. The images break from the single block setup to create separation from the text and create variation. By combining two types of grids it allows for mix matching which leads to a more dynamic but structured look (George, 2013). By placing the text in a larger block than the images it helps draw the reader to the text first. As they read, it will guide them to the related set of images. Then the next big block of text will bring the reader back to the next point. The way the Solving Problems page is set up is to reflect the design process. The first image shows an illustration of the development process with each image underneath it being an illustration of each stage being applied to the project. The Innovative Thinking page has the images set up so that a visual comparison can be made between the competitors’ work and the solutions designed to improve on those designs.

 

Layout_002

Layout 02

This one uses a two-column layout. Adding variation to the grouping of the images and text creates a rhythm that the eye can follow. By using variation in the columns “the voids between paragraphs, columns, and images help to establish the eye’s movement through the material, as do the textural mass of the words they surround” (Samara, 2005, pg. 22). The thinner columns also help to fit the images into the layout better. The text can make very solid blocks no matter the width of the column. The smaller columns help the images stay in line with the text by working with their portrait orientations. This eliminates space which will tie the topics to the imagery better. It allows for the text to explain the concepts then lead into a visual example. Then it will lead into an explanation of how this visual shows the concepts and transitions into the next topic. Using this approach helps with space in the Acquiring Competencies page. This needs to impart a lot of information without making it look like a massive wall of text. Pacing makes the difference for sustaining interest in a piece. It can be created “from variation in sizes and positions of images and typography as well as the amount of margin around each image” (Tondreau, 2019). By using an alteration of text to image and image to text it creates pacing for the page. This creates interest which makes it easier to get through the information. This principle is also used in the other pages because it helps break up the information with visuals.

 

Layout_003

Layout 03

This utilizes a three-column layout. This type of layout helps to separate out information and visuals but keeps it as a cohesive page. By focusing on the grid as a whole it creates a flexible template that can be used across the entire website. Grids help to maintain cohesion throughout layouts in multi-page projects without being the same (Tonge, 2018). The layout uses the audience’s natural instinct to read left to right. Columns are used to break up the information, but everything is kept in the same rows. This makes it easy for the eye to move across the row and move onto the next without confusing it with the information above. Adjusting the size of modules creates emphasis on information and creates a hierarchy (PR Newswire, 2015). This can especially be seen in the Innovative Thinking page. While the text is given the most real estate to explain the research and the concepts, the images are given a prominent spot on the page. This is to make it easy for the reader to compare the solution with the industry standards. On the Connecting, Synthesizing, and Transforming page, images 001-003 are meant to show how the color palette is extracted from the environment. So, these modules are given less space since the colors are more important than the details. This will show mastery because it surrounds the text with images that illustrate the concepts it is explaining without breaking up sentences too much. The images can also be used as a framing device like in the Solving Problems page. The framing separates the overarching ideas from the more individual arguments.

 

Layout_004

Layout 04

This uses a five-column layout to provide flexibility. It creates the most visual interest without losing organization. The position of elements creates a connection between them by using a structural reference that the reader can use (Hampton-Smith, 2018). Images and text are placed on the same rows to help tie them together. The variation in the image placement also helps to create pacing. The eye does not get bored going over the piece. It all uses a similar logic though, so the variation does not cause the reader to get lost and confused. This uses a combination of text and images to show mastery by not including superfluous images. The images chosen are either referred to specifically in the text or it uses a concept that is referred to. Captions will help illustrate this. For the Solving Problems page, it includes an image from an outside source. This is to visually demonstrate the design process and how iteration changes the flow. The rest of the images are from a project and illustrate each individual step and how iteration changed the designs. The Innovative Thinking features work from competitors. This is to visually establish the industry norm and provide a comparison for the solutions provided to the client. Using this grid also helps with the layout for the Acquiring Competencies page. A multi-column grid system “permits a designer to lay out enormous amounts of information…in substantially less time because many design considerations have been addressed in building the grid’s structure” (Samara, 2005, pg. 21). This structure allows for more competencies to be added if the mastery needs to be proven better.

 

References

George, J. (2013, January 15). Grid-Based Layouts 101 – DesignFestival. Retrieved from https://www.sitepoint.com/grid-based-layouts-101/.

Hampton-Smith, S. (2018, September 26). How to create balanced page layouts. Retrieved from https://www.creativebloq.com/netmag/create-balanced-page-layouts-7-pro-tips-121310009.

PR Newswire. (2015, March 20). Avatar New York Introduces the Top-4 Website Layout Trends in 2015. PR Newswire US. Retrieved from http://search.ebscohost.com.oclc.fullsail.edu:81/login.aspx?direct=true&db=bwh&AN=201503200600PR.NEWS.USPR.MN57175&site=ehost-live

Samara, T. (2005). Making and Breaking the Grid: A Graphic Design Layout Workshop. Gloucester, MA: Rockport.

Tondreau, B. (2019). Layout essentials: 100 design principles for using grids. Beverly, MA, USA: Rockport.

Tonge, L. (2018, September 25). 14 best-practice rules for striking editorial design. Retrieved from https://www.creativebloq.com/advice/editorial-design-tips.