Web Design – Research

Produce portfolio in web format in 5 or 6 pages.
Research, Development, Evidence, Pre-production, production, post-production.

Screen Shot 2018-01-04 at 12.29.55.png

Research 6 existing websites, note good and bad design, use screenshots, annotate\

The Good
Celine Kim’s Personal Portfolio Website


Screen Shot 2018-01-04 at 10.38.41.png

This Portfolio is very minimalist, keeping the only text to the left side of the page. All the text acts as links to other pages, none of the text is wasted on descriptions and about’s and is kept focused solely on the persons work.

The images of their work are kept the largest parts of the page, showing their importance and drawing attention to them naturally.

The use of a light grey as the main background colour is very appealing, it’s formal and professional because of it’s close relation to white but as a result of being darkened grey it’s less bright and as such more easy on the eyes as well as more interesting to look at as it’s not just plain white.

The use of a darker, off black, grey for the text is also appealing as it contrasts the light grey but isn’t as solid and dark as pure black, which could be distracting from the pictures.



Screen Shot 2018-01-04 at 10.45.14.png

Merijinhos Personal Portfolio

Screen Shot 2018-01-04 at 11.02.40.png

Screen Shot 2018-01-04 at 12.46.34.png

The Bad

Screen Shot 2018-01-04 at 13.10.18.png

Screen Shot 2018-01-04 at 13.08.35.png

Screen Shot 2018-01-04 at 13.09.11.png

Screen Shot 2018-01-04 at 13.08.18.pngScreen Shot 2018-01-04 at 12.58.01.png






App Logo Designs

Lotus Logo.pngGrass Logo.png

Above are two logo designs I finalized in Adobe Illustrator for my app, I used three basic circles varying in different sizes, this was to help me create the simple yet memorable and stylish logo I wanted because as a result of being made of circles the logo has a smooth shape with a very clear outline, as well as being able to be made smaller or large while still keeping its shape and still being clearly connected to my app.

The logo I finally decided on was the top one, which is the pink lotus, this was because the pink would stand out much more against a green background which is what I ideally want my app to have as it’s main colour in comparison to the light green blades of grass, I do like the gras but it seems a bit too simple and almost incomplete, in hindsight I feel that logo would have looked better if it had something at the bottom to make it seem less empty and unfinished but even just in their shapes I prefer the lotus, being a flower, the top logo invokes a much softer and friendlier vibe than the blades of grass which, with their sharper points could give off a less friendly vibe in comparison to the soft and smooth edges of the flower.

In some ways I feel the colour of the lotus logo might be a bit problematic as a result of being a light pink becuase this may alienate the male demographic, however given that the rest of the app will be a variety of greens ideally I feel that it will even out, and since my target audience leans mroe towards women than men that doesn’t seem to much of a problem for me.

Game Concepts Progress

background idea.pngThis was a concept version of my background, I originally wa\nted a pretty gradient for my background and in some ways I’m kind of sad I decided not to go with it, but I found that normal day sky would be more easier for people to see through and not be too distracting while playing.


platform sprites.png

Here are the basic platforms I would use in the game, they look very similar cause they were made using the same components, which can be split into grass, rock and highlighted bits.

dfdsf (1)-sdfgsf.png

Here is the original sketch I made outlining the background idea I had, sadly a lot of the details had to be taken out becuase of time restraints

dfdsf (1)-Recovered.png

Here are the planets I made to be put into the background, they took quite a while to complete as I had to hand make the circle as photoshop had no seeable way to make a pixel circle that looked the way I wanted.


This was one of the original compeltedbackgrounds I had ready, however I didn’t like how empty the bottom of the screen seemed and also realized I’d sadly not be able to use the windmill I created


Here is the completed final version of the background which can be seen in the game, in summary I’m pretty happy with the way it came out, even though a lot had to be cut for time reasons. It perfectly fits the pixel art style I was going for and is large enough to work as the bbackground I need


Game Design Evaluation


In evaluation, I think my game turned out pretty well, I feel I put a lot of thought into the concepts for the game as well as try to actually program the game.

I think my concept art was much better than the actual game though, the concept art I created used numerous materials such as paint and pencils and went through a lot of designing different aspects of the game from backgrounds to characters, this helped to make actually creating assets much easier than if I hadn’t put the effort in.

