Design Mockup – WriteInks from 99designs

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.

Advertisements

Design Mockup – GeissDice from 99designs

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:
GeissDice from 99designs

Design Mockup – Etched from 99 designs

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::
Etched by WebBox

Design Mockup – InsuranceSuite from 99designs

This design that I have chosen to implement is a content-based design. This differs significantly from other designs I have implemented, which focused more on graphics and aesthetics.

For the structure, I used a new css3 method for the layout. Flexbox layout greatly simplifies the structure of the layout design, reducing dependencies on pure css organization for the content layout. This could be very helpful, especially in creating mobile web applications.

That said, this flexbox structure certainly helps in content based designs, but for more graphical based design, it wouldn’t really do much difference. Therefore, future usage would have to depend on types of designs that I choose to implement.

The content of the mockup is quite scattered. I tried to implement as many design elements into the mockup as possible. Hence, I had to resort to using hidden links to activate different views (sidebar links toggles the form overlay), mashing up everything to give a complete feel of the design.

Original design:
Insurance Suite by JonSerenity

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

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

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