Website Group Critique

Here is a link to the Miro board.

In all honesty I was a bit sad about the lack of comments but Daniel was very helpful, he suggested I change the profile image from a rectangle to possibly a circle as it would help keep the flow of the website constant and uninterrupted. He suggested I change the business card – which I will do. It was helpful to see my peers websites and personal brands as it helped me gauge where I am and where I need to be.

I made an animation using Procreate to use as my loading symbol

Click here to see them in action.

Group Critique

I made some slides in preparation for my group critique

group crit

After the group critique I decided to make a few changes to not only my colour scheme but I also decided to make a new illustration to represent myself.

I used Adobe color to create my colour scheme.

I developed my illustration using procreate, here is my progress:

This is my final illustration for my brand.

I am quite pleased with the outcome and I feel as though it will add a fun and friendly aesthetic.


Website research

Priorities for my website


  • Online profile promotes work
  • Allows clients to contact more easily
  • Displays my work well


  • To build a reputation for my brand
  • Gain more exposure
  • Present my process (research or writing – case studies)
  • To showcase finished and ongoing work


  • Unique & memorable (has to do its primarily function well before it can be unique and memorable)
  • Generate a level of professionalism
  • Demonstrate my personality through a clear tone of voice

To build a good hierarchy/lists of priorities you have to find what needs to be done for other things to eventually be developed.

The work should be the MOST important thing – the brand is almost secondary to the work.

Websites that helped me code my portfolio

  • Researching how to scale my website. Link to the article I read here. This article helped me learn how to ovoid visitors of my website being able to zoom. I wanted my website to have a set border, I am not the best with coding and so researching code and trying to learn new techniques was key for me.
  • HTML5 cheat sheet.
  • Preload attributes – w3schools was a HUGE help when it came to learning how to properly code and troubleshoot my website.
  • Researching how to style the body of my website. Link to helpful website here. This was helpful when I ran into trouble setting a margin box for my website.
  • I used the courses offered by GitHub quite a lot to help me expand my knowledge of code. Link here.
  • How to create a website using GitHub here. I was struggling with how to upload my website to GitHub (this was actually my biggest issue last semester). How to host your website on GitHub. This link also helped me learn how to host my website.
  • Webpage design. This was a great article that helped me consider the layout and design of my website.
  • HTML examples.
  • How to make my navigation bar fixed/sticky. This was my biggest challenge by far! I’m still not completely clear on ow to do this so I would like to continue expanding my knowledge in coding over the summer.
  • Kuldar
  • Smashing magazine
  • Help to keep my email link secret from bots —> HERE.

Helpful videos I found on YouTube

I’m a visual learner and finding resources like the ones above was a huge help to me as it helped me understand what I needed to code and where I needed to code it.

Website inspiration

This was one of my favourite websites, she has a very cool animated type intro when you first go into her website. Ideally if I had the skills to do that I would have liked to incorporate something like that into my website.

Even though the three links above where just templates I learned a lot with them by going into their source code and inspecting it. I did this with every website I went into that inspired me and this was a  great learning tool.


  • Color codes. This was a useful tool when trying to find out the codes for the colours I was considering.
  • Color codes

I wanted to make a change to my colour scheme for my website once I had started as I felt that the colour scheme I had previously chosen no longer accurately described me and therefore my personal brand. I had previously leaned toward more neutral colours and avoided ‘girly’ colours if you will. I finally decided to integrate these colours as they not only represent my personality quite accurately but also my style – something that people always comment on – so I decided to lean into it.

I  really liked the above colour, it is a nice, solid and simple shade of pink that is kind to the eyes – not too bright and not too dark.

I really liked the coral colour theme above but I worried about its visibility and distinguishability from each other for people with color blindness for example.

I had the idea to create a colour pallet and gradient using my profile image, I really like this colour palette and I checked it against colour blindness and it works. I am very pleased with the new colour palette I created and feel like it suits my brand much more than my previous choice.

This was my initial draft of my colour gradient (I wanted to use it as the background colour for my website) I then moved the colours around to give it a smoother transition into the dark colours and this was my final result.

