Major Project Proposal

| Concept

The overall concept for the project is to create a website similar to, which currently has no major competitors, however my idea is something different to what currently is, in the fact that it is less of a user-based website, and is more of a website for real DJ’s or concerts, with a community of users all around the world.

I plan on creating my project as a concept only for now, due to the number of things that I am going to need to create to incorporate, such as animations, character illustrations and learn throughout the project.

However, the main focus for the websites is for companies to be able to stream or create online versions of concerts for users all around the world. This can incorporate free or paid concerts, each having different features. For example, an online concert could allow free access to users that sign up to the website, or they could charge £5 for each user to join in with the concert.

The concert page will then have a unique stage design for each concert with visual effects, and a community such as a place for users to chat, show off their characters, and unlock new features by getting involved with the community.

| Ideas

This section will cover the ideas that I have for the project, and how I plan on using them within my final project.


Each concert should have a different stage to make them all unique, therefore there will be a different design for each concert’s stage, which I will be illustrating examples for to include in my final project. These would be provided by the people running the concerts, and would be fully customisable by those people.


Characters are little avatars that would be available for users of the website. They would then have customisable items available, such as t-shirts and other accessories. These could either be earned like achievements would, or be purchasable by the users. Other customisable aspects such as dances, etc. to make each character stand out from the crowd on the concerts could be added also.


Achievements can be achieved by doing certain things on the website, such as attending a certain number of concerts, collecting items for your character, etc. By having achievements available, there may be more incentive for users to use certain features on the website, or attend certain concerts that they may not have otherwise. These achievements could also be used to unlock exclusive items for characters, etc.

Splash Page

The splash page is what the users will see before they sign up to the website, therefore it is important that this is designed to show off everything that the website can do, and give the visitors an incentive to become a user, as it would not be possible to use many of the features without becoming a user on the website, such as customisable characters, etc.

Social Features

Concerts are usually quite social places, therefore to give off the real experience that concerts give, it is important that the website includes some social features also, therefore I will be coming up with different social features to implement to give off the social feeling of being at a concert, and make the user’s experience a lot better than it would be without them.

Stage Builder

The stage builder is another idea that I had that could be implemented as a future consideration, due to the amount of work that would need to go in to it, but a small concept of what it would be could be created as part of this project. Basically, it would be a way for people to create a stage by dragging and dropping elements into certain places on a page, thus creating their own unique stage every single time.

| Goals

The main goal for the website is for promoters and artists to be able to play their music online to their fans all around the world, without being limited to a single stadium with a user limit, therefore any artist from people such as up and comers, to the biggest artists in the world could create a concert on the website, and stream their music to their fans and interact with their own unique online concert, featuring their own choices of music, stage design, digital lighting and more. The website is mainly a way to help up-and-coming artists and DJ’s get more noticed by creating concerts and having achievements or other things alike, such as customisation items exclusive to users that attend their concerts, therefore there is a reason for the users to attend concerts of artists that they may have never heard of before.

Another one of the main goals for the website is to have features to keep the website fresh and new, by releasing new characters, customisation options and achievements every-so-often, so no-one ever has everything there is to get on the website, and the only reason for them to use the website becomes to join concerts that they want to, as this may draw them away from the concerts that up-and-coming artists are starting, and just to artists that are already popular concerts.

| Plan of Action

My first plan of action is to complete all of the research needed, and find out exactly what would be possible on the web when it comes to creating online concerts, such as how animations and customisable characters would be implemented if the website was to actually be created, I will then go on to doing all of the other research into things such as similar websites, inspiration, colour schemes, logo ideas & more.

Once I have passed the research phase, I will then begin creating my initial ideas, coming up with a design for the websites logo, coming up with some example characters and stages to use and familiarising myself with the software that I am going to be using to create these things (Adobe illustrator).

Once I have some final designs for the characters, logo and stages I will then go on to creating the initial design for the website, coming up with new ideas along the way and trying to keep the user experience as good as it possibly can be, using my findings from the research that I have done.

Finally, once my concept is complete, I will begin creating animations, and examples of the concept in Adobe After Effects, where I will hopefully use my knowledge from last year, and learn some new animation methods to improve my final concept of the website that I plan on creating.

Once all of this is complete, I will research into how the website could be marketed, SEO, how things could be possibly implemented, getting feedback from people that may use the website in the future, if it was to come to the market. I will also create other things, such as business cards for the website, as if the website was actually being launched.

Final Evaluation

Throughout this project, I feel as though I have learned a lot, especially when it comes to animation, as I have been learning and using it throughout the entirety of my project. I feel as though if I now needed to in the future, I could create an animation for a user interface, or anything alike.

