Craft

Style Guide

style-guide
Style Guides are the cornerstone of a solid design system.

Starting development by creating a style guide makes a lot more sense than developing on a page-by-page basis.

The style guide is a design deliverable that designs website interface elements through font, color, and style collections. Style guides are based on visual preference discussions with the client. When a client uses the word “fresh” or “uncluttered” or “energetic” to describe the site they want, the style guide visually represents those adjectives. At fertilepix, we make style guides that offer a catalyst for discussions to clarify and refine the client’s preferences and goals.

Wireframe

Once we at Fertilepix, understand the site’s content and priorities, our first visual step is to create wireframes. Fertilepix uses HTML5 and sass to design in the browser, for laying out content in a way that accurately expresses its hierarchy. By focusing on mobile first design, we can have these discussions with you earlier and more effectively.
wireframe

Typography

type
One of the most important components of responsive design is responsive typography.
Responsive web design is 99% typography.
One useful way to check how the page’s type looks and works is by removing the page of all kinds of images and media, and checking how the content looks without them. Does your text align well? Does it have a balanced vertical rhythm? Are the line lengths and type faces readable across screen sizes? Is it hierarchical? Answers to these questions are critical for a well rounded design.
In a fluid layout, browser width and typographic measure are taken into consideration: the wider the viewport, the more characters per line.

Responsive Images

Images are 66% of file size on Web pages.
Fertilepix uses image compression techniques without compromising on quality. SVGs and Icon fonts are used extensively.
We are all surrounded by high resolution displays. Larger images can be even 4x higher than a standard resolution image.
Fertilepix implements picture element to send optimised big images to mobile devices.
resp-images