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 […]

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 […]

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 […]

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 […]

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: […]