Design Mockup – SoundStation from 99designs

This latest design I have chosen is a mobile app design. This will be the first of many responsive design that I will be attempting. This is a very fun challenge, having to deal with all the changes in the breakpoint, coming up with the structure to display the different types of layouts.

Working on responsive interfaces is unlike working on a typical web design. With a web design, most of the time is spent on trying to replicate the exact look and feel of the design. But with a responsive design, a huge amount of thought is spent on figuring out the structure of the layout and the scripting required to change or update the layout accordingly. This could be a better practice for me, so you could expect more of these in the future.

Original Design (Click for mockup):
SoundDesign by Nataliia

Advertisements

Design Mockup – Prizle from 99designs

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:
Prezle from AxilSolutions

Javascript framework – Fast.js

After developing web applications for such a long time, there will be some functions and pieces of code that is always use.

Javascript is built to fit the DOM node structure, hence, have rather long functions name corresponding to the different node attributes and methods. This makes coding in javascript a pain in the neck, always having to repeatedly code with the long function calls.

Of course there are frameworks available for production. There is jQuery, Mootools (Just to name a few more popular ones), all great for extensive development.

Fast.js brings another layer to javascript frameworks. Most frameworks try to change the way te scripting is done, making major alterations that vastly changes the code structure of the scripts.

Fast.js, on the other hand, only serves to provide shortcuts to the lengthy and cumbersome javascript functions. This means that code written for fast.js can be easily understood by native javascript development.

The problem with current frameworks is the lack of coherence with the original code structure. This makes it hard for developers to recreate the framework’s code in pure javascript. (Personal opinion)

Fast.js is open source, if anyone is interested in understanding how such a framework is developed, or perhaps want a base framework to improve your web development workflow, here is the bitBucket repository.

To see the Api documentation, visit this page, and to include it into your projects, include this line of code, <script src="http://ongspxm.bitbucket.org/dev/fast.min.js"></scrip>, in the head section of your site, before all the other scripts are loaded.

Design Mockup – Layer7 from 99designs

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:
Layer7 design

Design Mockup – testFieber from 99designs

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:
testFieber.de by FenixoStudio

Design Mockup – weLinkYou from 99designs

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:
Original Design

Design Mockup – iEatFit from 99designs

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:
Design by Dmitrij