If I was to do this project again, there are a few things that I would change, however, which I have covered in my future considerations post. These consist of:

  • Creating more meaningful animations
  • Adding quick-access icons to the design
  • Figuring out a way to implement a comment system into the website
  • Revamp the intro page

I am however happy with the final outcome of the design, and would like to take on something like this again in the future, with more animated aspects, to challenge myself even more with After Effects.



Personal computers have always been changing and developing further on a daily basis by improving in performance as well as in their physical forms, by getting lighter and thinner thus becoming more portable, for example, the ever-growing popularity of tablets, and the increasing performance that companies like Apple are developing, such as the new iPad pro (tablet), which is faster performance wise than their new 2016 Macbook (laptop). This essay will be covering the development of personal computers, and how they could potentially change as we move further into the future, and come to the conclusion on if the future of computing really is in tablets, or if it is elsewhere.

The future of personal computers is currently looking like it is going in a good direction, with Nvidia’s announcement of their new graphics card which has twice the performance specifications as their current top spec card with an even lower price tag than before, this has set up a competitive price for powerful computer components, and could be the start of a decrease in the price of more powerful computers, making it possible for more people to get higher spec computers, and do more with them, such as rendering video faster. This is a good thing, as with the future of the entertainment industry looking as if it is moving towards online also, with the introduction of Netflix, YouTube, and other streaming services alike, as if the future is on these platforms, people that want to get their foot into the entertainment industry may need to be able to create for these platforms, and a more powerful computer will allow them to perform tasks that they would need to do, such as editing their own videos to then upload to one of these platforms, to try and build an audience for themselves.

As for the form factor of PC’s, it doesn’t look like full sized PC towers will be going away anytime soon, with companies such as Nvidia focusing on releasing the more powerful hardware for the larger scale computers first, and then attempting to scale them down to smaller form factors, which is proving hard for them to do, due to the amount of cooling the cards need, which means it is unlikely that we will see these graphics cards in laptops and tablets anytime soon, due to their current form factor and cooling needs, however it is possible that the sheer scale of personal computers will come down, which we have seen quite recently with the release of the Apple Mac Pro, which has extreme PC performance in a very small form factor (figure 1) compared to other computers, this could push other competitors to focus their time into creating smaller form-factor PC’s, and making them available for lower prices, to compete with Apple in this area.

For the companies that are developing and making these devices, they may find it harder as time goes on to get people to update to the newer versions of their devices, unless they are able to make any major breakthrough in technology, mostly due to the price and hassle of switching everything over to a new device, therefore, other companies may find it even harder to convert people over to purchasing their devices from them, rather than a competitor, the same as they may also find it hard to get people to purchase a new device from them, as if someone, for example, has a laptop that they are completely fine with and see no issues with, it is very unlikely that person will go out and purchase the latest device just for the sake of having the newest version.

As for laptops, companies now seem to have their focus set on making them thinner, therefore making them more portable, however, this doesn’t come without sacrifice, which was something that the new Macbook showed upon it’s release, with the removal of all of its USB ports, which were replaced with a single USB-C port, which at the time of release, there were barely any devices that supported USB-C, and there is still a lack of devices that support this port, due to how new it is. This caused controversy, as people that need, or want to use multiple devices with the new MacBook now have to buy an adapter (Figure 2), which just adds an extra item that that person has to purchase, take with them wherever they go, and also adds an extra wire dangling out of the side of the Macbook, which in reality isn’t very convenient.

In conclusion, It is not very likely that any one device is going to become the only ‘future of computing’, but as it currently stands, there are many different devices that are available to purchase, each that has it’s pro’s and con’s, but the pro’s and con’s of each change depending on the task that you are doing, therefore, there is always a device that will be better for any task, it is just about finding the one that is right for the task that you are doing, for example; if your main task is to take notes in a lecture, a laptop or tablet would be great for that, due to their portability, however if you are looking to play games or any other performance-heavy task, it is extremely likely that the best device for you to use will be the tower computer for a very long time. However, with the recent release of two Virtual Reality devices proving to be a success so far, and with Microsoft working on the new Holo Lens (Figure 3), the future of computing could soon be moved away from the laptops, mobile phones and physical screens, and instead moved on to our head, right in front of our eyes, bringing us closer to a virtual world, and further away from reality.


Figure 1 – Mac Pro


Figure 2 – External Ports


Figure 3 – Holo Lens










Concept Document

