Inspirations for VisCom @inspiration4ken - Tumblr Blog

Web App Showcase - MUSE

Evaluation

What informed and motivated my design decision?

My first initial thought before I started this project was that I wanted to do something that I’m really interested in doing later on, which is UI/UX design. I wanted to create and include my interest in music through an app or a website. I also had a look at an old D&AD brief for Spotify, which coincidentally is a UI/UX design brief. I took inspiration from this brief and structured my own plan for this project

What changes and developments has my project gone through?

I made massive changes here and there, mainly the brief because I kept having different ideas coming to me and I struggled with choosing one key element to focus on for this project. Logo design was also something that I struggled with at the start because I couldn’t find a great design that suits my idea the most.

Did I manage my time well throughout the unit?

I feel that I should have spent less time doing logo designs and focused more on prototyping my web app. I also spent too long on structuring my own brief for this major project. Another thing to mention is that I couldn’t make a mobile version for my app because I didn’t manage my time properly.

How did I respond to feedback?

I missed most of my tutorials due to my poor internet connection, but I made good alterations from a few of my tutors and friends feedback and I felt that I couldn’t have created the outcome that I have now without their feedback.

Are there areas of my design process that need more practice?

I feel that I could learn to use AdobeXD more because there are some occasions where I had to change my ideas because of my lack of experience with the software.

What have I learnt from this unit of study?

I learned to look more into hierarchy within app design and how to lead people through your UI design with ease, although this may be the case, I still have a lot to learn about this topic.

On reflection, are there any improvements that I would make to my final outcome?

As I mentioned previously, I couldn’t work on the mobile version of my app because I didnt manage my time properly during this project’s time period. Although this may be the case, I’m still very happy with my final outcome as well as the experience I had creating it. This experience had also helped look at my work in a different way and thinking more logical with the elements that I’m creating within my design.

Final outcome (Screenshots not in order)

Web app URL: https://xd.adobe.com/view/45c285cf-7d71-4293-8a8b-6aeb126b169f-1091/

UI changes

Home page

I made drastic changes with the whole UI design from the previous initial design I had before. This image shows the home page of my website. This page shows different users share their music to everyone. This layout is heavily inspired by Facebook’s homepage where the main content is shown in the middle of the screen.

Account page

I took inspirations from Instagram to help me create this layout. This page shows the users information, posts, saved posts, music highlights and suggested friends.

Chat page

For this chat layout, I looked more into a much simpler design. This was also inspired from Facebook messenger. The made sure to make this page the simplest and user friendly because this is where my website shines the most. Users will spend most of their time on this page the most, so I made it the least busiest page to look at from a users point of view.

Settings page

The settings page is not something that I will be touching on the most because they work the same as your normal settings page. In design perspective, I made sure to keep it simple and easy to navigate.

Notification overlay

As mentioned previously, the notification window is not something that I will be working on the most because its not the main highlight of the app.

Learning agreement (Alterations)

I intend to design a social platform for music lovers where they have the ease of sharing information to one another. The idea is that I will be creating an external website for music streaming platforms (in this case, Spotify) that lets users share information with ease. This works similarly to most social media that currently exist with different alterations that suits my target audience’s preference. The key feature of this social platform is its chat feature, which allows users share information with a simple drag and drop system. Another feature that this platform provide is that it allows users to create a “stream room” which lets both users or a group of people listen to the same music simultaneously.

Learning Objectives:

1. Show your understanding of contemporary practice and define you own development to support the subject interests.

2. Display research and interpretation of information. Demonstrate your ability to generate various types of design ideas.

3. What knowledge, skills, and abilities do you need to have in order to get the outcome you desire?

Outcomes:

- Interactive prototype or concept walk-through video (website and app)

- Mock ups of websites and apps

- Process book

- Portfolio page

More UI inspiration

This is a really nice layout design that I will be using heavily for inspiration. This layout is very user friendly, straightforward and quite minimalistic, but not too minimal where it gets too boring throughout. I really like the placements of each elements within this interface design, its got some familiarity to it that most people will have seen from most websites out there. The colours that are being used are not too bright where its blinding its users which is nice too look at. The whole design flows through each page which is something that I need to carry on with my own design later on.

Initial UI design

First design went well, but there are a few things that needed to be changed. Firstly, adding a home page which lets users share their music for everyone to see. Next, user icons feels too cramped next to the navigation bar on the side. Finally, changing the navigation bar’s location to a much more familiar place.

Logo designs

Some variations of my final logo designs. I went with the design located at top left in the end.

Logo designs

Some of my early development logo designs

Muse - Logo