I will be using this gradient as the background colour for my website. I like the flexibility it represents by going from a very light colour to seamlessly transitioning to a very dark colour. Not only that but I feel as though it will add depth to my website and make it more interesting.

Website wireframe

Click here to see the figma file above.

This is what my ideal website would look like if I had the coding skills required to code it. I made this using figma. I want to add a section that would incorporate some of my side projects such as client work, illustration work, etc…

Now that I look at the home page I think I would change the profile picture and change it with an illustration as it will be a fun way to introduce myself and showcase my illustration skills.

This is my initial draft for my profile illustration

I really liked the hair detail hanging outside of the circular confine.

I was not able to figure out how to add it in a size appropriate manor to my website so I was not able to include it. I will continue to work on this in my spare time.

I attempted to make a harder website but I could not figure out how to fix the code – It was a mess

I really liked the title area of the website, I would have liked to keep this but I could not do this in the time allowed.

My biggest hurdles were time and my lack of coding skills because of this I had to change tactics and try to simplify my website, this is how that went.

My initial sketches

I decided to keep brainstorming my website, here are some of my preliminary sketches .

I wanted to give my website a soft and delicate look so I tried out all the colours to figure out which I liked the best.


I would prefer if my website had multiple pages linked to it, like for example when you click on one of my projects it takes you to a separate page to explain in detail the process and show my sketches.

Click here to see my website.

Beyond the brand – Week 10

Personal brand, Portfolio website and research blog – These deliverables should demonstrate your understanding of the subject matter covered each week.


This should all be reflected in my work!!!!!!

  • Week 1: Language – values, tone of voice, bios, stories and strategies. This should always be the starting point when creating a brand.
  • Week 2: Monograms – Examples, case studies, requirements, Axes ( how to balance the letters) and sketching.
  • Week 3: Typography – Choosing and using type, Kerning, Anatomy.
  • Week 4: Visual identity – design programme, pictorial and abstract drawing.
  • Week 5: Colour – Colour systems, phycology, culture and meanings.
  • Week 6: Application – Business card, touchpoints, animation.
  • Week 7: Brand guidelines – Guideline documents, considerations and rules.
  • Week 8: Style guides – style guides, pattern libraries, element collage.
  • Week 9: Portfolio website – planning, inspiration, standards, wireframes, Osborne checklist.

Research blogs:

Needs to be updated more often, loads of content missing. Put the time in! Maintain it. if you don’t it will slip. Take an hour a day and post !!!!

  1. Lecture summaries – Class notes.
  2. Independent research (literature reviews, blogs and articles) be critical of your sources. Make sure articles are from a reputable website. Lean more towards book – they are credible.
  3. Backup and development work – paper sketching, you need to draw as much as you digitalise!!! Include all developmental work.
  4. Self-reflection – weekly summaries of what you have learned.
  5. Assigned tasks – progress and final outcome and reflection.


  • Designing brand identity by Alina Wheeler
  • The future beyond brands lovemarks by Kevin Roberts

“The word ‘brand’ is overused, sterile and unimaginative” – Michael Eisner, Disney

To me this maybe suggests that branding needs a bit of a shake up, we are over saturated in them. We are bombarded with branding – it’s everywhere, even in our homes. Has it just become a way to compete instead of creating a meaningful interaction? Does brand now equal boring?


Brands are all about values. You need to believe in something and you need to explain why you believe in it ( they might get on board because of this, if you don’t believe in it, why should the audience?) This enables you to form an emotional connection with your audience.

What are the functional benefits? without this you have nothing. Emotional benefits – what makes it better than the competitors?. Is it self expressive? If done correctly the customer will not only believe in the brand but they will feel like the brand expresses them as well. It allows the audience a way to be self expressive with the brands products.

“Consumers who make decisions based purely on facts represent a very small minority, yet, even for these people, there is always some product or service they buy based on impulse or emotion.” – Maurice Levy, Publicis.

We tend to make decisions based on emotions not facts, a good designer plays on this. They will create a brand that inspires loyalty beyond reason.

You need to make your brand desirable. How do you make your bio captivating? statement or story? A captivating tale. Frame your thinking process as see in the image bellow.

I need to become an idea person as this is what will make me valuable to customers and employers. Designers are here to sell ideas.  Professional and passionately creative. Passionately creative makes you think that the person thinks, eats and breathes creativity; they cant help but be creative.

