Category: Subject, Yr 1

The user interface (UI) governs what the user sees – the series of screens, pages and other visual elements that allow the user to interact with an app. A user interface allows a user to work with a computer via visual elements as opposed to complex programming languages – first introduced in the early 1980s by computer scientists at Xerox PARC and brought to the user’s home by Apple with the Macintosh PC in 1984, the demand for personal computers with an accessible UI began, thus creating the role of a UI Designer. The UI Designer’s role has evolved as technology has grown, and now UI can be seen on smartphones, in virtual or augmented reality, and on voice, gesture and light applications (zero UI).

User experience (UX) governs how users feel during their interactions with applications, products and services, and how they feel afterwards. UX Designers need to ensure that a company’s product meets the needs of a customer in order to ensure they have a good experience and thus create a good public image for the company and increase potential sales. As user interface design has evolved, so has user experience design – UX and UI designers work closely together in order to ensure that a user can work an app with ease and have a good experience whilst doing so.

In order to successfully meet the APPlying APPtitude brief, I need to ensure my app follows the basic principles of UX/UI design:

• Show the value of the app upfront – place calls to action up front, highlighting key features in context at an appropriate place within the UI so they are easy to find, resulting in a stronger user experience.
  
• Allow users to “go back” in one step – users should be able to retrace their steps through the UI as opposed to starting over, which often results in lost data and a frustrated user experience.
  
• Create frictionless transitions between mobile applications and the mobile website – frustrations can occur when the app forces a user to move to the web to complete an action, especially when the look and feel of a website is completely different to the app. A fast and frictionless transition and a similar web UI can help reduce these frustrations.
  
• Speak the same language as the users – Unknown jargon creates a negative experience for a user as it will more than likely confuse them, so it is essential to use terminology that the user will understand.
  
• Let the user control the level of zoom – Allow users to zoom in on certain media as they prefer as opposed to setting a level of magnification to ensure a better user experience.
  
• Organise and label menu categories – Menu categories should be clear with no overlap, matching a user’s mental model.
  
• Provide text labels and visual keys – The majority of iconography within applications require labels to ensure proper interpretation and to increase the likelihood of them being used.

I began setting up my editorial piece by creating an A3 document within Adobe InDesign. I made each page have a grid system with 8 columns to ensure a strong and consistent visual hierarchy across my editorial.

I began working on the first page heavily inspired by my typographical concept, opting to use the TypeKit font Benton Modern Display for a decorative, formal serif typeface. I also sketched a suit and tie graphic and rendered it in Photoshop then Illustrator to create a high quality 300DPI CMYK vector graphic for print.

I decided to experiment a little bit and fill up some of the white space by contrasting the word “GAP” against a black background. I also decided to add the article’s subheading here in the smaller, bold sans serif font Quasimodo, centre-aligned to add balance to the overall composition of the page.

I started the article by pasting in the body text, initially deciding to divide the text across two columns using the font Cambria in 9pt. I pasted the rest of the headline vertically down the latter three columns, contrasting white against black once again to replicate the formal composition. However, I felt this looked very bland to start with and I struggled to create development beyond this point. To fix this, I scaled the text up to 11pt, added a drop cap of four lines to the opening paragraph and spread the paragraph across four columns with no divide. I justified all of the text to reduce rags and tabbed in at the start of each new paragraph to add a clean finish to the text. I added the authors’ names in a small box above the text alongside a graphic to divide the white space further, and added more red to the page in the form of a decorative margin.

I then added a few extra editorial features to this page to finalise it. These features included a bold heading section, detailing the theme of the next section of the article, as well as a highlight from the extract. To add context to the piece, I finally added a page number at the bottom of the page, centred in alignment with the text.

Following some sufficient research, I began working on some initial concepts for my editorial piece. Within these concepts, I aimed to pin down the direction in which to take my piece – whether it would be typographical, illustrative or photographic in nature (or a mix), what grid systems to use, and what relevant type and image to include. I decided to focus only on the first double page spread within these concepts so I could work out where I was taking the editorial piece before designing the other two spreads.

