Introduction
City sufficiency is a community website for urban homesteaders.
“Urban homesteading is a lifestyle based on self sufficiency
encouraging families to reduce consumption while engaging with
nature from within the city.”
This report outlines the research into Urban Homesteading, City
Sufficiency’s competitors, target audience and how this relates to
the design of the interface. This includes brainstorming, mood board
creation and sketches through several stages of development of
elements within the interface and the design as a whole.
All sections of the website are detailed with their content and
individual structure. The interfaces structure on a whole is also
explained. Some accommodations have been made for design
considerations and these are outlined and supported by 4
prototypes of the interface.
The final design drawing is a culmination of this research and
prototyping containing all measurements, colors and type details of
the layout.
1. Research
The first research step was to find out about urban homesteading
using online sources like wikipedia and books available on the
subject. This also gave an insight into the types of users that city
sufficiency would be targeted at.
1.1 Brainstorming
With a basic understanding of Urban Homesteading and the types of
people attracted to this lifestyle brainstorming began.
Mood boards were created using goggle search to collect together
the top 20 images from the words Urban and Homestead
separately. This gave a good indication of appropriate color
schemes.
Using the Adobe Color Lava App Color Pallets were created from these mood boards as possible swatches for the final color scheme.
1.2 Research of Competition and Peers
The first page of google search results for the term ‘urban homesteading’ gives a good indication of city sufficiency’s main competitors.
Urban Homestead is the most popular of the websites. Its footer has a similar design idea to one raised during brainstorming; That of vibrant foliage and vegetation overlaying the main page.
The foliage does not stand out because the pallet behind it is quite similar to that of the foreground image. This led to settling with the idea of having the main pallet in monochrome to create a better contrast.
http://urbanhomestead.org
Many of the competitors websites are very simple, lacking in graphics as well as interfaces that utilize dom manipulation like jquery. The Institute of Urban homesteading is the highest ranked page on google and is completely simplistic and basic, reminiscent of early web design.
http://iuhoakland.com
The most up to date and easy to use interface is at Urban Homesteading. This website is ran by the writers of the book ‘Urban Homesteading – heirloom skills for sustainable living’, Rachel Kaplin and K Ruby Blume. The book itself has sparked some controversy over whether or not the writers should be allowed to trademark the term ‘Urban Homesteading’
The result of the controversy being that many dedicated homesteaders refuse to use the website. It’s easy to navigate layout and slider make it an attractive source of information for beginners and the generally curious. It is City Sufficiency’s aim to appeal to both experienced and novice homesteaders and bridge this growing divide.
http://urban-homesteading.org
All of the top competitors websites use earthly pallets Green, Browns and beige’s. This is something that was suggested for use as a secondary pallet during mood board stage of planning and City Sufficiency will stick to this conventions.
All of the top competitors websites use earthly pallets Green, Browns and beige’s. This is something that was suggested for use as a secondary pallet during mood board stage of planning and City Sufficiency will stick to this conventions.
1.3 Sketches
After initial brainstorming and research a first rough sketch of city sufficiency gave a good indication to the main basis of city sufficiency’s design (Apendix 3.1 Prototype beta) once the initial idea was formed sketches of specific elements were constructed help create the first prototype.
After the separate element sketches had been done the overall styling and typography of the content was in place. (Apendix 3.2 Element Sketches) The logo, also acting as the heading took several sketches to get right. This was mostly about finding the right kerning for the graffiti part of the logo. (Apendix 3.3 Design Theme and Aesthetic)
During development of each prototype new sketches of existing element were designed. Expanding upon the original sketches as well as changing ratios and dimensions to fit in the new prototypes layout. (Apendix 3.4 Design Considerations)
2. Publication
City sufficiency is a community website for urban homesteaders. Its main emphasis is on promoting homesteading and self sufficiency within urban areas.
2.1 Aims of Website
City sufficiency was created as a place for like minded people, interested in homesteading to meet up, read tutorials, learn recipes, share stories, advice and tips.
The site also actively encourages people not already homesteading to give it a try by showing them how easy it is to make small changes within their own homes.
2.2 Profile
There are several websites already actively in use within the homesteading community, however the vast majority seem to be location based. City sufficiency is not targeted at any one region and offers broader more general advice that is therefor relevant to a much larger number of urban homesteaders.
“IUH classes take place in the private homes and gardens of our instructors or at other community homestead sites. We are locally based and most classes are in Oakland or Berkeley, with just a few classes in outlying areas (Marin, Alameda, El Sobrante).”
http://Iuhoakland.com
City sufficiency has 6 expert bloggers all based in different types of properties. Many of its competitors websites are ran by individuals or families who live in one home or locally to each other in similar properties.
“Surrounded by urban sprawl and just a short distance from a freeway, the Urban Homestead project is a family operated and highly productive city farm.”
http://urbanhomestead.org
City sufficiency contains a feature where users can be directed to a splash page most relevant to their own situation by selecting some options. These include property size, property type and family size. Each of these splash pages hold lists of relevant how to articles, questions and recipe’s.
The main lacking in existing urban homesteading websites is the ability to discuss and interact. One of the first page google ranked websites for the search term ‘urban homesteading’ is actually a Facebook page, their about section reads.
Take Back Urban Home-steading(s) began as a protest to the trademarking of the words “urban homestead” and “urban homesteading.” We have evolved into a large diverse group of urban homesteaders.
http://www.facebook.com/pages/Take-Back-Urban-Home-steadings/167527713295518
The lack of interactive homesteading communities coupled with facebooks built in comment, wall posts and photo sharing functionalities mean this page has become a good source of tips and advice. City sufficiency gives users the chance to comment on articles, ask questions, give answers, start their own topics of discussions and even add their own articles.
2.3 Target Group
Homesteading appeals to people with an alternative lifestyle, especially within subcultures where social consciousness is a factor in lifestyle choices. There is an emphasis on simplicity within their lives moving away from technology and back towards nature.
The typical homesteader is down to earth, environmentally conscious, keeps a track of their energy consumption and carbon footprint and eats healthy home grown or organic foods.
City people grow and butcher animals for food, milk the goats, and gather the honey,just like homesteaders everywhere. Everyone is trying to grow as much food, save as many resources, and connect as much with their neighbors as possible. We are all motivated by concern for our cultural moment and a desire to live the change we want to see, to be part of crafting a solution rather than perpetuating the problem.
(Kaplin R and Blume, K 2011)
3. Content and Structure
3.1 Content
The website has a variety of sections that include About, News, Journals, Tips, Events and Recipes.
About is the landing page. It gives an overview of the website, its aims and what exactly urban homesteading is.
The news section contains articles relevant to homesteading within cities. It also has news regarding homesteading in general. Users can comment on articles.
Journals follows the everyday life of several enthusiasts experiences of homesteading. There are 6 bloggers all in different areas, properties and varying budgets. The blogs show how homesteaders can change their homes over time and encourages the community to try out some of this experts endeavours. Users can comment on blogs
The recipes section showcases dishes and meals that can be made from homegrown and or organic produce. Users can comment on recipes.
Tips is a forum based setting where users can post questions and help answer other users queries.
The events section is split into categories and has listings of events relevant to homesteading. Users can post their own events.
3.2 Design theme and aesthetic
The overall design theme and aesthetic is based on the collision of two worlds. The drab, monochrome, hard lines style of the city juxtaposed against the vibrant colour of blossoming nature. This is instantly apparent from the logo, a striking graffiti ‘city’ with a leafy ‘Sufficiency’ growing up in front of it.
City Sufficiency will achieve this aesthetic by sticking to a grey-scale inspired pallet of colors for the bulk of the sites information within articles and navigation above the fold and a calming and relaxing earthly pallet of greens and browns below the fold.
The layout is very visual and image based, with a background image as its main focus. The city lies above the fold line with the content layered on top of city skyscrapers superimposed on an idyllic blue sky background. Below the fold line is the country, down to earth with the content held inside square holes dug out into the ground. Urging viewers to literally go back to their roots.
The website optimised for 1024 x 786 resolution however the content will be slightly narrower at 960px, centred within the screen. Scrolling down to the main content of an article below the fold line takes the city out of sight, paralleling the concept of creating your own country side hideaway in the concrete jungle of the city.
3.3 Structure
The main navigation between sections is fixed at the very top of the page. The search box is also in this top bar. There are no sub menus / drop downs in the main navigation however when visiting separate sections a second sub menu of navigation is added. I decided against drop down style sub menus on the main navigation tabs to avoid clutter as homesteaders are choosing a simpler life with no added packaging.
The general layout of many of the sections are similar. The layout is split into two sections above and below the fold. The bulk of the screen is taken up by an article on the left hand side and highlighted information in a column down the right hand side. This is the same above and below the fold creating 4 main content panels in total.
The above the fold right hand column of the news, tips n advice, events and recipe pages will have a sub header with a feature slider and secondary navigation. In the sub header of journal pages each blog is represented by an image, in 2 rows of 3, these also acts as sub navigation. This is similar to the events and advice and tips section where 6 images are used to denote the different categories. In the news section these image links are for related articles.
The slider plays automatically, you can navigate between slides. Clicking on each slide will take you to the relevant section or article. In each section a list of recent articles when viewing a single article, tutorial, blog or recipe in the right hand column below the fold.
The recent articles lists are designed to add easy quick navigation throughout the site from one relevant article to another. Each will show a thumbnail of the article, it’s headline and intro text. This type of on the fly generated navigation supports the main navigation as users do not always know instinctively what section the information they are looking for will be found in.
The ‘my urban homestead’ box which contains a form with options and a submit button that reads, Go. The options include a drop down selection of property sizes and another of property types. There is also a set of radio buttons with numbers 1- 4 and 5+ for family size. Filling in this information will take you to a splash page.
Splash pages are dynamically created articles showing a list of all other articles, recipes, blogs etc tagged with the relevant property type, size and/or family size. This list can be sorted alphabetically, in date order or by popularity both ascending and descending.
3.4 Design-Considerations
The main constraint of the design is its width. All the content will be within a 960px wide content area. This creates some challenges and City Sufficiency will need to strike a balance between presenting all of its content and not having too much clutter.
In order to achieve this city sufficiency will split its content above and below the fold. The complete layout is constructed using two 16: 9 grids containing 2 Raul Rosarivos Gutenberg Canons and features margins of 1/9, 2/9 and a content area of the same proportions as the section. The grids represent above and below the fold.
There are key points to remember when designing the city sufficiency interface.
- The articles are sometimes how to guides or tutorials so should have clear easy to read typography.
- The target groups attraction towards simplicity should be reflected by a simple clean cut interface free from clutter. Make use of negative as well as Positive space.
4. Design Prototypes
4.1 Prototype 1
In the first prototype the content is split above and below the fold with extracts of the main article above and the whole of the article below.
Fitting all of the elements into the layout with a image based background makes the page seem too cluttered. Navigation in this prototype is a problem as there are too many links that extend down the page.
4.2 Prototype 2
In this prototype a 16:9 grid is used to plot the size and location of the varying elements and their alignment to each other. As in the first prototype dimension constraints meant splitting the content above and below the line.
Navigation in this design has developed slightly it is now fixed to the top of the screen and has drop down sub navigation. This makes navigation permanently assessable. The ability to navigate between individual posts was added to the design.
The article image is now designed to look like a Polaroid and therefor has a more appropriate space to add the caption. The my urban homestead box has been moved into a billboard on top of the sky scrapper that holds the right hand column.
4.3 Prototype 3
This prototype uses the Raul Rosarivos Gutenberg Canon to make best use of positive and negative space. The drop down sub navigation from the main menu has also been removed. Instead sub navigation has been added in the right hand column in the way of 2 rows of 3 images when viewing separate sections. In the news section these are related articles.
The my homestead form has been moved to underneath to new sub navigation. A feature slider has been added inside the billboard. The ad unit has been moved to the recent articles block below the fold. Recent articles are now split into two columns.
The search form has been moved to the top navigation so that it can be accessible always when scrolling the screen.
4.4 Prototype 4
Sticking with the Raul Rosarivos Gutenberg Canon some of the elements have been rearranged slightly. The my urban homestead form had been right aligned. The Ad unit has been moved above the recent articles section to draw more attention.
The background image design has been adjusted so that the content below the fold also appears to be below the ground, in square holes cut into the earth.
The previous and next article navigation has been moved to underneath the bottom main content area so not to intrude on the negative space that breaks up the layout.