Ever since the beginning of the project I knew I wanted to make the game in a pixel art style and I’m glad I did as it turned out a very nice and styalized look to my game, I personally think Gadget, the characters, sprites were my best work, with the movement being very authentic to what most modern pixel games do with their characters sprite sheets.

The running cycle was quite difficult to do, and since I wasn’t happy with the first version I created I ended up creating a second one in a different style, same goes for idle animations. In hindsight while this did turn out an overall better animation it took up a lot of time and I feel it would have been better to find a more time effective way to do what I wanted.

I don’t think my actual game was as good as the oncepts becuase it was extremely hard to learn how to program anything for it, I would have liked to have longer to learn how to use unreal and then apply that so the game seemed more put completed. Another thing I would have liked to change is that while I like how my character moves in the game the idle sprite for some reason began moving up and down in a way I didn’t want so the character appeared to go off the ground for a few seconds, the solution I came up with was to put their feet into the ground so it wasn’t as obvious but this sadly caused the problem of the sprites feet being in the ground rather than on it, if I’d had more time I would have liked to learn how to fix that issue.

I really enjoyed making the background and feel it was very effective at appearing as a wide open sky as I wished, however, much like the new animations, it took a long time to complete and I wasn’t able to put as much detail into it as I would have liked and change a couple of things I got from others criticisms, like how the background land looked too much like the platforms, I could have fixed this issue by making the land a pale blue version of it’s original colour scheme and if we were to come back to these projects I would definetly do that first.

To some extent I feel I shouldn’t have implemented the health or coin collecting huds since the system for them wasn’t properly built as I ran out of time, however I’m fairly proud of the programming I did for the health bar system so I decided to keep it in as evidence of what I would have like dto go on to next if we had mroe time for the project.

In comparison to an offical game, Owl Boy, which I took a large amount of inspiration from, I think in terms of art I did fairly well, having easy to see and very appealing and cute looking sprites for the character which I purposefully made to be reminiscent of retro pixel games., however in terms of actual gameplay Owl Boy is much better as it has a well programmed health, collecting and enemy sytem that I wasn’t able to.


App Evaluation

In evaluating, I feel my app was good in terms of design but in terms of use it leaves a bit to be desired.

My app was made to be a gardening app, offering the user a journal, a weather forecast and a list of information on different plants and animals that can be seen.

Starting with what I found to be positive, my use of colours was pretty good in my opinion, after a lot of experimenting with different colour combinations to try and find the correct tone I ended up decidng on sticking to different shades of green, this had much nicer results as the colours were more complimentary and not garish and ugly.

I had attempted to use purples as a contrasting colour to the greens but found it too much and also a generally ugly colour to use against green.

I decided on using green as the main colour originally because green is commonly used to represent life and plants which are thoughts that I wish to promote with my app as it will link into my apps function as a gardening app.

I also liked the design ideas behind a lot of my app screens, I found my plant list page to be pretty nice, using only basic colours with the lightest green around the letters and plants to higlight their importance on the page


I also feel this page shows a good mix of used space against blank space, everything is fit on the screen but there is quite a lot of room around everything so it can be understood easily

Something I enjoyed was how I used yellow and light pink only for the logo and icon for the infortmation page, not only did those colours look very pretty with a high contrast against the dark green but also because of this contrast stood out a lot, bringing the users eye to it naturally and subsequentially would be noticed and used more than if it was a complimentary colour like the other shades of green.

In hindsight I would have liked to use more of a variety of fonts instead of just one, while I liked the one I used and found it very appealing with it’s almost handwritten style, adding to the theme of a simple gardening app, it can be hard to decipher at smaller sizes of text.

Another thing I dislike is that for some pages I didn’t know how to properly balance out the blank space to the used space, I wanted to have a lot of blank space to creat a stylistic idea but some spaces were too empty in my opinion, such as the home page , I would have liked to put somthing at the bottom but wasn’t sure what to put, I tried to make the icons bigger but found that ruined the eprfect square shape the icons had and made it apperae stretched, if I could redo anything for this app I would definetly move the apps down a bit so there’s an equal amount of space between the top and bottom of the page rather than just a large blank space at the bottom.

In conclusion I find the app well put together and in terms of colour use very nice to look at and appealing but I also feel there was a lot I could have done to improve such as get rid of some of the extra blank space.