The Website: This was the first week where I started to only do website, I created a Github repo and multiple versions of my website: This was the first version that I had created the previous semester: I quickly changed this to start to ling up with the new design I had picked changing the background color, removing the content, and styling some font text. At this point, I began to implement a grid system to display my work and allow the user to filter specific projects such as films UX, and others. This took a lot of fiddling but after a day this is where it was left off, on top of some changes to a grid system beginning implementation I began coding on a drop-down nav that I saw on w3schools. The font still needed to be styled however I was liking it a lot. Following this I added links to my social media as a text before swapping them to the get in touch page and at the bottom of projects. We then had our group critique where daniel suggested swapping my name out for just my logo and I really liked this idea so I began […]
This week I worked on my personal brand as I hated what I created previously. This meant a full rehaul and I thought I would start by picking the font. Font: I wanted to use a font similar to that of a font used when coding as this is something I continue to do and really enjoy. I found out after some research that these are called Monospace fonts. So I went out and looked for nice monospace fonts on google fonts. I ended up finding a font called Incostolata. I chose it for its monospace style along with the fact it was one of the few variable fonts which are super helpful for web design. I then had to look for a serif font to match with this and I ended up stumbling across Castro when browsing through google fonts. I really enjoyed the regular font along with the italics as they are similar but almost different fonts. Following this, I started working on my monogram. I wanted it to be somewhat abstract and to use only black and white as I find myself enjoying simple design so I started by doing some simple sketches on paper: I think […]
Beyond the Brand: to begin with, we covered a refresher of all the previous weeks, what we covered, and anything that we did before easter. Then we had a look at what we had to have on our blogs. Alongside this daniel posted a miro link that showed us where we sat with our blog and what we had to work on: This is the feedback: This is where I expected to be I kind of understood that I lacked some self-reflective work alongside research and I still need to upload my sketches. To do list: Self-reflective paragraph Sketches Independent research/ literature reviews So I started by going through all my weekly posts and added a “What I Learnt” section to each and a written paragraph or two on what I have learned and what I will do. Love Marks: We then had a look at the difference between respect and love and how a brand can utilize this or possibly suffer from this. We did an exercise where we identified loved brands like apple and north face and some respected brands like Colgate etc. So, how do we manage this? Brands (and reputations) take time to build but areas […]
Task 1: Brand Relationships find and identify three brands that are loved and looked up to: Patagonia – ecofriendly, storytelling, low impact, high quality Boojum – local, fast, flavorsome, friendly Urban outfitters- fashionable, high quality, good products, trendy, welcoming Task 2: Design a Product Don’t just slap a logo onto a product think about what it is, make it desirable, useful, something people want. For this, I decided that as I always have water at my desk id do a flask of some sort, and since I had recently designed a set of space icons I could use them, So I took them and edited them into a grid and put them on a flask. After I created this we put it in a miro board and got some feedback on what we created, some people had made things I would have never thought about like Beth’s loading icon or Laurens guitar pick. We also go some feedback on our work and daniel said he would love to see a series of individual planets possibly with different colors. This is what they would look like as a series. I think they actually look really cool and they’re definitely something I […]
Portfolio Sites: This week we looked at our next large task with is portfolio site development and creation building off last semester’s website to create a single page display for work and our brand. Content planning: Projects to include? In what order? Text to include? Informative / for tone / Bio? Contact Details? Any additional details/links? Is your site going to be text-led? Image led? Have a hero image? Inspiration: Sites for inspiration: taylorcward.com/#intro https://www.stevenmengin.com/ Kathleen Werner. me https://onepagelove.com/inspiration/portfolio https://www.siteinspire.com/ Wireframing: Start creating on paper and create lots of ideas create a key for UI elements ( v= video etc ) Digital wireframes are next and should only be done after paper wireframes Checklist Bio & Brand Dictionary Monogram Wordmark Visual Marque Brand Guidelines Website Design Website Build Research Blogs Do a Gantt Chart for your remaining weeks. These are simple ways to plan out your time and block in tasks. I’d like to see these on your blogs. What I Learnt: To start off I never thought that Gantt charts could be useful in a scenario other than coding but now it has been brought up I imagine Gantt charts are great for any project that is worth […]
Task 1: S.W.O.T Analysis Create a table displaying your: Strengths Weaknesses Opportunities Threats When creating a website. Task 2: The Goal What is the purpose of the project? What problem are we trying to solve? Task 3: Hierarchy Let’s work out what’s most important. Each person’s priorities may be different from the other. It depends on what you want to achieve. Task 4: Wireframe Before I began wireframing some ideas for my new portfolio website I started by wireframing my old website design. Following on from this I began by looking at some websites that had won awards and were used by top design brands and firms and were completely blown away. The first site I looked at was one by an Austrian design team Spatzek. It incorporated beautiful design with video and image using the most of space. So much was happening but everything was still comprehendible. My only critique was the moving text borders around images, as I found them highly distracting and ruined the whole design. I love to create something like this but I can imagine it might require a lot of coding https://blumenkopf.spatzek.studio/home I also had a look at https://www.caffeinepost.com/works/ which […]
Todays Tasks: Task 1: Interface Inventory Choose a website and complete an interface inventory, documenting all the interactive elements used throughout. This could be the website for the brand you completed a set of guidelines for last week, but it is not essential. The important thing is to observe the sorts of buttons and elements of the UI included. There is a link on BBL to give further information about this. Task 2: Element Collage Create an element collage for your personal brand in anticipation of designing or styling your portfolio websites. There is a link on BBL to give further information about Element Collages. Task 3: Update your research blogs Make sure your research blogs are up to date and organized. I will be reviewing these and providing feedback before the Easter break. This is something I’ve been working on as all my notes etc have been in my sketchbook and I am going through the process of digitalizing them and putting them on my blog in two blogs per week per module style. One with the week’s lecture, what we covered what I learned and anything extra, and another covering the tasks any work behind them, […]
Style Guides This week we looked at the continuation of identity exploration and style guidelines. Style guide The physical or digital document represents the styles, patterns, practices, and principles of a design system and teaches how to use it. Pattern library An organized set of related, reusable components, often containing code examples, design guidelines, and use cases. Component A self-contained and reusable pattern that represents a specific pieceof interface or functionality. Pattern Libraries A Pattern Library ensures a consistent user interface. Big sites are developed by different people over a prolonged period and revised regularly. That almost always leads to a fragmented user interface unless there is something in place to ensure consistency. Essentially a pattern library is a collection of design components that appear multiple times on a site: Slideshows. Navigation. Social media features. News Listings. Related links. Carousels. +More https://www.bbc.co.uk/gel Style Guides We started looking at these last week. Style guides encompass a company’s branding guidelines, including logo usage, designated color palette, typography, etc. You should update your brand guidelines to include digital outputs. Pattern libraries are a detailed subset of the overall style guide. We need to think about HTML, CSS & JS, building a guide […]
Task 1: Choose any brand you like and compile brand guidelines for it, sourcing information and imagery as needed. This will be easier to do with existing designed elements and it should demonstrate what assets you need in order to create your own. Task 2: Compile brand guidelines for your own brands this should help you make decisions on your design programs so far and see where work is still needed. Pull together all the elements first. You can create a web page afterward. Using the previous task to help support my decisions I created my brand guidlines.
This week we did a group critique of our brand but before this, we had a look at websites for our brand and services to host and buy domain names. Websites Today we looked at websites to hosting and domain names dreamhost.com/hosting/shared/ Daniel Explained the difference between the two packages and said that he might recommend the unlimited package for us as we might be creating a website for others. Standards We looked at the NASA graphics standard manual and how they created examples of how to use and how not to use their logo and branding I recently created an invoice for some work I was doing and during looking through the standards manual we found they too had created multiple designs for everything one would need to use and how the branding and logo should be applied to this. Personally, I will look again at these and dig a bit more into creating an invoice, when I created it I didn’t have a logo so I think I need to apply this. I also noticed how they have a colored version alongside a black and white version which I think is something important to think about when I […]
Task 1: Business Card Use your wordmark, typeface choice, and monogram or symbol to design a business card. These are 85x55mm. Consider both sides of the card. Research I had never really thought of business cards, let alone what to put on them so I did a bit of digging. What to include: 1. Logo Your logo is a visual representation of what your company does and what you stand for. It should epitomize your business and is a keepsake for your customers to remember you by. When you have a logo, it makes your company feel like it’s credible, professional, and trustworthy. Three common types of the logo include: Written name: Often referred to as a wordmark, this is a written representation of your brand. Many iconic brands use wordmarks, like Google and Visa. Monogram or letter mark: These logos are composed of the initial letters of your business organized creatively. Abbreviating is a good idea if you have a long name, like International Business Machines (IBM). Symbol: This is a pictorial representation of your business. It may be a shape related to your area of expertise or an abstract form that represents your brand. It can stand alone and support your […]
Brand Identity This week we took a look at Identity and what we can apply our brand to. Alongside how we show and portray our own brand on business cards. What you can apply it to: Business Card Social Media Adverts Banners Website Email Signature HTML Email Campaigns Portfolio Packaging Studio Corporate Gifts Apparel (Clothing) Merchandise Literature (Leaflets etc) Presentations / Prototypes App Sponsorship Food Blimps (Anything) Useful Links: http://lovelystationery.com/ www.underconsideration.com/fpo/archives/project-type/business-cards/ https://www.moo.com/uk/ https://www.digitalprinting.co.uk/ What I Learnt: I think the most important thing that I learned from this week was the wide applications for a brand’s identity and how it can be used to represent and grow a business. I also learned a bit more about what to put on things such as a business card and how to present them. There were a lot of things I learned like bleed lines that are helpful for print design.
Week 5 – Color This week we looked at Color. We began by looking at Color systems and how its created in print along with which system is best suited to which task. CMYK Stands for “Cyan Magenta Yellow Black.” These are the four basic colors used for printing color images. Unlike RGB (red, green, blue), which is used for creating images on your computer screen, CMYK colors are “subtractive.” This means the colors get darker as you blend them together. Four-color printing process Cyan, Magenta, Yellow & Black 4 plates used in the printing press Colors mixed to make up black/dark colors (subtractive color system) Pantone The Pantone Color System, or PMS, is a standardized color matching system, which is widely used around the world. It was devised to help printers and designers specify and control colors for printing projects. The Pantone Color System allows you to specify colors that cannot be mixed in traditional CMYK. Manages of color from design to production Used in printing Can be specified as a brand color Consistency of brand color reproduction Standardized system RGB RGB stands for Red, Green, and Blue. We use 6 color printers that can use the additional information the RGB color gamut […]
Tasks 1-week branding project: At this stage in the module, you are familiar with all the stages of branding and identity design. To practice your new skills (and as a recap) I want you to design an identity for something else. This will allow you to explore a brand that you can take an objective view of. You can choose an existing brand or come up with your own name. It is up to you what personality you give it. Will it be fun and exciting? Gourmet and high-end? Quality focused? Experience focused? Start with researching the area, benchmarking competitors and other brands that your desired user base will use or relate to. Establish a tone of voice, brand bank of words and a story. Choose an appropriate typeface for the logo and an additional one for a copy (if necessary). Design a symbol in the form of an image or monogram. What Brand: There is a local pizza brand called “Nicos Pizza” I’ve always enjoyed the food they serve. However, I feel their branding doesn’t represent their food well and the high-end experience they offer. Research: For this, I looked at other brands seen in Belfast that were the […]
This week we looked at visual identity and how monograms can be a vital part of a brand identity. To begin with, we looked at some popular brands and how their monogram is identifiable even with a small section. We then took a look at the different types of monograms. Pictorial Abstract Abstract logos are usually used for brands that have a brand name that identifies what they do and whereas a pictorial logo requires an explanation as to what they are and what they do. I liked looking at the development of the slack logo and how they overcame issues of cohesiveness We then looked at some examples of monograms that others had created and the building process of some of the icons. Our task this week is to create a monogram to communicate what we are about. What I Learnt: When we looked at the slack logo design and monogram creations I found it really interesting how they had created designs and logos but didn’t use them as they were difficult to copyright. I would have never thought of considering copyright and the ease of copyright when designing a logo/brand. This is definitely something worth thinking about even […]
Task 1 Sketch 3 of the following objects using the various drawing techniques we’ve talked about: Task 2 Pick 5 keywords from your week 1-word association mind maps/bio (these could be your values) and explore a range of ways to represent them visually: Clean, Professional, Friendly, Committed, Driven.
Typography I’ve never been very good with typography and choosing fonts. I found it interesting looking back at the way they used to create fonts and use printing techniques. We learned about how the tone of voice reflects what type we should use which is quite obvious when you consider it but something I hadn’t thought about. We also discussed the breakdown of the type and our task was to create a type specimen of our names which is on my other post. What I Learnt: I’ve looked at typography in the previous module but I learned a lot more about using typography in work and how to find the right fonts for my work. I also had never thought of typography as a way to communicate a brand mood and tone of voice, we got some good links that I’m definitely going to use in the future for some of my work. https://www.myfonts.com/WhatTheFont/ https://fontsinuse.com/ https://www.typewolf.com/
Task 1: Typography mark up Task 2: Helvetica Documentary We had previously watched the Helvetica documentary as a recommendation from Paul The documentary began by saying that everywhere you walk you see typefaces, but there’s one you see probably more than any other- Helvetica. Helvetica was described as being like “air” or “gravity” because of its omnipresence. Helvetica is a very controversial typeface, it’s loved by many due to its flexibility, professional-looking appearance, and its legibility. However many also hate the typeface due to the fact it has “no personality” and is “overused”. I believe that all typefaces can be used in thousands of different ways. A brand’s identity doesn’t remain completely in the typeface – it’s how you use a typeface and the other elements that will create the brand identity and tone of voice. Experimental Jetset really proves this as I feel all of their works are completely different from one another despite the typeface remaining the same in every account. Task 3: Word Play Take 6 words and represent them using Helvetica using the word itself.
Task 1: Research Monograms Task 2: Sketching Task 3: Playing with simple shapes We worked on creating our name with basic shapes and the created mood boards on letterforms and monograms. I found this task really fun and enjoyed the simplicity of creating letterforms with such simple shapes
Week 1 Tasks Social Bio: Hey, I’m an interaction design student, filmer, editor, and a happy student looking to design and create things that make our lives just that bit nicer. About me Text: Hey, I’m an interaction design student, filmer, editor, and a happy student living in lockdown. My aims are to create clean and navigatable designs accessible to everyone and anyone. I pride myself on my illustrations and design and continue to develop my understanding of composition and color. Other than designing I spend my days doing sport and competing at an international and national level in kayaking. Content Audit: There are three main devices to help you remain a brand’s language tone. a word bank a brand dictionary a tone of voice guide Exercise: Create a word bank Patagonia: Transparent, Impact-Driven, Thoughtful, Sustainable, Loyal, Consistent, Reliable, Genuine, Travel, Adventure, Performance, Silent sports, Environmental Justice, Outdoor Clothing, recourse efficient. Exercise: Create a brand dictionary Patagonia: Customers, Staff, Activists, Used Gear, Impact-Driven, Recourse Efficient, cause no unnecessary harm, inspire, environmental crisis, worn wear Exercise: Create a tone of voice guide three words: eco-friendly maximum performance short strapline: Build the best product, cause no unnecessary harm Follow Something: I was […]
Task 1: Describe an inanimate object from its point of view He takes me with him over his shoulder everywhere he goes. I get to record what he sees, all the time spent with friends and the trips alone. When I’m needed I get used for work, to sit and listen to some boring interview. But in the end, my work gets viewed. Task 2: Describe an album as a tweet This is the epitome of summer, a short but undoubtedly iconic album from 2018 the brings back the memories of scorching heat and sunburnt faces. Task 3: Take the tweet and make it three words It feels like summer Task 4: Illustrate it