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 view. It 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 view. This 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.