A brand that not only creates a great emotional connection and sense of respect will create real, impactful value and that in turn will cause the customer to pay you back with loyalty and love. Don’t just dress the brand up nicely, make it something that will last. If you make an emotional connection with your client, they will not only keep coming back but they will also refer you.

What I stand for matters and this should be reflected in not only my brand but my work.

The Nespresso not only feels stylish but it also states good – its a lifestyle choice in a way. Kenco taskes good but its appearance doe not convey any sort of enthuthiasium

BxP Value proposition map

This is another way of looking at it – values are at the core.

  1. The brand: This is the number one indicator of value for a customer. Users develop emotional connections to brands that far supersede any …
  2. The experience: The experience of the users is key to reinforcing brand perception as it connects your products before it did. It might solve a problem that has not been solved yet or it might address an untapped need in the market. Just be better than everyone else basically. For me this will be the look and functionality of my website.
  3. The product: Ironically this is the last thing a customer will interact with.


“A brand is the set of expectations, memories, stories and relationships that, taken together, account for a consumer’s decision to choose one product…..”

“If you don’t give the market the story to talk about, they’ll define your brand’s story for you.” – David Brier.

Is my bio captivating? or is there room for improvement? Is there a way to make it more exiting? Have my values evolved?


  1. Post examples of 3 businesses you respect and study how they form an emotional relationship with their customers. Instantly I want to use Disney
  2. One step beyond (for 3pm) Design one additional touchpoint for your personal brand. This can be anything at all and the purpose is to promote an emotional response to your brand. Design something that will attract attention. Don’t just slap your logo on a t-shirt.


