Another mockup from 99designs. This design has a very simple color scheme, but a rather complex layout which requires abit of planning to integrate and implement. My first project in quite a long time, and it looks like my skills are still rather intact.
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.
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.
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 email@example.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.
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.
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.
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.