“A person or personified force who is the source of inspiration for a creative artist.” The meaning creates a great connection to the purpose of what I will be creating, inspire each other.

I also looked at logo design ideas for my website, and the designs I looked at were music themes.

This next design is a clever mix of both the letter M and a music note.

Iconography

Now looking at iconography online and I found this webpage called “the noun project”. They have all sorts of icon designs for anything that you can find. The art style is almost similar throughout and very minimal making it easy to alter to your liking.

https://thenounproject.com/

Here are some icon designs that are used in Spotify. These designs leans more towards what i’m looking to gain some inspiration from. I really like the boldness of each icons and how simplistic they are.

SONOS

One of my tutors showed me this logo design for SONOS. First thing I find interesting is the illusion of having a still image seem as if its vibrating when scrolling through it. It’s really interesting how they gave it that effect using a bunch of lines with different level of strokes surrounding the word SONOS.

https://qz.com/332162/the-new-sonos-logo-vibrates-like-a-subwoofer/

https://www.sonos.com/en-gb/home

UI re-work

I found a few artist re working the Spotify UI on Behance. This is the first design that I looked at. I really like the album art which blends in within the music list, it creates that smooth transition between two key elements in the design. The second image shows the user profile page. I really like the changes that they made in that page because it shows the users interest a bit more clearer that how it currently is, giving it more of a personalised page.

These screen shots shows a UI re-work for Instagram. The artist mentioned that “a lot of users prefer dark them when its dark around”. I would definitely agree with that statement as it doesn’t strain as much to look at compared to its default light version and due to that reason, I will consider using this design element for my own UI design.

Learning Agreement

I will be designing a music streaming app that work the same as most streaming apps that currently exist, but the main key difference with my music streaming app is the ability for users to communicate with other users allowing them to share music information with ease. My idea is to create a chat feature that lets users drag and drop songs, artists, playlists, etc. and have conversation about what they’re passionate about in music.

Learning Objectives:

1. Show your understanding of contemporary practice and define you own development to support the subject interests.

2. Display research and interpretation of information. Demonstrate your ability to generate various types of design ideas.

3. What knowledge, skills, and abilities do you need to have in order to get the outcome you desire?

Outcomes:

- Interactive prototype or concept walk-through video (website and app)

- Mock ups of websites and apps

- Process book

- Portfolio page

Links for the short animations

20 sec TV spot

https://www.youtube.com/watch?v=4fbAokqUefY

Instagram story assets 1 and 2

https://www.youtube.com/watch?v=MExcMbcJWSM

https://www.youtube.com/watch?v=AZn7zBrFxQs

Self evaluation

What informed and motivated my design decision?

At the start of this brief during the introduction lecture they showed us how to think creatively and always be unexpected. The word unexpected was stuck to me ever since which motivated me to create something that shows a completely random scene and turn it into something with a great meaning. The idea of using your phone in a random and stupid way was an idea given to me by my tutor leading me to think and create a comedic sequence of someone cutting a carrot using their phone.

What changes and developments has my project gone through?

While in a process of animating I gradually start to realise how short a 20 second animation was leading me to delete some of the animations that I had already created from the start. Squeezing all the information that I need to convey was a very difficult task which lead me to change a few of my animation.

Did I manage my time well throughout the unit?

During my animation phase I encountered a technical difficulty where my laptop updated by itself which lead me to lose almost half of the animation that I had already done and I had to rely on the auto save feature that the creative cloud provides. It took some time for me to catch up with all the work that I had lost, but got through it in the end.

How did I respond to feedback?

Although I have missed some of my tutorials, I still used the feedback that I had from the time that I was able to join very effectively. I main thing that I took from that was the idea of using your phone in a weird random way as well as showing the consistency throughout my project which was very important.

Are there areas of my design process that need more practice?

I feel that my knowledge with after effect is still lacking. While watching the final outcome that I had created I kept telling myself that a could I” have some something for this and that”

What have I learnt from this unit of study?

In contrast to my statement before, I have used after effect more than I have ever done before and I feel a lot more comfortable and confident with that software than before.

On reflection, are there any improvements that I would make to my final outcome?

As I have mentioned before I feel that I could have done some bits differently in my animations. 20 seconds was really short and was definitely a challenge to create something that’s informative for people to look at. On the other hand, I feel somewhat successful in achieving the plan that I had from the start. I feel that knowing what I was going to create really early on help me generate and develop my ideas even further, it was just the ability to use after effects that held me back a bit.

Giffgaff digital banners (portrait, landscape, box)

Trending Blogs

Recently Viewed Blogs

Inspirations for VisCom