Within this concept, I focused on an illustrative approach, using a grid system of 5 columns per page. Within the front page, I decided to include the headline and subheading scaled appropriately around an illustrative image of a tie to leave some effective white space. I felt as though this was a strong design decision as it’s quite tidy, reflective of the nature of the article, and follows good editorial design principles. The second page is where the true article begins, and where I feel the concept loses its effectiveness. The distribution of body text with images and subtitles is messy and overcrowds the page, leaving minimal room for white space.

This concept focuses on a photographic approach with a simple three-column grid system per page. This spread would be dominated with a photograph of an individual in a suit, leaving very little white space in favour of catching the eye. The headline would also spread across both pages and be the second element within the path of the eye, before moving onto the subheading and body text respectively. The visual hierarchy within this concept is quite strong, but its simplicity with three columns may be hard to spread a nearly three-thousand word article across without ruining the pacing. I would also need to consider photographing my own image which may prove more challenging than illustrative and typographic approaches.

The final concept focuses on a typographical approach with a four-column grid system per page. What’s immediately noticeable here is the use of white space on the first page which draws attention to the typographical elements. The subheading is almost as dominant as the headline on the second page, but its rotated orientation adds a bit of flavour to the concept and makes it a bit more enjoyable. The grid system allows for a reasonable amount of body text per page whilst leaving room for some interesting imagery or larger typographical elements, so the pacing wouldn’t suffer too much here.

Reflecting on these concepts, I am drawn in particular to the typographic approach, but I understand that there are elements from the illustrative and photographic approaches that work really well – such as the use of white space and positioning of certain elements. These concepts have created a strong foundation in which to build my editorial piece on, and I am sure as this project continues the design will continue to evolve and incorporate successful elements from all three of these.

Following the deconstruction of the article I’m visually representing and the identification of my primary target audience – the upper class – I decided to focus on identifying what editorial design actually is, and examine some techniques used within successful pieces so I can incorporate them within my own practices. At this early stage in the design process, it was crucial to identify strengths and weaknesses to maintain a high level of quality throughout my development.

I began by looking at a website focused on visual communication named Design Your Way, in particular, an article that unpacks editorial design and shows off some strong examples whilst providing tips for designers aiming to create their own piece.

At its basics, editorial design is the combination of layout, composition, imagery and typography to create a strong page (or often a double-page spread) for use within a magazine, newspaper or article. It’s also worth mentioning that editorial design is becoming increasingly challenging due to the rising digital market – as my brief is focused on editorial design for print, this is an obstacle I will need to keep in mind, and can perhaps identify successful features of digital editorial design that would also work well in print. The first step of creating a successful editorial piece is to understand who exactly will be reading the editorial and to design for them. I covered this step earlier in the development cycle – I know I’m aiming to design for the upper class and have to design my editorial around that market. Creating a strong visual identity for the piece is extremely important, as the design needs to catch the eye and keep a reader engaged with its contents. Designing the cover (or in my case, the first double page spread) before anything else is a good way to create a strong identity and ensure it captivates attention, so the following pages can be at the peak of their visual strength. Using a strong grid system is crucial, and the way the grid system is set up can entirely affect the overall feeling of the editorial piece. As my focus is on the upper class, I’m aiming to use a symmetrical layout for a more formal composition, but I will experiment with different grid systems after I’ve created a few initial concepts. Typographical hierarchy is a make-or-break within an editorial piece such as this, and the choice of typeface and scaling within the piece will determine how well it appeals to my target market and the overall quality of composition. It’s also worth noting that sometimes less is more – the use of white space can make a piece a lot stronger, and this something I intend to experiment with considering my target market. Finally, pacing is crucial to keeping a reader engaged. I’m designing six pages – three double page spreads – and my initial plan is to create an eye-catching opener spread, then give the readers a little room to breathe within the middle spread, before closing the piece with a memorable final spread.

Source: Bogdan Sandu. 2018. Editorial design: definition, tips, and examples. [ONLINE] Available at: https://www.designyourway.net/blog/design/editorial-design/. [Accessed 14 February 2019].

