Another mockup from 99designs. This layout consist of a few intricate design elements, with the logos changing on mouseover.
This was done after a long time of rest. After I entered, my development process have not progressed far. This particular mockup took abit longer to complete, around 3 to 4 hours for this piece of work, but it turned out to look very good indeed.
Original design:
Other design from 99designs. This is particularly modern, using a simple color scheme of only a few colors, relying on the subtle changes on the grayscale to distinguish the different sections of the design.
There are many subtle designs in this one, but there are some elements that are fairly hard to extract (the background for the display). There is not much differences in there overall, check out the the completed mockup here.
Original design::
I plan to extend the design projects into a long term project where I will be working on different designs on and off. As such, I have created a landing page of sort, where I showcase my finished designs.
If you have any projects or know of anyone requiring such websites made, do feel free to contact at ongspxm@gmail.com
Do note: These are not actual workable websites, and are just simple implementation of the designs serve to showcase or hone my skill in frontend work. These mockups are not complete in anyway and act only as a gauge of what is possible. If you find any functions faulty in any of these mockups, it is not because I have no idea how to implement the feature, but rather, it is not essential to have them, because they are not a substantial part of the design.
This is a relatively simple design that comes with a complex centerpiece. It could have been extracted as an image, but implementing it with a css structure really pushes my knowledge of website structures, challenging me to structure complex design elements.
This mockup, unlike the others was done in multiple sittings, not a continuous effort. This may have affected the total time spent on the project.
Up till now, I have yet to work on many responsive design layouts. So, perhaps my next project would be a mobile layout, where responsive design is more relevant in that context.
Original design:
The next design (also from 99designs) I have chosen is a relatively more complex one. The center piece of the design is rather complicated in structure, especially with its detailed background with multiple colors and layers, of different size and pattern. As such, the graphics extraction process took a relatively long time, the bulk of it spent on separate the different figures from the intricate background.
To shorten the completion time, I would have went for the more straight forward method of merely combining the background with the paragrapoh. However, my current implementation will make it much easier to alter the content, therefore makes a more future-proof design.
This design utilized a large amount of graphics and icons. The designer really did a great job with the graphics usage on this one. The color scheme was simple, but the effect was brilliant. For the icons, I switched to FontAwesome from Entypo, taking advantage of its extensive icon collection to simplify the webpage structure.
This is one of the more complex mockup that I have undertaken, but the result was satisfying. I would be moving on to more complex design in the future, with the occasional inclusion of mobile design too.
Original design:
Yet another design from 99designs. This time, I chose a design that has a rather large amount of graphics, in turn, I spent a very long time extracting the graphics and icons.
And speed up the process for this mockup, I used the Entypo font, which provides developer with a huge variety of icons to use for their website. This is the first few times I am trying this out, therefore, there wouldn’t be much of it. When I am more familiar with the icons available, perhaps I will use it more extensively.
In this mockup, I used fast.js to complete the tab toggling. It made the code much much shorter, and more intuitive. If there are more responsive design required in the future, it will surely be part of my toolkit from now on.
(A bit on fast.js) It is a simple framework that I have written for javascript. After spending so many hours typing standard javascript code over and over again, I have decided to create some standard functions to extend the language, making it easier to get stuff done. I will be writing more about it some time soon.
There is the completed mockup, Although the design is fairly close the the original (except for the footer overlay, which I couldn’t bother extracting, because removing the texts from the graphic will take too much time), the content for all the links may not really make any sense, because I have no idea what they originally meant, so I replace them with more rubbish of my own.
Original design:
The design that I have chosen this time was a relatively simple design. However in the design, there are many small intricate details that made it quite bothersome to implement the mockup.
The mockup of the design is quite close to the original design, there are some details that are left out, such as the different arrow designs and placements.
A new technique I used for this mockup is the use of CSS sprites. Due to the sheer amount of icons to copy over, I decided to make use of sprites to make the site load faster. I completed this mockup in around 5 hours, but a lot of those time is spent on trouble shooting CSS error, which arose due to the sheer numbers of classes and ids in the mockup. Note to self: Use detailed naming schemes for complex designs.
Original Design:
99designs is a platform for out sourcing designing work. Different designers submit their designs and then a best design is chosen as the winner.
The design that I have chose to work on is a rather modern design for a web application that provides healthy meal plans.
The mockup was completed in around 4 to 5 hours, there are some difficulty in producing the design, seeing as to how some of the design elements require very tedious styling. For the recipes, I used an interesting structure to overlay the information, which I thought was a pretty novel.
The mockup is not exactly the same, I have changed some aspects, but most of it still stay true to the original design by Dmitrij.
Original design:
Development 