103: Week 09- Portfolio sites

This week we were given an introduction to our project- ‘Creating our own portfolio website’. The aim of this project is to demonstrate our understanding of this module by correctly conveying our brand identity and tone of voice.

After discussing and writing our strengths and weaknesses in a ‘SWOT analysis’ task we were told to write some initial ideas for what our website should look like, referencing Adham Dannaway‘s article on designing portfolio websites.

We were told about another article by ‘Dustin Senos’  about creating valuable wireframes. In this article he mentions mentions drawing 20 squares on a page and drawing very basic wireframes in each square. This exercise is more about thinking laterally and brainstorming rather than coming up with final designs.

This is how my wireframe exercise came out:

 

 

 

 

 

 

 

 

 

 

 

After this quick exercise I began developing more in-depth wireframes for my website:

 

 

 

 

 

 

 

 

 

 

I then digitised some wireframes on figma to decide which direction I would go in before developing my website:

 

 

 

 

 

 

 

 

 

 

 

 

 

103: Week 08- Style Guides

Style Guides

This week we learned about Style Guides, another way to present and describe a brand’s style and guidelines.

Style guide- A physical/digital document that depict the styles, patterns, practices, and principles of a design system and teaches you how to use it

Style guides establish a table of contents with a lot of information broken up into understandable chunks to explain things clearly.

Pattern library- documents all of these patterns (components) and define how they behave what they look like and how they are coded.

Pattern libraries can involve slideshows, social media features and navigations components.

Component-A self-contained and reusable pattern that represents a specific piece of interface or functionality

Element Collage-  Another version of a Style Tile integrates collages of different information and designs for a website or brand. It isn’t a final design but rather an assembly of disparate pieces without specific logic or order.

Interface Inventory- a compiled page of screenshots of buttons and elements of a webpage to gather an overall look at the range of styles and colours in one webpage and how to improve or move on from there.

For our tasks this week we had to make an Element Collage for our own brand and an Interface Inventory for any brand.

 


Interface Inventory

 

 

I did my interface inventory on the website Beauty Bay. this is the same company I did my brand identity guidelines about.

I really liked the minimal colour scheme of the website. The homepage consists of only white and blue elements with black text. When the links in the navigation bar such as ‘Explore’ are hovered over or clicked on a screen of options comes up which can be filtered through with the secondary colourful navigation bar to help organise the products.

 

 

 

 

 

 


Element Collage

Before I made my Element collage on Figma, I decided to take some notes and sketch how I would present it first:

 

 

 

 

 

 

 

I then made final versions of my element collage on Figma:

 

 

 

 

 

 

 

These element collage contain a header and footer which I might use for my portfolio website and sample paragraphs of heading and body text I will use in my website.

I experimented with using normal navigation bar buttons, image tiles and icons to navigate through my website. This gives me a good visual for what these would look like. When i’m developing my portfolio website I might use the image tiles on the website home page and the navigation buttons.

 


Anna Debenham- Style Guide talk

We were given a link to this talk on Blackboard Learn and when I watched it I found it very interesting.

Debenham starts her talk by referencing all the designers that came up with similar tools, that we’ve already learned about, to Style Guides beginning with Brad Frost, who created the interface inventory. She then discusses Samantha Warren’s idea of Style tiles which is a tool that can be used between moodboarding and mockups. Style tiles should be used as a conversational tool to gather more information from the client and feedback before beginning proper working mockups. Debenham also mentions Dan Mall’s concept of an Element Collage which I’ve already described and completed a version of myself. Dan Mall uses it as a way of focussing on the design elements rather than how the whole webpage will turn out. Element Collages can run into problems though, she mentions, as they can start to look a bit too much like webpages which confuses clients upon first seeing them. However, you can counteract this by presenting elements on a wide horizontal canvas- appearing more like an actual collage.

