Framing Webpages With Wires

FemmeFatale is a creative studio that focuses on art ranging between sophistication and simplicity; they have an absolutely stunning website filled with smooth and elegant animations that transition from page to page. To break down the structure and functionality of their webpage, we create a wireframe, a set of images displaying the functional elements of a webpage. Wireframes can help to visually see media queries or what the page will look like at different screen sizes. To start we create separate wireframes by isolating each link on FemmeFatale’s webpage: home, about, projects, and contact.

The home page is one container div with a nav bar at the top right providing links to other parts of their website, each with a hover pseudo class. The title and “See our projects.” button are separate divs centered with the button having an on hover class also. The dynamic background may be a canvas with another div in front of it each with its own individual animations. An interesting user interaction is that the background changes perspective dependent on your mouse; the faded text also changes from time to time.

On the projects page, it seems to be an infinite scrolling page with the text smoothly transitioning from each project to another. The actual container div extends past the visible boundaries of the browser; this is what creates the effect of scrolling infinitely. With each scroll the background color and center picture shifts slowly. The words seemed to be animated with the transform property, easing out slowly. Clicking on any of the projects underlines it, transferring you to a new page dedicated to that scheme.

FemmeFatale’s about and contact page are very similarly laid out. Both incorporate the “infinite” scrolling effect seen throughout other elements of the website. There are divs floated next to each other including both a picture and a description. On both pages you’ll find that the pictures seem to “float” or move slightly slower when you scroll down; this gives off a sort of dreamy effect as the text and image lightly move in opposite directions. Again, the CSS transform and translate property is used to move the overlapping divs marginally.

This was a very rough idea regarding wireframes; of course, the actual webpage may use different HTML and CSS elements than what was outlined above to create its functionality as seen. Most of what is seen on FemmeFatale is actually a lot more advanced since it incorporates a lot of blurring, animations, and movement. Hopefully this did give some insight on how to create wireframes for other websites and even your own ideas; understanding other webpages functionality and structure helps make creating personal websites easier.