Introduction

This is a report detailing the creation of the City Sufficiency website interfaces digital prototype. Previously a sketched prototype had been produced after an ideas development process that involved research into Urban Homesteading, City Sufficiency competitors, target audience and how this related to the design of the interface.

 

This included sketches through several stages of development of elements within the interface and the design as a whole. Since the original prototype was developed some accommodations have been made for enhanced usability. These changes are outlined in this report, along with the reasoning behind them and details of the processes and tools used to make these design adjustments.

 

Difficulties ran into during production of the digital prototype are also explained along with the solutions or workarounds used to fix these problems. The final digital prototype is a culmination of this research and prototyping containing all measurements, colors and type details of the layout.

 

Re-iterate limiting factors on design

 

The main limitations to City Sufficiencies website interface is the vast amounts of information and visual to be fitted into the content area specification of 1024 x 768 px. This situation has been improved by splitting the design and content above and below the line, however the elements inside each section needed tweaking to not become over crowded or appear cluttered.

 

This has always been a major design consideration as the target audiences attraction towards simplicity was reflected in all of City Sufficiencies competitors.

 

The complete digital prototype is, as decided upon in pre production, constructed using two Raul Rosarivos Gutenberg Canons and features margins of 1/9, 2/9. However the content area now sits just outside the canons proportions. The grids represent above and below the fold.

 

Changes to original design

One of the first changes made to the interface design before the digital prototype was created is the addition of a home button. This was decided upon to enhance the navigation system for the websites intended users.

Second to this the navigation was moved left to start immediately, instead of having 106px margin at each end.

Moving the navigation allowed for a more adequate space to have the search bar input for greater usability.

On the previous prototype of city sufficiency the ‘My urban homestead’ form used radio buttons to select how many people lived in the users household.  The space to insert the radio selects was fairly small and proved to be limiting the  amount of options available to users.

By returning to an earlier prototype of the interface and replacing the radio selects with drop down selection lists users can be more specific about the makeup of their household.

The main article section was the element most developed from prototype to style guide. The previous prototypes article section was not spacious enough to fit longer articles inside. By creating a scrollable div area controlled by  a slider larger articles can be displayed  without breaking the design.

It was also decided to add more expanded pagination to this section.  Previously there were arrows at the bottom of the article to navigate between previous and next posts. However it was felt adding page numbers also would encourage users to navigate through more articles and stay on the website for longer.

The main image, still encased in a Polaroid has been moved to become a part of the article, instead of a stand alone element. This means the image will scroll with the content. It also allows for more text in the article section, as this element no longer overlaps the text area, which required a huge margin before the text could begin.

Another change involved switching the ‘dug out’ under ground to the advert instead of the Recent Articles box. This decision was made because the graphically nature distracted from the information inside of the recent articles box.

Further alterations to the City Sufficiency interface included the adjustments made to the article tiles.

The text showing the article heading was taking up too much of the tile. The tiles have been adjusted so that they only display the titles when hovering or active. The amount of images in this corner made this section feel over cluttered so whilst not active images now have an opacity of 70%. They were also made more narrow by 15px each.

 

Tools used

This interface is very visual and as a result many of photoshop’s tools have been utilised.

Brushes: The built in grass and leaves brushes were extremely useful in this  nature design to create foliage and depth in the interface. It emulates the sketches of grass and nature in the  final prototype very well.

Creating the Article Tiles

Clipping Masks: In order to use article images with varying dimensions clipping masks were used on the image to create perfectly sized tiles with rounded corners. The opacity of the rounded rectangle shape underneath is set to 70% to fade out the images slightly. When hovering or active the rounded rectangle shape has an opacity of 100%.

 

Layer Styles: An Inner Shadow layer style was applied to the tiles creating a sunken in illusion, with a Drop Shadow also added so that the images still appear to be stuck to the front of the building, this gives them an almost window like feel.. They also have a 1px stroke style layer added to finish off.

Gradient Tool: I used the gradient tool on a grey rectangle to create this nice metallic look on the article titles element. The inner shadow and stroke are removed when the tiles are active this combined with the metallic effect gives the tiles the appearance that they are popping out of the screen.

 

Difficulties encountered

Whilst creating the billboard element I found that I was unable to give the effect I wants of the image in the billboard because I could only clip the image around the entire billboard.

To rectify this I created a duplicate layer if the billboard and erased the inside panel and placed this layer on top of the clipped image and other billboard.

What was learned?

One of the more interesting tasks in creating the style guide was a unique image that needed to be created. This image spans across the interface and represents the above and below the line fold. The image was created as a separate psd file saved as a png  which was added to the main psd later on.

A base level was created using paintbrush with a bevel and emboss  layer style added selecting the texture option. Stroke and drop shadow layer styles were also used to create a more 3D and cartoon style feel.

A  background layer of grass was added using the paint brushes mentioned earlier in the report. This layer was given a Drop Shadow layer style to give the grass a sense of depth and create an illusion of a greater mass of grass.

In the foreground another layer of grass was created in the same way. This time parts of the layer were blended at the roots to fade them into the green ground using the ‘blur’ and ‘smudge’ tools.

Icons sourced online were then added to give a finer sense of detail to this image. The final image is called GroundDetail.png.
The creation of this image began in photoshop whilst trying to develope the best order for layering and developed naturally from there. If i had to repeat this process I would use adobe illustrator to create a vector image instead. This would have been a more appropriate for this type of drawing.

Conclusion

Although the original prototype was good and captured well the aesthetic of City Sufficiency it lacked certain usability functions. The changes made before the digital prototype was created have made the website easier to use. The changes within navigation and the main content area are especially important in making better use of the space available within the dimension constraints.

The digital prototype is a nice balance between aesthetics and usability, combining original and striking artwork with clean cut information based sections to create a truly unique and fun interface.

 

Style Guides