She also mentions tools and their creators that we haven’t talked about yet, like Jeremy Loyd’s Style Prototype. Another conversational tool between designer and client that gives the client an exciting early look at how elements will perform on a live site. Usually involves elements like buttons and colour schemes coded in html and displayed at different aspect ratios to show client how these will appear and work when on live site, so they can provide better feedback and be more involved in the process. This helps particularly when the site planning is still being developed. She also mentions Harry Roberts’s CSS Guidelines and Jeremy Keith’s Pattern Primer which both account for pattern library type tools specifically for front-end deliverables

This all leads her to discuss ‘Style Guides’ which we covered slightly in this week’s lecture already. Style Guides aim to tackle complexity by containing all relevant information (such as Grid systems/ Headings..) to help provide consistency for an overall website or brand. Creating a Style Guide also helps with things like Quality assurance as all elements are presented on one page and can be tested at one time. She mentions a helpful plugin for your computer called “Tota11y” which checks the accessibility of a webpage and tests all of the functions together at once. Style Guides can help reduce redundancy, if you keep adding to them you can look back and check what things can be removed or have changed which you can then remove. Style Guides can be easily maintained when implemented at the very start and inserted into the usual workflow of the design team. Debenham says that you can test loading times and file size of elements of your style guide to help improve upon and optimise.

Style Guides can be developed at different complexities depending on the audience. If the user of the guide is a less technical person that wants information on the website/brand and how it works or a technical person- new recruit at the company that needs detailed description of how to use all the elements and tools involved.

Debenham goes into detail of what style guides are made of an their file types, which can seem quite complicated but there are now websites like ‘Frontify’ which can help you start to build your own. Debenham understands that style guides can be hard to maintain but she brings up an example of “lonelyplanet” made this more manageable by hooking their guide up to an API so the markup automatically synced to the live site. She explains that there are a lot of positives with putting the work into keeping style guides up to date but also with making them public and open-source:

  • helps keep your style guides more honest
  • can be used as a recruitment tool to lure employees in
  • can be used to help new recruits as they already have a good understanding of the tool
  • allows people outside of the company to take a look and help improve your guide

 

What I learned

The main points I takeaway from this talk is that there are a lot of tools and concepts available to aid creating a useful design in the professional world with an emphasis on a conversation with the client. I hadn’t heard of any of these tools before this week, besides maybe moodboarding and the usual mockup and prototype but having all of these tools at your disposal in between these steps seems really useful and is something I’ll definitely take on in future design processes.

Something I learned specifically from Anna Debenhams talk is that maintaining any sort of library or guide to do with your brand or website seems very important to keeping something consistent and modern. I’ve learned, even from this module alone, that things pile up very easily in the design world and maintaining that is key to being self aware of your work and always learning-which in turn helps you become a more successful designer.

 

103: Week 07- Brand Guidelines

Brand Guidelines

Brand guidelines are described as an instruction manual on how to communicate your brand. These can be useful for organisations to explain the nuances and technicalities of the brand’s design to everyone that interacts with the brand and its presentation.

For this week’s task we had to create a brand guideline for our own personal brand. We were given resources to do this and one of them was the website ‘Brandpad’ which helps you create your own brand guidelines using templates and tips within the website.

Before designing my own guidelines I used the other resources provided on blackboard including this article https://medium.com/brandpad/what-makes-a-good-brand-guideline

From this website I created a list of things I definitely needed to include in any brand guideline;

  • Logos (explaining its variations, the anatomy of the logo and the do’s and don’ts of how to present the logo)
  • Colour palettes (including primary and secondary colour palettes and their  hex code, RGB and CMYK numbers)
  • Typography (Primary/Secondary fonts including their style and when to use them)
  • Other- advertising/ products/ photography

This is the link to my brand guidelines I created [brand guideline]


Second Task

Another task for this week was to create a brand guideline for another brand of our choice. I decided to create a brand guideline for a brand I know has its own brand guidelines and then compare and contrast my own to theirs to show how much I’ve learned from the first task and further learn how brand guidelines work in the professional world.

