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.

 

Essay

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.

zczud3j

Figure 1 – Mac Pro

w4xlspp

Figure 2 – External Ports

npzh2no

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.

4w0dxuo

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.

Navigation

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

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

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.

4mb90f9

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.

vjdhikc

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.

mkkobmm

Shot

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:

tkkcbg9

Current

h56kswm

New

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.

Ideas

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

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.

Likes

  • Simplistic top navigation

Dislikes

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

hpsuyal

Design Shots – Dribbble Client

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

Likes

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

Dislikes

  • 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.

rp4fqwm

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.

 

LDktalh.png

Shots

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.

 nklppwg

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.

fuzqvur

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.

lajrlk4

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.

 erorqgz

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.

 

Evaluation

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:

colour-scheme

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

new-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.