To kick off the Changing Faces brief, I deconstructed an article that resonated with my own interests and beliefs. Written by Sam Friedman and Daniel Laurison, the article examines the idea of the class ceiling, and how privilege can affect one’s progression through a career. The article argues that whilst privilege can act as a strong “following wind” for one’s progression within a career, it is often how one’s merits are received by sponsors from colleagues higher up in the career that determine their success – though ultimately, the acknowledgement of merit can highly depend on one’s privilege or similarity to their sponsor. It’s also worth noting that privilege’s effect on merit can be determined by the industry – the article examines several different careers and finds that privilege strongly aids an individual in accountancy, where higher class white men make up the majority, but not so much in television, which values a more informal and humorous individual.

A full annotation and deconstruction of the article can be read here: The Class Pay Gap – Why It Pays To Be Privileged

With a sound idea of the argument the article is putting forward, I took the opportunity to identify a target audience for my visual representation of this article before moving onto further research. I’d argue that the overall purpose of the article is to raise awareness of the class ceiling concept and how privilege affects success within a career, and thus, a primary target audience would be those ignorant to the concept (likely those who are affected by it without realising – the upper class). This gives me a general idea as to what direction I should take my later designs in – if designing to persuade the upper class, I should focus on a more formal approach, with a strong symmetrical layout and grid system and using serif text instead of sans serif.

In today’s session we examined key principles of editorial design and how a piece of editorial can be successful through its use of clear communication and story-telling that’s made possible with secure grid systems, consistent design, contextual pacing and a strong visual hierarchy. We took part in a one-day workshop where, in groups of 4, we were given a topic and had to create four double-page spreads using the editorial skills we had learnt so far, considering the above principles. This workshop was done in preparation for our Changing Faces brief that would ask us each to design three double-page editorial spreads.

The topic my group was given was the relevancy of wallpaper, and whether it was still a common feature within modern interior design. The article I visualised was courtesy of The Washington Post. This task was completed using InDesign.

My first step to approach this design task was to create a grid system. Due to the rough nature of the task and time constraints I settled with a simple three-column system on both pages, resulting in six columns across the spread.

Following this, I began working on some type detailing. I displayed the headline and subheading across all three columns with a larger pt. size (31 and 51) to draw attention to it, contrasting white against black to make it stand out further. The subheading also dominated these spaces but used a smaller pt size (15). The body text, which was a segment from the article, used a sensible 9 pt. size. I decided to experiment a bit here and instead of displaying the text across all three columns, I left room for some imagery on the first column and displayed the text across the next two. I justified the text here to reduce rags, making the text more uniform with the columns yet still perfectly readable. I decided the second page should be more visual and opted to not include any body text whatsoever, instead using imagery and headline text in the form of a quote which I feel was simple yet effective. Upon reflection, I think a drop cap at the start of this body text would have added flair to the design and improved its overall look, and some of the paragraph and line spacing could have been altered to increase the ease of readability. Tracking could have also been used to spread the text a little more in favour of the overall article, but all of these things are things I will take into consideration when working on my Changing Faces piece.

Above are all four pages from our group displayed in a printed format. What was immediate upon first glance was the lack of consistency in our designs which was an important principle of editorial design. We agreed that this was probably due to the nature of four different people working on the piece, all of us with different design styles, and agreed that in future we would need to work harder on communication. We felt our pacing within these pieces was quite strong, however, and reading from page to page felt enjoyable as opposed to a task. A few comments were made on my page about how busy it was, using minimal white space which overall reduced its effectiveness – which I completely agree with.

Reflecting on this workshop has proven very useful in preparing for my Changing Faces task, allowing me to identify my strengths and weaknesses within editorial design. I’m happy with my type detailing, but not so content with my overall visual hierarchy. I will need to focus more closely on the use of white space and aim to create a piece that is more balanced, perhaps by using more columns and experimenting with different grid systems.

SOURCE:

Buerger, M. 2017. Wallpaper is making a big comeback Here’s how to choose, use and remove. [Online]. [11 February 2019]. Available from: https://www.washingtonpost.com/lifestyle/home/wallpaper-is-making-a-big-comeback-heres-how-to-choose-use-and-remove/2017/02/28/c9b2eb40-f88a-11e6-9845-576c69081518