Dribbble currently doesn’t have an official mobile application, however, it does have a few unofficial applications, which allow the user to browse Dribbble, however, I feel as though the experience could be a lot better, and that is what I am going to try to improve with the concepts that I come up with in this essay. I will be covering the design, as well as a few ideas that I have thought of to improve the overall mobile experience for Dribbble. The reason I am doing this is because it is a website that I use very often, and I feel as though a website as popular as Dribbble should have a mobile app.

The first thing I am going to do is look at Dribbble’s current web-based design, as well as the features and functionality of it, so I can implement it in the concept that I am going to be creating later on in the essay.


First of all, I am going to look at each of the features, and come up with ways as to which they could be implemented into a mobile version.


The navigation is what allows the user to view content on the website. Currently on the main website they have a large amount of navigation options that wouldn’t be required in an app for browsing through designs, such as the meetups, jobs, shops & more, therefore in the app, I plan on removing and changing the navigation drastically.


Shots are the main feature of Dribbble, each upload from a designer consists of the main shot, along with attachments if that designer has a Pro account. The shots are what are displayed in the main gallery. Each shot has its own page, and each invited designer has a page they can upload their own shots too.


GIF’s are short frame animations which Dribbble only recently started supporting, but have become a popular thing on Dribbble, so it is important that I include them in some way, as I won’t be able to include them the way Dribbble currently has them, as they are a hover effect.


Upload a Shot

Upload a shot does what it says on the tin, it allows the user to upload a shot of their page, and display it on the website for everyone to view, like and comment on. As Dribbble allows works in progress, this would be required on the app too, as work-in-progress’ can sometimes be photos of paper wireframes, or other non-screen based works.


Player Card

The “player card” is a designers page, where they can display all of their work. It is important that this is structured properly on the application that I am going to be creating a concept for, as it would allow the user to show their work to people such as clients, or in interviews by using the application on their mobile phone, which would make it much more convenient for them.



The shot page is where the user’s shots live. It includes the title, the shot, the colour scheme and the description of the design, and allows other users to like, share, bucket and rebound the shot.

Colour Scheme

As of right now the Dribbble colour scheme consists of 8 different colours, which they use for different parts of the website. In the concept, I want to cover the browsing experience of Dribbble more in depth, therefore, I will be ‘dumbing down’ the colour scheme to only use their main colours, as shown below:





The reason I have done this is due to the fact the current colour scheme consists of colours that Dribbble uses for the pages that will not be used for the concept I am creating, such as the jobs page.


I have a couple of ideas for features that Dribbble currently does not have, however I feel as though they will improve the browsing experience of Dribbble for both the user and the creator.

Quick Shot

The shot browser is the first idea that I came up with, it would basically show a random shot that someone has uploaded, and then give the user of the app certain options, differing between device.

For a mobile phone, the user would be presented with three options, a next button, a previous button and a like button. The like button would like the shot, which means the creator of that shot is getting feedback more regularly, the next button would skip to the next shot, and the previous button would go back to the previous shot.

This would work similar to a smart watch, however to like, the user would swipe down, up to bucket the shot so they can view it in more depth later on a different device, and swipe left or right to go to the next and previous shot.

This is giving users more of an incentive to press the like button if they like the shot, as by pressing like button, they are still getting the same result as if they press next, however, the creator of that shot has some feedback and knows that person likes their shot.

Seamless View

The seamless view is something that I plan on replacing the current gallery view that Dribbble has with, due to the fact Dribbble’s current gallery has a lot of white space, which I believe would be better not to have on such a small device, as Dribbble is meant to be more of a viewing experience, and having images seamlessly transition next to each other as the user scrolls through the gallery would be less distracting, and more efficient with space on the devices screen.

Looking at other Dribbble Apps

As Dribbble has no official application, I thought I would look at other non-official ones to see what features they have, and try to figure out how and why they have designed their apps in the way that they have, to hopefully help me with creating the concept.


Freeshot is a free Dribbble client, which uses a similar layout to the main website, with a bit of a change in colour scheme. The main problem with this design that stands out to me is the inability to really see any of the shots without clicking on them to view them in full size, which almost makes this page redundant. In my opinion, this page would be a lot better for the user if the shots were a larger size, or laid out differently so each of them were more prominent and easier to view for the user.


  • Simplistic top navigation


  • Layout of shots
  • No way to view shots in full-screen or zoom in on shots


Design Shots – Dribbble Client

Design Shots is a more simplistic app than Freeshot, with the sole purpose of viewing shots from Dribbble.


  • Shots are easy to see without going on to the shots actual page
  • Ability to zoom in on specific parts of shots


  • The app has moved completely away from Dribbble’s colour scheme, which makes it seem like it isn’t a part of Dribbble at all.
  • The design seems rushed and outdated.
  • The blur effect on the navigation does not suit the design at all.