Animated loge, Animated gif show reel of work for website/social media. A wearable item but make it desirable. Branded merchandise (Look up and Supporting app idea or micro interaction. Desktop/phone/table/Wetransfer background.

IT must be relevant to the brand/service with customers and people in mind.

Look at

Twitter and Brand New (blog) for example. Selling a tweet (NFTs)

My outcome

I started by mind mapping some ideas and exploring my options – I really liked the idea of a tote bag as it will not only help the environment but also give advertisement to my personal brand whilst also not being too in your face.


I think this could be a very cute idea as its very useful, I can never refuse a free bag for life so I think this would be a great marketing scheme for my personal brand. I would do many different colours, it doesn’t have to be the same background colour or even consistent line colour.

I would also like to make a few more with the phrase ”be kind” I think it is a strong and recognisable phrase with a lot of weight to it.

I really liked this, it’s something I would be happy to use..

I want them to be as unisex as possible – something for everyone to be able to enjoy.

I wanted to have something simple and useful; I love shopping and for me a bag for life or a tote bag is a must. I personally can not resist when one is being offered, so I decided to play on this. I used the handle to extent and also represent part of my logo to create a pattern that is interesting and a bit abstract. Ideally they would all be lovely, happy and varied colours. I added the phrase “Be kind” to my last one as it is a message that resonates with me and many other people.

I would like to experiment with notebooks, pens/pencils, Hair clips, “Thank you” cards for customers, water bottles (safe the turtles and stay hydrated), Antibacterial (To avoid Rona)


Great, simple idea, the logo in the bottom is not needed, take it out – other than that, its great.

Here is a link to my Pinterest moodboard

New Ideas:

  • Loading screen animation of my logo
  • Phone case
  • Try animation for portfolio site
  • Wall paper
  • Thank you cards/stickers
  • QR code that takes you to my portfolio website/app?

******** Try to animate your logo so the lines and dots fall and become the logo.


I decided to attempt to animate my name as a way of practicing – I used procreate to animate my name; I could not figure out how to put the animations onto my blog so I put them in a separate Miro board.

Click here to see them.

I was quite pleased with my outcome, my favourite one was the one I created of my name being typed out. I would love to use it in the future.

IXD103 – Portfolio sites – Week 9

Assessment criteria

Demonstrate an understanding of personal brand identity as applied to a portfolio website; it should include a consideration to brand identity through voice and tone, considered content and visual cohesiveness.

Considered content: what needs to be included

S.W.O.T Analysis

Strengths, weaknesses, opportunities and threats. It’s worth doing this when considering undertaking any project yourself. List these things in squares. For opportunities think in regards to the website and for threats think what is in the way of you completing what you want to complete. My main weakness is coding so I could maybe try to code something more ambitious to try to learn, however a threat to that might be that I might not have enough time.

SWOT excise
Miro board link of my S.W.O.T analysis here.

What should I put in the portfolio site?

  • Things you put down as strengths – eg logo, illustrations, icon design

Tips for procrastinators

  • Get someone to check in on you to show them your work – helps hold you accountable
  • Set mini deadlines for yourself
  • The more weaknesses you overcomes the more strengths you will have
  • The more threats you solve the more opportunities you will have

Mission statement

What is the purpose of the project? What problem am I trying to solve? What is my portfolio site for/what will it accomplish?

Create a mission statement before starting to design a website, it will provide a clearer picture. The primary function must be showing my work.

Miro board link

  • Experience building and designing a website
  • To showcase finished and ongoing work – Display my work/strengths
  • To network, present myself in a professional and friendly manner and to give the viewer/client a sense of who I am
  • To create a portfolio for my work
  • To show my work to prospective clients and increase the amount of freelance work I get to do – create a name for myself
  • Networking
  • To create a web presence
  • To show employers who I am and what I can do
  • Gain more exposure
  • Online profile to promote work
  • Generate a level of professionalism
  • Demonstrate skills level in website building
  • Help me get a freelance work/work placement
  • Present my process
  • Develop an online presence
  • Present myself as a brand and promote my brand
  • Contact me more easily
  • Demonstrate my personality through a clear tone of voice
  • Become more recognised
  • Show my creativity
  • Learn how to employ new things with HTML5 and CSS to make a great portfolio
  • Present my process (research or writing – case studies)
  • Make it unique and memorable

My mission statement:

“To create and showcase unique, high quality designs in a professional manner to help other people achieve their goals and promote my skills”

Priorities for my website


  • Online profile promotes work
  • Allows clients to contact more easily
  • Displays my work well


  • To build a reputation for my brand
  • Gain more exposure
  • Present my process (research or writing – case studies)
  • To showcase finished and ongoing work


  • Unique & memorable (has to do its primarily function well before it can be unique and memorable)
  • Generate a level of professionalism
  • Demonstrate my personality through a clear tone of voice

To build a good hierarchy/lists of priorities you have to find what needs to be done for other things to eventually be developed.

The work should be the MOST important thing – the brand is almost secondary to the work.


Look up and research them – evaluate and blog this.

For design – NOT a tone of voice guide

  1. Lucian Slatineanu
  2. Vladimir
  3. Sean Halpin
  4. Rachel Schmitz
  5. Taylor Ward
  6. Steven Mengin
  7. Edward Lim
  8. Kathleen Warner

IMPORTANT —> Don’t start with “hello there” or something similar; its been overdone and we have explored better writing practice at the start of the semester so revisit that. Tone of voice provides an opportunity to be more unique.

For Case studies

  1. SFCD —> They describe the function of their work through animation in detail . They use a large header followed by a short summary – awesome key introduction. Using animation and motion can be difficult – especially for beginners – so use it sparingly. They have also used a multipage site. It is a superb website!
  2. One page love —> try to tackle your own content for your website first, reviewing too many websites can sometimes trip you up. It becomes an overload of information.
  3. Site Inspire —> full of good examples. Immersing yourself in good design work is just as important.

Web standards

  1. Media Queries —> good for reference and insight in to how responsive sites interact.


It doesn’t need to look pretty – it is simply a plan for a web page to work from. Start on paper – its quicker and easier. (Examples bellow)

Start with loads of ideas – start small and fill the boxes, this can help get your flowing. (Examples bellows)

You can even create a key for your interactive elements, that way you can plan in boxes instead of having to spend time drawing.

Then pause and pick the best ones; then repeat the process, drawing the promising ideas out again in higher fidelity and in larger boxes (I could try making them bigger – maybe 4 boxes per A4 page) – an idea should emerge from that.

You can then try making a:

Paper prototype (at actual size)

Digital wireframes

Digital prototype


  • Simplify it for yourself
  • Don’t stick to  your first idea and force it to work – EXPLORE the other options!
  • Make connections through iterations and analysing what’s working/doesn’t work
  • Reject what doesn’t work and go a different direction
  • You won’t know what is your best idea if you haven’t explored all of them
  • Language shapes text. Use real text when putting in placeholder text and not ‘Lorem Ipsum’
  • Start with your current websites from IXD101 – how can these be modified? How does the brand map to it?
  • Idea generation Osborn checklist. Substitute –> Combine –> Adapt –> Modify –> Put to another use –> Eliminate –> Rearrange

Substitute — Different ingredient? Other material/processes/place? Other approach? Other tone of voice? Someone else?

Combine — Combine units, purposes, appeals or ideas? A blend, alloy, or an ensemble?

Adapt — Is there anything else that works like this? What does this tell you? Is the past comparable?

Modify — Give it a new angle? Alter the colour, sound, odour, meaning, motion and shape?

Put to another use — As it is? If modified?

Eliminate and/0r add — Can anything be added? time, frequency, height, length, strength? Can it be duplicated, multiplied or exaggerated? Opposites? Backwards? Reverse roles? Change shoes? Turn tables? Turn other cheek? Transpose ‘+/-‘? Can anything be taken away? Made smaller? Lowered? Shortened? Lightened? Omitted? Broken up?

Rearrange — Swap components? Alter the pattern, sequence or layout? Change pace or schedule? Transpose cause & effect?

Here is a link to a Miro board template

“It is easier to tone down a wild idea than to think up a new one” – Alex Osborn

  • Be ambitious
  • Explore options and opportunities
  • Consider web standards

To do

  1. Read and blog the article by Adham Dannaway.
  2. Read and blog article by Dustin Senos
  3. Content planning – element collage from last week will help for interactive/design elements. Consider the formatting and placement of elements. What projects should I include? In what order? Text to include? Informative/for tone/bio? Contact details? Any additional details/links? What content/Imagery?  —–> what do I need to say and how am I going to say it? Is information better as text or diagram? Will it be text/hero/image lead? What is my first impression going to be? Will it be a single page or multiple page website?

DEDLINE 07/05/21 at 11am


  1. Bio & Brand Dictionary
  2. Monogram
  3. Wordmark
  4. Visual Marque
  5. Brand Guidelines
  6. Website Design
  7. Website Build
  8. Research blogs

Here is the link to my Gantt Chart – I created this to try and help keep myself organised and on track.

IXD103 – Style guides – Week 8

Now the style guides have to be more extensive as they have to not only cover print but also digital products/aesthetics.

Style guide

Physical or digital document that represents the styles, patterns, practices, and principles of a design system and teaches how to use it. They encompass a company’s branding guidelines, including logo usage, designated colour palette, typography, etc. You should update your brand guidelines to include digital outputs. Pattern libraries are a detailed subset of the overall style guide.

Good examples

Things to consider

  • Establish a table of contents
  • Break info in to manageable chunks
  • Use plain English and explain things clearly

Modern Tools that help

  • Style Tiles are a design deliverable consisting of fonts, colours and interface elements that communicate the essence of a visual brand for the web. It offers a template to work and design around.

  • Element Collage, an alternative tool by Dan Mall. Mall uses it as triggers for client conversations; it starts a free form conversation to gauge a better direction to go in for the client. It can help clear up the brand direction. The only problem with a vertical element collage is that it can look like a webpage you’ve built, so horizontal is a better format for us.
  •  Interface inventory; taking stock and categorizing the components making up a website. The fewer buttons you have in a website the better the design as it ensures better consistency for the interface.

Managing code

HTML, CSS and JS, building a guide we can use to ensure everything’s consistent. Some elements within your style guides will have definable CSS properties such as colours, type and layout, etc.

Pattern library

An organised set of related, reusable components, often containing code examples, design guidelines and use cases. It 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 it’s a collection of design components that appear multiple times on a site, such as: navigation, slideshows, social media features, news listings, related links, carousels and more. It documents all these ‘patterns’ (also known as components) and defines how they behave, what they look like and how they are coded.

Good examples


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


01 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. For more information follow this link.

02 Element Collage

Create an element collage for your personal brand in anticipation of designing or styling your portfolio website. For more information follow this link.

03 Update your research blogs

Make sure your research blogs are up to date and organised. Daniel will be reviewing these and providing feedback prior to the Easter break.

What should be included

Weekly summaries 

  • Lecture content
  • What you’ve learned
  • Reflection on tasks
  • Analysis of books and sources you’ve looked at


  • Writing and values
  • Monograms
  • Typography
  • Wordmarks
  • Colour
  • Visual Marques
  • Brand guidelines

Practical Work

  • All weekly tasks
  • Pizzeria brand
  • Business cards
  • Example brand guidelines
  • Interface inventory
  • Element Collage
  • All development work, sketches and iterations

04 Portfolio site

Portfolio site design and mapping your style guides on to a site. You MUST at least have a skeleton of a site to work on next week.

Brand progress review

Long Bio

Hello, my name is Emily Ussher. I am a first year Interaction design student at Ulster university Belfast. I am originally from Venezuela; I found my love of art when I moved to Northern Ireland at 13 as it gave me a communication tool that I did not have at the time. I love to travel and create art. My multi-cultural upbringing has offered me a different perspective and point of view – something that is always evident in my designs.

Short Bio

Just another Venezuelan/Irish self-appointed explorer, studying Interaction Design and doing what she loves

Tone of voice

  • Friendly
  • Professional
  • Creative
  • Comprehensive
  • Caring

Word bank

  • Dedicated
  • Diverse
  • Bilingual
  • Friendly
  • Professional
  • Original
  • Innovative
  • Unique
  • Well designed
  • Multicultural
  • Happy
  • Creative
  • Quirky
  • Diferrent

Brand values

My brand values will be to create high quality, well designed products centred around the customers need. To provide a unique, welcoming and fun experience to the customer and produce products of the highest quality.

Logo design

I decided to keep it simple and uncomplicated, the font I used for my name is FS Alvar in bold.

As part of my professional yet quirky brand I decided that it would fit best if I added colour to only the dot and maintained the rest black.

When turned upside down the logo reminds me of an elephant, I will try to play around with this concept and maybe turn it into a mascot or even create a series of illustrations in the same style.


  • C2CDEB



IXD103 – Application – Week 6

Exploring identity

Your brand is gateway to your true work, it will attract people who want the promise of your brand – which you deliver

-David Buck

What can I apply to my brand?

Think outside the box

What do I need, how would I introduce myself?

  • Social media/ online presence – CONSITENCY
  • Business cards – ESSENTIAL – they leave a lasting impression and are a must have for networking
  • Advertisement banners
  • Ads in newspapers
  • Website
  • Email signature
  • Packaging
  • Portfolio
  • Studio – could be interior décor. Office design ( eg monogram into a desk?
  • Corporate gifts
  • Apparel ( take it with you were you go eg phone case, tote bag, shirt. Become a walking ambassador for your brand)
  • Video Idents (signing off prototypes, videos and motion graphics)
  • Merchandise (stickers, phone case, laptop cover)
  • Literature (leaflets, pamphlets, etc)
  • Prototypes/presentations
  • Sponsorships
  • Blimps LOL
  • Headed paper (eg for letter or invoices)
  • Envelopes/Mailers (a good way to make an impact when sending CVs to employees)
  • Postcards (again good CV idea)
  • Stationary (they draw attention, provide more points of recognition)
  • Funding opportunities (using your brand to show professionalism and confidence when applying for funding for your digital products or start-ups) The more real you make something feel, the more willing/confident they will feel to invest. Solid mock-ups and prototypes are important.


Design your own business card, use your wordmark, typeface choice and monogram or symbol to design a business card. It must be 85x55mm. Consider both sides of the card.

Can use different paper types or colours and use a stamp to put in your details? paper finish


rugby printer

digit printing (Belfast)

  • Look for examples of good business cards

Deadline 08/02/21

  1. Backup work on blog
  2. Monogram, wordmark
  3. colours
  4. Research
  5. Sketches
  6. Business card
  7. Artist research

—– It will be in the form of group critiques —–

Book a tutorial for Thursday if needed.