user's avatar
Afroshok website
I finally got to the end of the HTML5 layout for my web site. It is completely responsive. 
I designed the "hamburger" menu icon to mimic the actual colours of the main navigation. The UX will be interesting ;-).
This is my home page displayed in a mobile-portrait viewIt has very little going on visually so that the visitor can see what is happening quickly. This page will have a collection of the latest entries on the site. 
It is specifically designed for places where bandwidth is a challenge. 
This is the about page in the mobile-portrait view as well. Apart fo the home page, I wanted a look that is modern and yet has texture to make it "mine" design-wise. Some copy for the site is done like in this static page. I hope you like the art :-). 
This is the blog page. This is the mobile-landscape view
The code page and it is in the tablet-portrait viewThis page now shows the main navigation in full. 
The is the home page again. This time in the tablet-landscape view.
As the device sizes progress, there are some sections of the site that are displayed and the page flow changed. This is the laptop (small-desktop) view.
This is the home page showing the desktop (HD) view.
This is a code article page. I wanted to show what the floating navigation will look like once I am though with the UX for the site. While the page is a screen capture, the floating naviagation is artwork.
Front End Dev Pipeline
My pipe line is Adobe Illustrator for wireframes (when necessary) / mockups. Code development is in Sublime Text and CodeKit. CSS preprocessor - Stylus. Gulp for post processing. All icons in SVG and art in PNG. Images are in JPEG.
There is a lot more detail to this, but this should give a general overview of how I work.
All the images are mine. The some photos are of behind the scenes of "Killer Necklace", a movie by Judy Kibinge.
Afroshok website

Afroshok website

This is the design and layout of the Afroshok website. These are the final browser screen shots of the layout.


Creative Fields

Attribution, Non-commercial, No DerivativesAttribution, Non-commercial, No DerivativesAttribution, Non-commercial, No Derivatives