For the task I chose ‘Netflix’. The first thing I did was conduct my own research of the company. I went to their website to look at their colour and font choices to determine if they had a secondary colour palette and/or typeface. The first thing I noticed was the dark colour scheme and small navigation bar to make room for content. Aside from the wordmark, it looked like there was 2 heading sizes in the colour white. I researched into it and found out that this typeface was called ‘Netflix Sans’ which was created by Netflix’s in-house design team (Dalton Maag and Noah Nathan) whereas the typeface used to make the wordmark is a free font called ‘Bebas Neue’.

I wrote these things down and what I was gonna include in my version of the brand-guidelines in my notebook:

 

 

 

 

 

 

 

 

 

After I had this set out I began creating the brand guidelines, I collected images of netflix’s colour scheme that I could then pick from and collect the colour codes of. I also collected images of netflix’s logo and wordmark to present:

[myguidelines]

I then copied the link to Netflix’s brand-guidelines to compare:

[netflixguidelines]


Compare + Contrast

Both my and Netflix’s brand guidelines contain sections on the logo, symbol and colour. The difference is my guidelines included a typography section whereas the official guidelines did not.

The presentation of the colour palette was different as I had one section containing all colours whereas Netflix had colours sectioned into what’s used for each purpose on the logo or symbol.

Both brand guidelines contained most of the same information, however mine included more writing and explanation whereas the official guidelines was much more minimal and “showed” rather than “told”. My colour code for the dark red was wrong and I didn’t use the names of the colours netflix assigned as I didn’t have access to that information.

One many difference between the two guidelines is that Netflix included a “don’ts” section for their logo and wordmark which presented how not to display the logo and symbol including:

  • using the wrong colour for the logo (white logo when not on videos/white logo on contextual background)
  • using the ‘n’ from the wordmark for the symbol
  • using a white symbol and white symbol on red background
  • a rotated version of the logo or symbol
  • using logo or symbol on busy background
  • logo/symbol displayed in a container or shape
  • using the old logo
  • using the symbol in space of a letterform

What I learned

I learned that the way I looked at sectioning a brand guideline is not the only way to do it as breaking up the information more, such as Netflix explaining colour for the logo and symbol instead of all colours shown in the same section. This can be far more understandable for people trying to gather information but also allows the brand guidelines to be presented much nicer and simpler.

I didn’t think to put a do’s and don’ts style section which can further explain the brand and allows for a clear demonstration of what the brand consists of and wants to be presented as for increased consistency overall. I also didn’t think to include applications of the brand like packaging, food or games, and which of these applications would be appropriate and how to present them. I think this is a good idea and explains more aspects of the brand that I forgot would be important.

The typography section not being included made me rethink sections that might not be important or completely necessary for the brand-guidelines you are creating at the time. Typography wasn’t necessary for Netflix, it might be for other brands but there are other sections that netflix has (such as the packaging applications) that other brands, that might be solely online, would not need.

104:Week04- Illustrating Interfaces

Illustrating Interfaces

Illustrations can be a really good way to engage users and enhance their experience with your design.

Illustrations help explain content or information in avery simple or symbolic way it conveys a message which means they can be very important elements to involve in an app/webpage design.

After listening to the lecture and reading this article, I learned an illustration should be;

  • meaningful- this means the illustration does not take away from the functionality and information of the content itself.

 

  • recognisable- a recognisable illustration means the user doesn’t have to waste precious processing time trying to understand the illustration, but that the illustration seamlessly integrates with the content.

 

  • preferably straightforward and unambiguous- this falls under the same point as being recognisable in the way that the illustration should be quickly understood to make a seamless experience.

 

  • clarifying- an illustration is used best when it explains and clarifies what the text content is saying, allowing the information to be processed quicker as ‘pictures are worth a thousand words”

 

  • attractive-  having an attractive illustrations gives the users a positive reaction to both the image but also the app/webpage itself. Lots of beautiful illustrations that also meet the other requirements will really enhance the user experience.

 

  • harmonic and corresponding with general stylistic concept of the interface- It makes sense for the illustrations being used for a particular type of content should match the tonality of the content. It helps engage the user and helps them understand the content even more

 

  • improving usability and user experience in general- this goes hand in hand with the above points but it is important that illustrations should improve and enhance the users experience but should also be informative and not subtractive from the content.

 

  • not overloading the screen or page- Illustrations can be really beautiful and aid the processing of information but a lot of illustrations or very complex illustrations with lots of different colours can be distracting to the user.

