Feedback needed on webpage Layout and Formatting

I am currently creating a website for my design work and have made a presentation for one product.
I am just wondering if the layout and storytelling for the product makes sense?
I would appreciate any feedback before I transfer all my work into a similar layout/format as per your suggestions.

I drew inspiration from the following sites, I love the way these guys tell the story and cleanly present their products:
Julius Tarng -
Andrew Kim -
Rene Lee -


First, and I might be alone and old school on this one but kill the scroll for a million moments to get anywhere. Tell the story in just one clean one page load. Sitting there waiting and lets be real not every where has a t5 line, kills us. Download a great free tool called Adobe Muse it’s a lot like Indesign and will make creating something more complex with out the hours of coding. I also would love to come to your site and see you or something the inspired this and then navigate to another page to get the goods. So make a tab to “work” or name each project on the menu tab. A site is a lot like a resume keep it to a page quick look read then the second and third read. Give a hierarchy to your page. Right now I get lost about half way done look to see what and why I’m going any farther.

There are a lot of little things that you will learn about dropping opacity of cirlces to show off the product. The use of humans should be limited and try and not to use direct eye line as we will focus on them as we are apes. Apes look at the eyes for a threat, simply human factor.

On the glam shot (first image) I would do more of a three point perspective looking at the cooler sections you created. Sell the idea with one awesome image and the rest of you research will slam dunk it. Dont show a weak image and then sell us the process, its like a cake in the window, we want it as its pretty and perfect, and that is has 6 amazing layers is just that much better but not what got me to come into the pastry shop. The text on the page should try and match those in the images and not all cap.

Looks good though and I like the work. Hope that helps and keep a nice voice when reading this as I’m not trying to be mean or anything. Its a good start.

Thanks for the feedback and advice. Much of what you have said makes a lot of sense.

I agree, I was trying to have one flowing progressive page for each product but once I launched the page I realised the images were too large and taking too long to load. I will need to fix this.

I used Dreamweaver to create the webpage and made images to drop into it using Indesign. I had a quick look at Muse and it seems like a great program, so I will give it a try.
At this stage I was just trying to develop a layout for the product pages which I could use for my other designs, but perhaps I need to create the home/about me/contact/portfolio sections now so that the site makes a bit more sense.

Are you referring to the created Persona’s? Perhaps an image of them not looking at the camera would be more appropriate?

I was trying to use a context image to immediately place the product, but maybe an image that was closer and revealed more details would work better?

You nailed what I was saying. On the glam, its a great shot and it fits well it just doesnt show the greatest aspects of your work and design. Oh and the linear thing you see a lot is do to the fact that all these guys are using templates for blogs and not really coding and moving things around as much as changing graphics to a blogger template. Seen one blog you’ve seen them all.

Hi Paris, just a quick observation

The drill image becomes lost in the context picture, maybe remove it or place it somewhere else, + make the arrow larger

One thing to help page load: Photoshop export Save as Web > JPEG 80 quality. Sometimes 70 (just visually inspect the preview). Then you can go to and batch upload your images for extra compression. Usually the PS Save as Web works too.

I have been playing around with Muse the past few days and have come up with a few ideas for initially presenting the products more clearly. I have also thought of some ways to split the content into sections so people can dig deeper into the content if they wish, instead of having to scroll through all the information.

Yea cheers Andrew. I am going to re-frame the problem definition with some new graphics and try to make it clearer, I think the blue and size of arrow is difficult to see. Good to get the perspective of someone who has previously done the same studio project.

Thanks Tarngerine, as I mentioned in my first post I drew a lot of inspiration from the project layouts on your site. I will try the image compression when I am rebuilding the site.

Paris, I think you were wise to select Julius, Rene and Andrew as benchmark portfolios. Andrew and Rene were both past interns with us here at frog’s SF studio, and I have always been a supporter of Juliuses work.

The Hexo project is very nice. I truest stands out from other hand drills and fits more with the small electric appliances found in an apartment. I’d like to see you design a complete line of home tools meant to be in the kitchen. The weakes part of the project is the sketch phase. These sketches lack the poetry and finesse of the final design. You need to loosen your sketch style.

The site itself is somewhat difficult. I don’t mind the blog scroll, but give me a landing page and a menu. It was hard to know if I was seeing everything. Andrew Kim’s site also suffers from this. To see all of the work on his site you have to find this link which is burried: