Week 11: Intelectual Property This week Daniel did a presentation on intellectual property. Daniel covered everything from what intellectual property was how long it lasts are you can protect your own work and how far you can push to use of other peoples intellectual property. Research: This week I looked at websites and programs that helped your workflow within Webflow which is an online website development application. Some of them had very nice websites themselves alongside offering products that help to create great websites as well. Extended attributes This is an addon for Webflow that helps you create better design, clearer and quicker. This is made by a big independent web design company that like to share their tools with the community. It allows you to create effects animations and so much more using attribute tags. Webflow University Webflow university is great! it has loads of useful documentation on anything you want to do and can do in web flow. I used this a lot so far and I think I will be using it a lot more as I begin to polish up my website. I looked at quite a few videos and pages on parallax animations and just […]
Week 10: Proof of Concept This week Daniel give us a presentation on how to flash other ideas through the use of Myanmar chooser personas research and other general planning and wireframing. The aim of this week’s lecture was to help us understand how to manage and plan an idea into being a feasible project and something that can be presented. Daniel shooters five basic steps to flashing other ideas the first one is defining your primary users the second one is picking techniques for involving music such as branding what platforms it will be on and how they will access it. Following this, you’re meant to research into those groups through surveys and previously carried out research and studies. Safar as invalidating definitions and analysing the research trying to work out how this will affect what you’re creating and understanding what you’ll have to take into consideration when designing and further planning here are you. Then finally the face is generating Rueter user requirements this can be done through user personas working out what your target audience needs the product to do and then already trying to create a solution to the problem. What I Learnt: This week was […]
Week 10: Proof of Concept This week Daniel did a presentation on how to flesh out our ideas creating user personas mind maps and research to help inform our choices and to better our presentation in doing so. I created some user personas for my product during the class however when it comes to the presentation I’m not sure it’s something that I will show just because we have limited time. Following this, I continued working on my presentation using the same style as I had previously and inserting some of my new research into the film industry and the gap in the market. I also added some competitor research where I looked at other apps that do the same thing and how my new app will compare to the existing apps. For things such as the use of personas I just added in a couple of bullet points to which I would elaborate further whenever on speaking about it. I think this is a better alternative than having a full slide of user personas with a lot of text as this will distract the viewers and throw me off a bit. As you can see when I created the […]
Art of The Pitch: This week we looked at the art of the investor page and how we can replicate this. Daniel shoulders pictures from Airbnb Amazon YouTube for inspiration which allowed us to have a look at what we are expected to do and what works well within a pitch. I found this interesting as I have seen a pitch before was very similar to a presentation however there was more the intent of pushing a motive rather than just telling random information. I think one of the key differences is that there is a lot of emphasis on the product that you are selling and a lot of false optimism. Daniels presentation mainly focused on the presentation of the pitch. There was a lot of emphasis on how to present the presentation and how to maintain eye contact and interest in what you’re saying. I think a lot of this has to do with nerves and it’s deafly something that everyone experiences Daniel then went on to talk about how to deal with his nerves her place yourself on a stage and engage an audience. What I Learnt: In general, I’m pretty confident and I enjoy talking to […]
Week 9 Tasks: This week we had to continue to develop our pitches. Find out facts get images clear everything ready for the creation of the pitch deck. This week I began to throw everything into a Sigma file chat me organise all my thoughts. Not only did I do this but I also sketched out some small ideas of what I wanted to say on Post-it notes. Are usually do this to help me understand the general narrative of what I’m going to say including saying such as rhetorical questions and anecdotes. I also went and find a set of illustrations that I thought matched my style that I would put throughout the presentation and help make it more interesting. https://www.opendoodles.com/
Week 8: Briefing and Idea Generation: Unfortunately, I was stuck in my room with covid for this lecture so I just had to watch it online. This week we were given another reminder to update our blogs and keep up to date with our work before the lecture. we went through 9 ways for creating our idea for our next project which was a product pitch. The one that was new to me was the osborn checklist which id never heard of before and luckily daniel went into a lot more detail about it. I think the 2 most interesting points within the osborn checklist are the: Adapt Rearrange I kind of imagined large corporations doing with with their product to make it better or when they are adding new features and could picture how well going through these steps would help generate a more throughout and fleshed out idea. What I learnt: today was very interesting and something id like to learn more about. I always wanted to create and start my own business. The osborn checklist was very interesting and the sequence in which you go through it and all the small steps really help you thing […]
Week 7: Design Talk This week we Ronan in who is an experienced UX/Web designer who gave us a talk about what he does and hopes he got there. During this, he talked about the education path he went on and the work experience he did and how that affected where he is now. In the end, we got to ask questions about anything we found interesting such as what he thinks of certain types of design companies and what he would advise learning or looking into. I found this very interesting as it’s always great to hear someone’s experience of what you’re going to go through and any tips he would give. He also talked about programs he would advise learning such as after-effects and blender/3ds but also how to pick what you like doing and what works well at the moment. Website of the week: Swirl gallery is a website dedicated to displaying and showing off NFT’s . The website shows off a lot of technical skill, with a lot of animations and moving parts. Not only does it look great but it’s very easy to navigate. On their homepage the blue enter button is well the first […]
This week’s Task was to keep working on our design proposals For the design proposal, I decided to use the same layout as my CV to keep it clean and consistent. Using this I began to work on my proposal working through each step one at a time: The UX Design book we were shown really helped with the development of this document as they had a lot of things that could be adapted and taken into our new Document. I thought it was important to keep the pages empty and clear sectioning things off into groups to help navigation. In regards to the invoice, I already had a template I had from working with companies creating videos however it didn’t match who I was and was also poorly laid out. After looking at what was required I redesigned it: Doing this I used the same header style along with similar font and font size and kept the tables however this time I kept them centred. Final Proposal and invoice: Proposal Invoice
Week 6: The Bussiness of Design This week daniel covered what’s in a proposal and how we should organise it and go about creating our own proposal for the design brief. He split it all up into 9 sections each of which was covered in the chapter of the book we read How to structure a proposal 1.Proposal Cover The cover of your proposal is the first thing that the sales lead will see, so it needs to make a good impression. It doesn’t have to include too much but it must be well-designed. The proposal cover should include information such as: Name of the project Any project reference numbers Name of the client and contact to whom you’re submitting Name of your company and contact info Date proposal was submitted 2.Proposal Summary A proposal summary acts as an introduction, allowing readers to quickly get familiar with your proposal by outlining what’s to come. It gives you an opportunity to sell your proposed solution and explain why the prospective client should choose you over the competition. The executive summary in a proposal must be persuasive and focused on the benefits of your company/product/service, rather than descriptive and focused on the […]
This week Daniel wanted us to keep up to date with our blogs and research alongside researching stuff for the new project this includes What Hill Street is and more on Design Proposals. I completed updating my blogs and the new research for the brief is over on my recap and research page.
Week 5: Cv Crit This week daniel walked us through how he would have a CV set up. and how he uses InDesign to layout his text and format it for print. Personally, I used Pages as I’ve got some familiarity with it but in the future, I probably would use InDesign. During this he showed us how to: Line things up Add text Create lines Shortcuts Place things We were shown a book to read that will help us understand the next project about project proposals. The book will help us cover intellectual properties pricing and time management when outlining all the work. Following this, we had a big tutorial session where daniel gave us feedback individually on our CV’s. This took ages and probably would have been better planned. I sat in the list halfway but each session took a lot longer than originally planned so by about 3pm I had to leave to go training and couldn’t wait any longer. What I Learnt: In general, today was meant to be a lot about the group crit but it was poorly organised to the point of running past 5pm. I was a bit disappointed I couldn’t go but […]
This week’s task was to read a book called “A Project Guide to UX Design” https://drive.google.com/file/d/1Nv-J5vUr61q-jFgqMd9eHsYXukFFpa-N/view The book “a project guide to UX design” was a book recommended by Daniel for us to read for the following week. This book covers the topic of creating a proposal and all the documentation behind it. It was a great resource for showing examples of how to create your own proposal and how to safeguard yourself against anything that might go wrong. I was surprised by how easy this book made it to understand the difficult and sometimes overwhelming process of outlining your workflow and the documentation that goes behind it. Daniel told us that this book would help us understand what was happening in the next week and I can confirm it helped a lo a lot of what Daniel said was previously mentioned was in the book. From understanding how to list requirements & assumptions from the client while also maintaining a professional stance alongside working out pricing time management, and general job-related tasks.
Week 11: Self Study and Kyle Help This week we just worked on our elements project in class, finishing off things and getting help from kyle. For next week we had to create a prototype to help test and plan our elements project and show off what we intend the final project to be. For this week I created a gif which I was very proud of so I’m gonna throw it in here. Next week we are doing a peer review of everyone’s elements project prototypes so I thought it would be a good idea to spend my time in class researching how the hell you create a prototype in figma. I have seen the button every time I’ve used Figma and wondered how to use it but had no idea. I also thought it would be super hard and complicated. But, I was wrong. This is a video by Figma that I think I watch a total of 8 times trying to work out how to prototype admittedly I wasn’t actually doing the step by step at the time which could have helped but just trying to remember it for later ( Not a good idea). I then […]
Week 11: Finishing things up This week we had to create a prototype for our class review alongside finishing off our presentation. Firstly I created the prototype. I have never created a prototype in Figma before so I had to look up some videos but once I got the hang of it, it worked quite well. Prototype: The prototype took some work to get done as I had to collate all the resources I had created and display them as a working product. For this, I had to create some new components such as a menu and a loading screen. This is an example of the menu I designed. for this I used the same font I have always been using, Manrope and then coloured the text red to match the calendar. Previously it was black but this didn’t work well and missed something to I changed it to read to help make it stand out as buttons and not just text. Then I added in my icons that I made all using the same line width and similar lengths using a 1:2 ratio. Then I hooked them all up with prototyping this took a lot of messing around the […]
Week 10: The Art of the Pitch This week kyle gave us a presentation on the art of the pitch. This was similar to the one Daniel gave us a few weeks previously This included how to: present slides keep attention settle nerves sort design Most of this we had covered with daniel but it was still helpful as a recap. What I learnt: It was interesting to hear someone else’s opinion on presentations. Daniel said you don’t always have to tell the viewers the content as it can seem a bit forced and boring. Whereas Kyle said it was a must. I have to say that I agree with daniel that it is not always necessary. Research: So to begin with this week I was using grease pencil so I went back and rewatched some of the youtube videos I was previously using to learn it to help refamiliarize myself with it. However this week I wanted to spend some time looking at how to create a presentation and what a good one looks like. Moreover how to present one well. https://www.skillsyouneed.com/present/presentation-tips.html This gave 10 tips on how to improve your presentation skills. Show your Passion and Connect with […]
Week 10: The Art of the Pitch Tasks to be done: Sketch out a slide deck Continue to work on elements project. This week we were to focus on finishing our elements project and starting to think of ideas for our slide decks. Elements project: This week I began work on creating a 3D model in Blender. I did this using grease pencil which I had just learnt. This is the process of my creating the 3d model using grease pencil. I had some issues with lighting etc but I mainly followed the design I had created in Figma Having this helped speed up the process as I knew exactly what I wanted to do. I then threw in a camera added an orbital camera path rendered it as images and compiled it into a gif. Presentation: So we also had to begin outlining our presentation and planning it. I began by looking for a font and colours I wanted to use. I chose manrope to match my portfolio alongside black and yellow also sticking to my portfolio for consistency. Following this I also wanted to add some illustrations so I looked some up and matched the colours.
Week 9: Usability Testing In this weeks class, we covered Usability testing and what it’s about. ‘In a usability test, one user at a time is shown something (whether it’s a Web site, a prototype of a site, or some sketches of individual pages) and asked to either (a) figure out what it is, or (b) try to use it to do a typical task.’ Usability testing is about watching how people use your product or service and make it better. The methods we will be covering you can use right here, right now on your projects – whether that is portfolio, elements or micropublications. It is important to test early and often. kyle showed us some example testing documentation and walked us through these pages. Kyle then gave us a set of documentation that we could use and adapt when creating our own Usability testing. Usability Testing Resources Some resources from our workshop today: 1. Test Script – Use this when you are doing a test adapt it as you need. Helps you not to forget things. 2. Think Aloud Protocol record form – Use this for doing Think Aloud Test 3. Usability Test record from – use this […]
Week 9: Usability Testing This week we covered usability testing in class and were given some time to work on our projects this is where I began to take the Figma work further and expand on what I had previously developed. This is pretty much what I ended up with at the end of last week, with the implementation of the illustrations that I had taken from my sketches and turning the calendar into 3D. Last week I didn’t mention my colour pallet however when I developed it I could get a periodic colour pallet to function. Especially since they didn’t have a standardisation for the colours. Due to this, I thought I would stick to a Christmasy colour pallet to match the obvious theme. Branding wise I was less focused on fully fleshing it out at the moment however I decided on a name I had thought of last week: “A VERY ELEMENTAL CHRISTMAS” For this, I used the Manrope Font and kept it at an Extra Bold throughout. This includes the Numbers. Here I added a shadow and began fleshing it out a bit and cleaning it up. Here you can see the filter Icon I […]
Content Stratagy, Design & User Personas This week we looked at tailoring content to our target demographic and their requirements. Kyle gave us two personas for our elements project: Persona A – A Child (8–10) What are they interested in? Is this to do with teaching? Is it fun? Is it serious? Is it gamified? IMPORTANT: Are we leaving some of the content out, because it’s not appropriate to the audience, for example, the atomic weight might be a bit boring. Persona B – An Undergraduate Student (18–22) A different kind of person, different kind of needs. This person might want the atomic weight (in fact they might need it). Stress that the different personas will lead to different outcomes and that before we begin to design something we need to think about who is using it and what their needs are. Personally, I think I am going to stay with the first persona of a child between the ages of 8-10 but I would like to keep it open to all age groups. Kyle showed us examples of: Competitive analysis Questionnaires User Scenarios Site Maps Wireframes User persona for your project What I Learnt: I found the user personas interesting I […]
Week 8: Content Stratagy: This week we were given a large number of small tasks that took around 10/20 minutes each that we did during class including competitor analysis and user personas. Below is a list of tasks we were given for next week. Tasks to be done by next week: Start to consider the visual aesthetic. An early prototype for extra marks Previously I had created some sketches of ideas and started pushing them a bit further. This was still all on paper so this week I began to take them to Figma. I took these sketches into Figma. I wanted to try and add some form of reference to the periodic table. so I decided to leave some squares out I turned this into a 3d version At the moment I have the numbers centred on the squares however later on I want to try and experiment with having them top left in hopes to reference the original periodic table more. Some icons I repaired for the prototype: An overview of the calendar and the elements and some name ideas: Here you can see me go through the process of blocking out squares in the grid and removing […]
Group Critique and New projects: This week we had a class critique on our portfolio websites where everyone commented and looked at each other work with kyle going through each portfolio one by one giving feedback. We did this using miro and posted our links. Annika and I created boxes to organise everyone’s comments and work and I think in general the whole thing was very helpful. It was great to hear feedback on my work from others and hear what they thought of it. I was quite happy to see that people could see the link between my website and the research I had done and that people picked up on my animations and photography What I Learnt: This was a fun and enjoyable process. I got to look at some of the other people’s portfolios and was blown away by the typography of the german Erasmus students work as they all study graphic design. This is definitely something I want to work on. We were also given the new project that we would be working on. It was the elements project where we had to redesign or display the elements of the periodic table […]
Tasks: Tasks to be done: Organise Periodic table data – See Raw Data Here Begin to consider the paper prototypes, sketches and wireframes Visit the Ulster Museum Elements – Read about it here This week we had a few small tasks but in general, we just had to finish off our portfolio and begin creating ideas for our elements project. Task 1: We were given a list of information and we had to separate it up. To do this quickly I used the built in function in excel to automatically split up a list into a grid and then I added the headers with the appropriate title. Original: Mine: Task 2: Consider paper prototypes and wireframing. I began sketching ideas and anything that came to my head on paper I initially had three ideas, a calendar, an AR playing card set, and a Halloween trick or treat game. I wanted to stay away from boring designs and challenge myself to learn something new. These are some of the very messy pages in my sketch book as I try to figure things out and come up with ideas.
What we Covered: Promotional Strategy This week kyle covered self-promotion and how to get people to see your work. Kyle pushed the narrative of creating a narrative, a story that people can relate to and follow. This can be achieved through many tasks, having a blog, creating an actual story, and posting work on Instagram. Kyle then showed us his three-pronged approach to self-promotion. The promotional three-pronged approach: Portfolio Site Social Profiles (Twitter, Instagram, etc.) Inspiration and Priming the Brain (Tumblr, Pinterest, etc.) The portfolio site which we’ve created, then social profiles to link and lead to the portfolio website. and then posting little snippets on websites where loads of people will see your work like Pinterest and Tumblr. What I learnt: I definitely think that we covered storytelling quite. a bit and it’s definitely something I think helps engage users and helps them remember you. Nothing is better than a story. This is something I think could be cool to incorporate in my own self promotion/ branding however I’m not sure how. this weeks task is to create some Instagram posts for Instagram which I think could be cool and maybe start some ideas. Research: This week I looked […]
Week 6: Promotional Strategy This week we had to create a series of Instagram posts to promote our work. These could be in any form; video, photo, drawn, animated, anything! I had a quick look at some other peoples Instagram stories: So I began to create my own using images of my work and keeping them in common with my brand.
Tasks: This week we were given the task of creating a homepage and 2 case studies for the following week. Home page: I began by working on my home page which took a lot of tinkering as I wanted to add slight animations, to do this I looked up many sites and videos that gave tutorials on how to do this. Here is a full-page spread of my home page however it’s a bit bugged with the capturing software that I used. The Blue background gives the user something to place images and text on and gave the page some form of colour the blocks of images and text use a parallax effect to slide down the page slightly and the bottom footer pops up when you reach the end of the page. Animations included Bio scroll underline wipe on menu blue background parallax case study parallax footer pops up case study turns into a card on hover animation video: parallax scroll: These are a few of the videos I watched to help put together the parallax effects on scroll but a lot was done through playing around with speed and distances on multiple device sizes to fine-tune the […]
Week 5: Responsive Web Design this week we had a look at responsive web design and the HTML and CSS coding behind it. This is something that a lot of us have covered however there are many who haven’t even heard of it. For me, this was more of a recap. Things we covered: Article Layout Fractions and Repeat Grid Positioning Template Areas Autofit AutoFill Implicit Rows Image Grid Justify & Align Web Typography What I Learnt: This week was more of a recap for me than anything new, I had previously learned a lot about grids and responsive web design coding. WE covered some things to do with Webflow at the start which was the most helpful as this was my first time using Webflow and setting it up. Research Webflow Showcase Webflow has a showcase page where you can see what other people are doing and the websites they are creating. This spans from small individuals such as myself to large companies that specialize in web design. Not only can you look at the website but you can also look at the build and take it apart. That’s by far my favourite part. And some even go as […]
Week 4 Task: Interview Questions This week’s Task was to research potential questions that you might receive in an interview and write out some answers that you might give to those questions. I have this work displayed on the Research and Recap post for week 4.
Week 4: Interview Skills Today we coved interview skills, what to talk about how to answer questions and what questions we should expect. Talking about yourself can be an awkward and hard skill to learn. Never Done = Willing to learn Challenge Convention = Push the boundaries Impact Together = Be a team player Bring You = Personality (enthusiasm) Be an Advocate = User-centred approach We talked about how you should always answer a question and then back it up with some form of evidence to prove that you are who you say you are. This means if they ask you if you would fit in well with a team you should explain why and possibly a time you’ve worked well with another team. daniel then mentioned a design task which I didn’t think was a thing in the design work for job applications, I know these from when I was more code orientated as these are quite common to see your practices and thinking. This is a useful link to use when completing a design task for an application. https://uxplanet.org/how-to-ace-the-design-task-to-get-an-interview-951ae91ca7c2 You should also always bring hard copies of sketchbooks and backup material to help show your process, no […]
Tasks: This week’s task was to continue on with our web development.
Week 4: The HTMLs and CSSs This week kyle covered the basics of HTML and CSS again in class, on this day I was STILL in Italy and probably running from the tornado that hit the competition. I have worked extensively with HTML and CSS and have a coding background. A lot of this was a recap of things I previously knew. What was covered(HTML): Responsive styling HTML elements HTML attributes images links file paths and how to set up a project properly. I already have a decent depth of knowledge on these topics as you can see in my Github. What was covered (CSS): linking style sheets box model selectors classes ID’s What I Learnt: I used this week as a recap and to check whether there was anything that I had forgotten/missed when I taught myself CSS and HTML. It was useful to have a look at old material and I found myself looking through the code of my old projects on GitHub to see how I did things. I definitely think if I were to code more I would do things differently and avoid repetition and “messy” code. Research: Kyle referenced a good book on responsive […]
Week 3 Tasks: this week we covered etiquette within a studio, this included interacting with other designers and colleagues along with clients. During the day daniel held a workshop with breakout groups where we practised a meeting. This weeks task relates to this but covers all online communication through email. This week I also finished off my CV. I had my family proofread it along with some of my friends before I used it to send it off. In general, I am pretty happy with the outcome of my CV I feel like it reflects me perfectly and shows all my skills to employers. Now all I have to do is send it off to companies and hopefully, they respond and off from a placement. Leander-Cover Page Leander CV Extra: Research: We also had to continue researching design companies alongside any further information related to today’s lecture this can be found in my research and recap blog.
Week 3: Creative Entrepreneurship: Studio Etiquette I was unfortunately not in the country for this lecture however luckily the lectures are recorded for anyone who is not present due to covid or other circumstances so I was able to watch the content again. Today we covered Studio Etiquette, this included how to behave within a studio while working with others and how to handle yourself around clients whether that be in person or online through a zoom call. I don’t think any of these were new to me as I have worked in shared spaces with other people before. We then took a look at how to handle yourself in emails and phone calls, this followed a similar direction to the others. The class was split up into break out rooms where they had to speak over a number of topics and assume a selection of roles. This included a notetaker, chairman, and other general parties. I thought this would be quite interesting and looking back on the lecture notes I wish I was there for this.I think one of the key things to learn from this is to always communicate with each other and no question is too stupid […]
Task: This week our task was to continue the development of our project and begin to take it into Webflow. However, as I was away the previous week I began to design my sketches in Figma and work through iterations. Webflow: Webflow is a website builder that combines high-level code and a block using website builder to create a simple and easy web design program that is 100% cloud-based.
Week 3 was a critique of people high res mockups of their website. Unfortunately, I wasn’t in the country, In fact, I was up Mount Etna on a quad bike doing a tour of the lava flows (very cool). link: https://miro.com/app/board/o9J_luEE_q8=/ We looked at everyone’s pages and designs so far and gave feedback. I went back and looked at a few and gave my opinions after the fact. I was surprised at the large variety in design among the class as I expected some reoccurring themes or colours which didn’t seem to happen. A lot of the designs were unfinished but showed potential. Personally, I thought that a lot lacked empty space and hadn’t been viewed fullscreen which would have highlighted the large size of buttons and images. What I Learnt: I was surprised at the wide variety of results, seeing other peoples work has pushed me to develop my own as at this stage I am not as far on as the rest of them due to me being away. I definitely need to have a content audit and finalize my content as it will help accelerate my design. Following this, I also need to find images and good […]
Creative Entrepreneurship: Today we started by looking at the Belfast UX slack group and what people had to say about interviews and applying for jobs. This was useful to see and a group I am already part of. We then had a look at CV’s What is it? A concise, formal document that summarises your education, skills and experience. It should be easily read and referenced and explain who you are. What should it include? Contact Details A Short Bio Skills Work Experience Education Awards and Additional Info References Keep it short. CVs should be as concise as possible. Use simple sentences. They are for conveying information as quickly and efficiently as possible. So, only relevant & vital info. Your CV will likely be about a page or no more than two sides of an A4. Workshop 20 Questions You will each select a random post-it with a job title on it. Keep this secret. Your colleagues in the group must find out what you do in 20 questions or less without asking outright what you do. You only get one go at guessing the job title. No cheating. What I Learnt: Today we learnt a lot about what […]
Tasks: Start writing your CVs and covering letters. Pick a job or company from last weeks research to get you started. Also, consider ways in which you will stand out or your delivery method. Get LinkedIn and any other social platforms up to date. Start writing CV/Cover letter: I started writing my cover letter and used a similar style to the one daniel showed us. I kept everything within a table which helped the spacing and organisation. I still have to add sections on previous work experience, additional information and references. These will follow the same format as the other sections. I have to work on formatting the document as to when it is converted to a pdf my qualifications smoosh together. This is probably because I am using pages and it is my first time using the software. LinkedIn: I have updated my linked in, which did not take long as I had updated everything at the end of last year.
This week we covered four things in class: What is content curation? Job user stories Visual grammar Crazy 8’s 1. Content curation Today we recapped content curation using audits and tables to collate content before beginning design. 2. Job user Stories We looked at how user stories can help direct design towards fulfilling its purpose efficiently and elegantly. By putting yourself in the user’s position and working out what they want to do, the designer can help inform the design of programs, websites and apps to enable the user to complete their task. We completed some in class with our peers and read them out loud. Here are my attempts: 3. Visual Grammar We discussed how visual grammar is important to create consistency throughout a project and infer continuity between pages using colour shape and line. Simple things such as using the same font and font-weight. This can be added on to by using your own branding or visual mark. Using a consistent colour scheme with your identity etc. 4. Crazy 8’s What I learnt: I personally found the crazy 8’s super fun and useful for creating wacky ideas that I usually wouldn’t think of. The user job stories […]
Tasks: This weeks task is to create a high-resolution mockup on Figma of our website for review and feedback next week. Unfortunately/ fortunately for me, I left the next day for 10 days competing in European championships in Italy!! Tasks to be done: Content of portfolio should be set. ✅ Complete two user/job stories. ✅ Start to consider visual grammar. ✅ High-resolution mockups of your portfolio in desktop Home Page, Case Studies, About, Contact. ✅ Task 1: This was completed last week and can be seen in IXD301 Week 1: Tasks Task 2: We completed this in class with our peers and read them out loud. Here are my attempts: I found this a useful task to help us remember who and what we are designing our websites for and the key information they should display. Task 3: This is something that we should consider when creating high res mockups, in my case I want to be able to portray my personality while remaining professional and employable. I will keep a minimal colour pallet along with a legible font. However, I would like to incorporate emojis and the possible use of custom cursors as I saw in my research. I […]
This week’s tasks consisted of researching designers around the world alongside local designers. Tasks: Find three examples of local companies that you admire. Find three examples of international design that you believe are world-leading and produce exceptional work. Us folk Us folk is s local illustration and design company made up of loads of amazing and talented illustrators and designers. They are currently one of the biggest illustration and design companies in Belfast and continually grow and expand their capabilities within the market. They are a collection of freelance creators that support each other and now occupy the same space making illustration, design and UX a professional and tangible long-term job. Pentagram Pentagram is one of the world-leading design companies specializing in branding. Their work ranges from digital branding to interactive real-world art installations. Their work ethos is something to admire and the transparency with their work and the attention to detail by the designers is amazing. As a company, it prides itself in its designers and never waits to show off who did what project.
Lecture Recap: This was the first session of IXD302 with Daniel Philpot, this session was more of an overview of what we will be covering in the following weeks and easing us into the course. We covered course content in creative entrepreneurship which is the title of this module where we will be creating a CV and cover letter alongside an Invoice in the latter weeks. We then began by covering some simple techniques and ideas that would help us find a placement and be successful in applying for one. We then went into a workshop where we had to write down everything we would look for in a potential employer and how this would affect our decisions when picking an employer. What I learnt: This week was more of a warmup to the following weeks however I think the most important thing I took away from this was to be confident in who I am, don’t be afraid to ask questions andput myself out there if I want to stand any chance of getting a placement in a design company. Website of the Week: https://finale21.ch/en/projekte Finale 21 is a german website created to display the work of final […]
Week 1 Tasks: This was the first week of IXD301 in which we covered what we will be doing throughout the semester and the main deliverables for the end of the semester. This Term we will be focusing on creating a portfolio for applying for placement next year to address any early job offers/ applications. This week’s tasks see us begin the research and planning of our portfolio websites and the content within it. Tasks to be done: Content Audit Look at what heroes are doing (Look at other portfolios for inspiration) Research and Discovery – Google Trends etc Site Maps Start to write your content for your website Three case studies Home page(These are the most important) About Page Contact Page 1. Content Audit We were given an example from Kyle to follow and apply to our own design and thought process. I thought creating this in an excel sheet would make it a lot neater and readable. I added in my blog links and Instagram along with referencing the links to other pages on the website which would be displayed on a menu Bar. After looking again I updated and added more to it such as […]
Content: This was week 1 of IXD301 with Kyle Boyde where we covered what we will be doing this semester, programs to use and workflow and the amount of work to expect. We started with a module overview and covered the current task which is designing a portfolio website with the intent to use it for a placement application for the following year. This is important at the moment as many firms are beginning their search for students already. Content Design: We covered content and design and the basics of organisation. In short, content should be created first, then the website for example should be created around this content. Currently, a lot of content is being crammed into designs that make it unnatural/ forced, which lead to bad design outcomes and stiff websites. The way to get around this is to do a content audit and collate all content beforehand. This includes: images text links videos Content Wireframes: We then had a look at content wireframes and the use of them in larger web/app design and how they can be useful in working out what content is required and how the content should and could be structured. What I learnt: […]
Week 11 Tasks: This week I focused on completing my Infographic and began to use my sketches to put something together. Illustrator: Started off with some illustrations of ships on the sea that I drew in my sketches and then decided to populate it more by adding fish and floating bottles. At this point, I began adding text and I started off with the title, this wasn’t the first title I tried but it was the one that works the best and felt more like a traditional infographic. At this point, I decided to continue to populate the infographics with facts that I collated from my research. This is one of the other titles I tried but it didn’t fit well in the infographic and so I chose my other design. This was one of the final infographics: I then spell-checked it all and fixed some mistakes and ended up with this: Overall, I am very happy with how this came out. If I was making some changes I would include more graphs and bar charts next time but other than that I think the way I have presented the information works well with the illustrations and the […]
1 on 1 Critique: This week we had a 1 on 1 with paul where we discussed how we were getting on. I showed him my app design and he pointed out some spacing he would change and then we talked about what I was doing my infographics on and how it was going. At this point, I didn’t have anything much to show.
IWeek 10 Tasks: This week’s task was to just continue working on my infographic. When I began to work on my infographics and looked at some research I didn’t have any ideas for the infographic so I decided to change to ships on the sea/ plastic in the sea so I did a load of sketches before continuing. Following this, I started to look at some facts in this general area and found lots of websites. Websites and Info: https://www.nrdc.org/stories/water-pollution-everything-you-need-know Eighty percent of ocean pollution (also called marine pollution) originates on land—whether along the coast or far inland. Contaminants such as chemicals, nutrients, and heavy metals are carried from farms, factories, and cities by streams and rivers into our bays and estuaries; from there they travel out to sea. Meanwhile, marine debris—particularly plastic—is blown in by the wind or washed in via storm drains and sewers. Our seas are also sometimes spoiled by oil spills and leaks—big and small—and are consistently soaking up carbon pollution from the air. The ocean absorbs as much as a quarter of man-made carbon emissions. Nonpoint source pollution is contamination derived from diffuse sources. These may include agricultural or stormwater runoff or debris blown into waterways from land. Nonpoint source pollution is the leading […]
The Art of Information: What we covered: The Art of Information Big Data Small Talks Hand In & Group Critique This week we looked at how designers can abstractly use information and data to create beautiful works of art and eyecatching ways of displaying them. Paul showed us a lot of live installations by artists that visually represent data or update to show data as time changes. This is something I’ve seen in a couple of galleries with audio changing depending on where people are walking or how they stand along with visual representations. Another one of the favorites that I saw was a project by Robin Price where he initially created a led ping pong table that eventually he adapted to display information on everyone whos played on it using shapes, sound, and the lights. We then looked at “Big Data” a phrase used to describe the large amounts of data used by companies to track their productivity and their customer’s needs. Websites such as Netflix use this to pick out movies that you’d like or google who uses It to tailor ads for your personality. We then looked at a couple of designers who took and manipulated this […]
This week we weren’t set anything specific to do over easter so I decided that I would finish my App Design and begin collating information for my Infographics. App: I took my now polished app wireframes and the illustrations I had just created and put them together. Result: Infographic: I have 2 books That I spent some time over easter taking information out of and digitalizing. I have quite a few spreadsheets made by coaches that haven’t yet gotten but hope to add to my excel file. I found this part suuuuuper interesting as I never thought id see how much I’ve done over the past two years even though covid had hindered this.
Manufactured Fictions: Today’s lecture was very different and not like our other lectures. I really liked it and the theme behind it, it was about the new Instagram age and how times are changing in the online world, how people are using computers and software to build these fake robots like people or AI and can become someone else. A lot of this lecture was about how easily manipulatable the online world Is and how increasingly difficult it is becoming for people to decipher what is real and what is not. I think this has a huge part to play in the current culture and news.
Master-Apprentice bar charts: I found this weeks task a lot easier than last weeks but I cant tell if that’s because I’ve been spending more time on illustrator than before. Original: Mine: Research: Do’s And Donts of Infographics: DO’s Do your research. It may seem like an obvious step, but far too many brands don’t take the time to do thorough research. Focus on finding relevant statistics that shed light on your topic and help build a complete narrative. Remember to use reliable sources, cite accordingly, and avoid outdated findings. As a best practice, any fact more than one-year-old is outdated. The last thing you want to do is dampen your brand’s reputation by misinterpreting or presenting outdated, incorrect information. Do focus on content. It’s easy to get caught up on aesthetics and details, but remember content is king. Infographics became popular because they are a visually appealing way to present data and tell a story. Build a complete narrative that includes a beginning, middle, and end. Provide context for the viewer, present insightful findings, and close with a position, solution, or prediction of the future. Even if an infographic is beautifully designed, poor storytelling and copywriting will lose audience attention. If the content […]
Designing Infographics: This week we looked at designing infographics through: The Death of Words Rise of the Infographic What makes a good infographic? Steps to the Infographic level of amazing… This week we started looking at how the world is changing from using words to images and how vital images are to our intake of information especially since the birth and rise of social media websites such as Facebook and Instagram. “Illustration can help showcase and bring things to life, but there’s a fine line between [this and] it becoming distracting. It should be more of a supporting than a leading role. If the designer isn’t careful, what he’s designing can become purely an illustration, rather than an infographic. You want the illustration to support the story that the data is telling, rather than detract from it.” —Robin Richards Paul showed us a 14 step guide to making an infographic that I thought was quite useful.
Tasks: This Weeks task was a master-apprentice of some pie charts: Mine: Master: Mine: Research: Nicholas Felton Nicholas Felton is a designer/artist whose work focuses on translating quotidian data into meaningful objects and experiences. He has completed a series of annual self-tracking reports detailing the events of a year which became part of the ideology behind Facebook’s timeline which Felton was one of the lead designers on. I think this displays the incredible scope and applications of data visualization and how it can lead to a great variety of career opportunities. While working with Facebook Felton changed the structure of the timeline to showcase an entire life resulting in redesigned elements such as the addition of cover photos and styling attributes like typography and map styling. This had a massive impact on the functionality of Facebook leading to the social media platform still in use today. I also love his annual reports that he publishes. I think I’m going to do an infographic similar to these however make it about my training I do for sport as I have a huge log of all my information day by day for the past 4/5 years. Giorgia Lupi I really love […]
Visualizing Data This week we kicked off with the second and final set of content for the module, exploring visualizing data. We introduced infographics, exploring how – in an attention-deficit culture – we need to condense information down into easy-to-parse visuals. We explored how infographics have evolved, particularly highlighting the fact that – in fact – infographics have been in use. Data’s All Around Us Lies, Damned Lies and Statistics Research Inspiration Your tasks… Data Around Us: “The commonality between science and art is in trying to see profoundly – to develop strategies of seeing and showing.” —Edward Tufte Diagrams: Visualizations: Data’s Everywhere • Bus Timetables • Company Forecasts, Profit and Loss • Election Results • Sales Figures • Weather Reports
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 […]
Week 6 was Group critique where we looked at everyone’s work and gave feedback on miro, paul later sent us any notes on our work. I really enjoyed Matthew Grissams work and his use of color and illustration. I was very happy with the feedback on my work some of the constructive feedback was that I should match the google button color to that of mars but this color was picked as its Google’s main color. Another was about adding stars to the background and I had thought about this but I didn’t like how it looked in the illustration so I decided I wouldn’t add it to the rest of the app.
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 […]
This week’s task was to complete some of my app designs for the week 6 critique. I continued to look at some app designs and create some more wireframes. Research I really enjoy the simple curves on the panels and the drop shadow on the cards. I thought looking at how some other apps handled payments would be interesting. I’m more of a fan of the first app shown as I think it handles the payment type better however I’m not a fan of the card-like design. I’ve never found this too intuitive. Wireframes: App Design: This week I just Illustrated the remaining illustrations for the app, I already had an idea of what I needed from my new wireframes.
Trying it all Together: We started off by looking at some App designs and the use of color and icons within them. I took some screenshots of some of my favorites. These are mainly due to the great colors. We then looked at good design practices such as contrast icon size button size and spacing to allow for the thump size and reach. We then had a look at color schemes and color standards such as monochromatic, analog, complimentary, and custom. All these have different outcomes and work well in different scenarios. We then looked at the impact of contrast, why it’s so important. A good website for this is: contrast-ratio.com Contrast ratio: Small text – 4.5:1 Large text – 3:1 von Restorff Effect When multiple similar objects are present, the one that differs from the rest is most likely to be remembered.
Checklist: Things to have done for week 5 Icons Created Consider UI From Your Wireframes create 3 visual mock-ups/prototypes From this list, all I have to work on is creating mockups from my wireframes: Using these paper wireframes I’m going to take the first three designs and take them into Figma. To start I collected the icons I made for my planets. I then put these into my designs and used the color scheme I picked and matched to logos. The main thought behind the colors was my dislike of the use of black due to the harshness that doesn’t match the logo design. therefore I have decided to use dark navy and grays commonly found in dark modes on apps such as youtube and chrome. I created these two but after I made them I realized I was using the wrong dimensions for an iPhone. Along with this, we had a group critique and I got some great feedback on my designs, so I took any advice on spacing and sizing and made these changes as I took them into my new dimensions. To create some of the iPhone features such as the time battery and bottom bar I […]
Illustration in UI Today we looked at illustration in UI why it’s useful how to make them effective and where I can and should be used. We also looked at examples from designers and illustrators on how they incorporate their illustrations into their UI to help display information. The illustration is there to clarify information to make clear by giving or by serving as an example or instance, to provide visual features intended to explain or decorate, and to show clearly what is being written about. In the example below the use of illustration clearly conveys the difference in the selected time making the app easier for people to understand. Tips for sketching: Sketching is not about being a good artist, but about being a good thinker. 1. Use a thicker pen 2. Draw straight lines 3. Be thoughtful about color 4. Make your sketches comprehensible 5. Use the right gear 6. Time yourself Illustration in UI should be Meaningful, Recognisable, Preferably straightforward, unambiguous, and Clarifying. However, it should also be attractive harmonic and relative to the rest of the app design. Mascots and characters can be a good way of introducing illustrations into UI that allows the user to […]
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.
Getting Iconic Today we looked at: Icon Design Inspiration Master-Apprentice We looked at the history of icons and the development of specific icon sets such as the development progression and evolution of the icons created for the Olympics and how they changed over the years to reflect the state of design. We looked at a quote from a designer and paul discussed how you can create icons and design from this other than just paper and computer graphics and that they can originate and stem from things such as origami and needlepoint. “Bitmap graphics are like mosaics and needlepoint and other pseudo-digital art forms, all of which I had practiced before going to Apple,” —Susan Kare We looked at the use of icons on current apps websites and designs and the simplicity of the logos that allows them to convey their purpose and meaning, for example, the apple product logos that are very similar but contain recognizable differences. We then looked at how we can keep consistency in our logos with a couple of things: Level of detail Scale Detail Style Harmony Designers: We then looked at some Designers like Vic Bell And how she designed logos for brand such […]
A Picture is Worth We started by taking a look at the introduction to the module with image communication, logos icons, and much more. Paul showed us some illustrations which I personally loved. I’ve followed a lot of digital artists on Instagram for a while now and have dabbled in it as well, although never producing something I’ve been super happy with. We had a quick overview of some of the previous travel apps previous years had designed and in all honesty, I wasn’t super impressed. when I think of app wireframing I always think of clean icons and a professional approach with solid consistency. However, when it came to the infographics I was very impressed. I had always wanted to create one and had even tried to create one for a school project but I always had difficulty using the software to create one. We then moved onto the main topic of the presentation “A Picture is Worth” where we covered multiple areas: Narrative: Similarly, when we combine images we can tell a story. Juxtaposition: When we juxtapose images, we can make new stories possible. A Career? I found this quite interesting and something that could definitely be expanded […]
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: Mind Map Creating a quick mind map for my project: Taking it into Miro: Task 2: Paper Wireframes Before I began to design some wireframes for my own app I had to decide with the travel app idea I was going to go with I ended up picking space travel as although not realistic I thought it would be quite funny. Following this, I looked up more travel app designs and drew a wireframe for them so I could see if there was a pattern. These are from three popular apps. 1. Garmin watch app, 2. GoPro Video App, 3. Track and Trace NI Above are 3 wireframes from random online travel apps. A couple of things I took from these were: The amount of empty space large visible buttons clean color palette filleted corners nice consistent grid system limited text recognizable logos and icons These are some of my designs:
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: Recreating Icons The first task given to us was to recreate some travel icons that paul had supplied us with: So I took them into Figma and recreated 4 of my favorites from the red and purple icons. I really enjoyed doing this task and thought it would be more complicated to do however it was a lot easier to do than expected TASK 2: Mind Map I created a mind map of my ideas for the kind of travel app I wanted to create. I just thought of three different ideas and the possibilities around them. TASK 3: Look at other apps I looked up a couple of designs used for apps and this one caught my eye: This is a Traveling App designed by Cal Esatama I really like the simplicity of this design and the colors used in the illustrations. Personally, I think the illustrations are what make this app beautiful along with the nice paneled display. I think the color scheme on this app works amazingly along with the simplistic illustrations the blend […]
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
Vic Bell Vic bell is mainly an iconographer and illustrator. she has worked with large companies from Scratch to Uber. I began to look at her work with uber where When diving into this project she decided to explore the largest design first and reduce the detail enough to keep the icon consistent and the message obvious and started with the map icon as it was going to be one of the most complex icons to create. I would have never thought about the line type that someone was using would affect the design and influence how it was designed. I personally would have never thought of this. However, I really love how she has displayed and incorporated three different designs to cope with size change and allow for scalability. She also designed loads of logos and I couldn’t help but look through them and compare them to the app to work out how many are still in use. The amount of detail and thought that went into making every single one is amazing and her process of stripping them down to the bare minimum and adding on from there is […]
Github link:https://github.com/LeanderIXD John Baskerville: https://github.com/LeanderIXD/john_baskerville Type history: https://github.com/LeanderIXD/historyoftype CSS Exercise: https://github.com/LeanderIXD/css_exercise Portfolio Page: https://github.com/LeanderIXD/ixd101 Final Pieces Manifesto: https://blogs.ulster.ac.uk/leandermutschler/2020/09/28/week-1-mantra-design-page/ 9 Iterations: https://blogs.ulster.ac.uk/leandermutschler/2020/11/28/ixd101-9-iterations-and-experimentation/ Follow the rhythm: https://blogs.ulster.ac.uk/leandermutschler/2020/11/27/follow-the-rythm/
I Am quite happy with how the web essay turned out and there is very little I would change. I found it quite hard to find images of the right resolution and found some of the spacing very tedious and annoying but other than that I enjoyed it a lot. I am not too sure how well my essay writing skills are however, I tried my best and an I’m content with what I have written. Web Essay link: https://github.com/LeanderIXD/jan_tschichold
I just sketched some quick penguins of the top of my head. Wasn’t too happy with them but didn’t expect much. Just thought I’d post them anyway.
For my background, I wish to have penguins walking down the screen as you read to tie it in with the penguin books that Jan Tschichold designed in his later life and to try to continue with my drawn plan. These illustrations were my first attempt at filling in the background however I didn’t think they worked too well as their style didn’t suit the elegance of Tschihold’s design and there was too much clutter on the website. For those reasons, I decided to redraw them on paper with ink and watercolor and scan them in to use. […]
I have finally finished the actual essay and I am at the point where I will begin to add my images and illustrations. I spent a lot of time developing the bibliography as I found this quite hard and have already added in the illustrations for this section. We had a critique with Kyle and Pauline and they said they like my overall design and just mentioned the lack of images and that I should post about my experimentation with my title etc. Currently, my web essay is a blank sheet with only the header and footer being finished. I have some ideas and began sketching penguins to practice for my illustrations. This is what my website currently looks like https://leanderixd.github.io/jan_tschichold/jan_tschichold-three.html So as I was doing my title I experimented with different styles and layouts and eventually settled on what you saw however I went through a couple variations and they didn’t work very well.
Hicksdesign is a design company created by John and Leigh Hicks and has been working with clients globally since 2002. They specialize in: Web & Product Design Brand Identity Iconography Print While looking through their work I found A series of illustrations for DuckDuckGo – telling the story of the alternative search engine’s unique privacy features. It was really nice to see that big firms also create their work on paper first and transfer it to screen and similar to myself try and explore other media like animation. As just a website I really enjoy the side menu bar and its interaction with the change in background and how that affects its color. As a company, I really enjoy their color usage and I would really like to incorporate this in my own work. They also balance white space and content really well which I still struggle with. John Hicks was responsible for the redesign of Spotify in 2014 and for me, this was […]
This is the collection of links related to the development of the Type Specimen posters. https://blogs.ulster.ac.uk/leandermutschler/2020/10/01/type-specimen-for-screen-research-and-planning/ https://blogs.ulster.ac.uk/leandermutschler/2020/10/09/type-specimen/ https://blogs.ulster.ac.uk/leandermutschler/2020/10/22/type-specimen-updated/
My initial idea following the 9 iterations design research project was climbing holds as it was something I had done quite a bit recently. After taking some photos I took them home and I had always laughed and joked with friends about how they looked like faces so I took them into photoshop and did some sketches and drawings. These were where I left it for a while, after fixing the cropping and sizing issues Paul brought up in a 1 to 1. Later I decided to do some sketches on paper, I was quite happy with how they turned out. Later I then decided I would draw more in my free time. For the portfolio website, I wanted to try to create a carousel image display. However, I also wanted you to be able to see […]
Added footed and reworded header along with changing some of the spacing padding and formatting. Images are still to be added. https://leanderixd.github.io/jan_tschichold/jan_tschichold-three.html
I used some previous code to create the foundations of my web essay and then added some extra code to create a more advanced menu bar. I found this code on the w3 school’s website. I found using my wireframe quite useful for the initial layout. I hope to add illustrations and images next weekend and hopefully finish off the last three sections of the essasy. https://github.com/LeanderIXD/jan_tschichold
During my one on one with Paul on Tuesday about general things we ended up talking about previous tasks, and the iterations project came up. I decided I would resize these in photoshop for Instagram. I also wanted to create some illustrations instead and recently received new pens so I decided to do some experiments on paper.
We finally presented our presentation after about 3 weeks of working on the powerpoints. Our group consisted of 4 people: Leonie, Cormac, Jessica, and myself. I felt like we did not distribute the work well which wasn’t helped by the lack of communication. I am someone who doesn’t like leaving things last minute and doesn’t really mind doing work. Luckily Leonie did a major amount of the work alongside myself. We divided up the slides we created to allow the others some content. However, the others added 1/2 of their own slides which we didn’t account for which brought us substantially over the 10-minute mark that our original presentation was already pushing. From this, I learned to push communication and accommodate more from others. We got good feedback on the content and layout, with the only fault being the readability of the font on some of the colored backgrounds. The actual presentation of the PowerPoint didn’t phase me too much as I don’t mind public speaking.