Sketching

In this week’s lecture we discussed sketching how to practice sketching in a practical way to improve this skill.

By using a thicker pen it sort of forces you to be more clear with your design as it is harder to complete complex and delicate sketches with a thick pen. This exercises your brain and makes you think of what elements of the design are actually important. another tip was to use straight lines, this also makes your sketches clearer and easier to work from.

It was recommended to also practice drawing straight lines to help develop this technique. We were told to use colour thoughtfully, sketches should be the basics of a design to show how it would work and details will be developed later so its not practical to fully colour and develop sketches- colour should be used to highlight certain important elements of the design or interactions.

It’s important to also make sure your sketches are comprehensible because this will be the bare-bones of a design to be worked on and in team environments other members should be able to understand your sketches. By timing yourself while sketching you can better control how much time you are spending on each sketch and this will force you to be more mindful of the details you definitely need to include.


Mascots and type of illustrations

‘Mascotsas a graphic design object needs great attention as they have to represent the nature of the brand or product. Mascot becomes the element of identity and inter-connector between the user and the product.’

Mascots can be a basic way to explain something to the user about the content or the brand itself. Mascots or characters can help catch users attention and engage the user in the app or webpage.

 

Illustrations can be:

Thematic- this means the illustrations used within an app or webpage follow the same theme. These types of illustrations are usually more for aesthetic purposes and are more complex however this can be very engaging for the user and create a positive experience. However, too many of these illustrations or too complex illustrations can become too busy and less functional.

Iconic- these type of illustrations are more stylised and are used mostly to simplify content and help with the understanding of the content on the page. These are used less as beautiful pictures for the user to look at but can be just as engaging because of their functionality and style.

Diagrammatic-  these are purely to help explain a process or heavy amount of information in a visual and engaging way. These won’t be useful for every type of content but for more information heavy topics, these can be very engaging for users.


Data Visualisation

“Data visualization is an interdisciplinary field that deals with the graphic representation of data. ” Basically data visualisation breaks down chunks of heavy information into understandable graphics that aid the processing of that information and emphasise the information being presented.

Hyper Realistic- these type of graphics can be used to bring real life properties to the design making them more understandable as the draw from real things we see in real life. These can also be quite a contrast between the digital text and other graphics.

Simple Vectors- these focus on making the graphic as simple and clear as possible which aids in the understanding of the content overall.

Hand Drawn- these type of graphics can bring both a playful or whimsical style to visualising data or can be gritty and relatable, this is up to the artist but overall they bring a more vulnerable and engaging element to a graphic.


App Development

This week I started working on my illustrations for the app. I want to do an illustration for each destination, the illustration will show a place of interest at that destination.

 

This is the image I will be using for reference for my Romania illustration. This image shows their traditional wooden churches which I think really represent the rural, traditional setting of maramures.

 

 

 

 

This is how the first sketch of the churches came out, I’ll then add colour;

 

 

 

 

 

 

 

 

 

 

This is the colours I chose for the wooden church. I didn’t choose the actual colours from the image instead I went for a colour I felt would be more striking for the illustration.

 

 

 

 

 

 

 

 

This is what the finished illustration looks like of Maramures.

 

 

 

 

 

 

 

 

 

Then next destination that I’ll illustrate is Aosta Valley in Italy, this is the image I’ll take reference from

 

 

 

 

 

 

 

This is the the development of this illustration:

 

 

 

 

 

 

 

 

To give the illusion of stonework on the castle I added extra detailing of disorganised shapes in different colours to add depth and dimension.

 

 

The last destination is Brest in Belarus

This is the image that I will be taking inspiration from:

 

The image is of a monument that overlooks a fortress in Brest.

 

 

 

 

 

 

This is the development of my illustration. I made the contrast between the shadows and the brighter parts quite stark to make the features of the monument stand out.