The Designs


Loading & Login

I have kept the loading and login page true to the main colour scheme that Dribbble uses, as it is a colour that most designers would see as being Dribbble’s own colour, with the prominent pink. I have kept this as simplistic as possible, as it should never be a hassle when logging into an app.




For the shots screen, I have kept it as minimalistic as possible, to enhance the viewing experience for the user. This layout allows the user to view these shots on their small screens without any text or icons being in the way of the shots that they are looking at. They could then click on these shots to view it in more detail, which is shown below.


My Shots

For the shots page, I wanted to design it so designers could use it almost as their portable portfolio, therefore I put their logo / avatar at the top of the page, along with their name and location, so it can be verified as them, and then al of their work below, which can each be clicked on to go to the full shot view, shown below.


Shot Viewer

The shot viewer is the full page that a shot is shown on, I have included all of the main features of the main website, besides the comments system on this, the reason for this being that if a designer is showing their work to someone, such as in an interview using the app, they may not want that person to see some of the comments that have been posted on their work, therefore I have not included the comments system on this concept.


Shot Uploader

This is a feature that I found most of the other unofficial applications didn’t have, however, I thought it was a good idea to have, as people like to post their work-in-progress on to Dribbble sometimes, such as wireframes, etc. Or people that create hand drawings may find it more efficient to take a photo of their drawing on their phone, and upload it that way, therefore I have included this feature in the concept. The camera would automatically take a photo the size of a shot so the user doesn’t have to do any post-editing to the photo that they take.


Quick Shot

A quick shot is one of the ideas that I came up with earlier on in the process of creating this concept. It basically allows the user to quickly browse between different shots, by either liking them or pressing the next button. Each time the user does this, they will be taken to another random shot, and after that, it is just rinse-and-repeat.

Apple Watch Concepts

Not Logged In

If the user is not logged into the application on their mobile phone, they will get the “not signed in” screen shown above. The reason for this being that the Apple watch has to be paired with the iPhone anyway, therefore by doing this, it saves the user the hassle of having to log in on the small screen on the Apple Watch.

Quick Shot

The quick shot feature would work similar on the Apple Watch as to how it does on the mobile version, however, the user would drag the shot to the bucket to add it to a view later list, so they can see the shot on a larger device, to the heart to like the shot, or they can swipe to view the next shot.



With this concept, I feel as though I have tried to keep it as similar to the main Dribbble website as possible, but with some changes to improve it for a smaller screen, however now that it has been a week or so since I created the designs, I feel as though I may have missed some features that the app could really use, such as a search bar to allow the user to search for people or specific shots on the app, or some sort of categorisation, so the user can search for specific things such as Web design or illustrations, however I feel as though one of the ideas that I came up with, the quick shot viewer would be a great addition to the main website, as well as to an application if they were ever to create one, as it adds more interactivity to both the website, and gives the user and designer a way to interact with other users of the app.

Future Considerations

In this post, I will go over what I would change if I was to continue this project into the future, or if I was to start again from the beginning.

The first thing I would do would be to make a  few changes to the main intro screen, to make it more eye-catching and colourful, as after looking at it as much as I have over the past couple of months, I have noticed that it is not very eye-catching, therefore I would most likely completely revamp that page.

Another thing I would look at would be a way to implement comments into the website, so users can see other people’s comments, however, this is something that I would have to look a lot further into, and figure out ways to completely block any kind of spam comments, as  well as filtering for specific terms or words.

I would also add quick-access icons, possibly as a extra menu at the top of the page, to allow the user to quickly access specific parts of the creator hub, which would make it a shorter journey for them, as currently they need to go from the page they are currently on to the settings page, which takes them to the main hub, and then they have to select the section of the creator hub they want to get to before they can do anything.

For the animations, I would try to keep them all similar to each other and relevant, however as this was really my first time doing a project like this in After Effects, I feel as though I experimented more with After Effects, and now I have gotten used to it more, I hope to use it more in the future, possibly on a different project, and learn from my mistakes on this one.

Dribbble Colour Scheme

Dribbble’s current colour scheme consists of 8 different colours, however some of these colours are for things that would not be needed on the app, such as for the jobs page, the pro page and others alike. This is what their current colour scheme looks like:


Their current main colour scheme is based on pink, therefore I am going to keep the UI based around a pink colour scheme.


Above is the changes that I have made to the colour scheme. I have made these changes because it would be more simplistic to keep the app solely for Dribbble itself, without the features for searching for jobs, looking at pro discounts, etc. as this would work better for my idea which I will speak about in a later post.