Throughout time the book has taken many forms. Whether it be clay and wax tablets, parchments and scrolls, sheep’s gut, through to the more conventionally stacked and organised paper-based book, constant technological advancement has pressed development onward.
With the the advent of the computer age therefor, it’s not surprising that the book should evolve vertically into a medium ideally suited for it: the digital eReader. For the purpose of this investigation, the eReader is defined as, but not exclusively referred to as such (especially when referring to iPads and tablet PCs further on), being:
“an electronic device that is designed primarily for the purpose of reading digital books and periodicals and uses e-ink technology to display content to readers.” (Wikipedia, 2011) (more…)
When writing for the web, though your target audience may be the same as with other categories of writing such as essays, poetry and fiction, it is important to realise that once it’s online on the web, anyone may end up reading your work. Either through research, a project brief, or editorial guidelines, you should target your writing and its style toward your audience, but you should also take into account the factors affecting written content online.
Is Written Content for the Web Different?
It may not be surprising to many Internet users, especially the more prolific out there, that our habits when reading texts online differ from more traditional reading matter. Given the number of other things pulling us away from a text, be it the myriad of search options available to us, the advertisements potentially tempting us with offers on a page, or simply a hectic schedule, the reading styles for many differ for online written content than they do off-line or traditional copy.
According to Baehr and Shaller (2009) most users rarely read full texts online. This can be due to factors mentioned already, as well as for additional psychologicalal and physical reasons. Some people aren’t comfortable reading on a computer screen for a long time, and so will scan the text to minimise eye-strain or suchlike. Others, more adept at searching, will likewise scan the text seeking keywords relevant to their personal information search – but both do so for different reasons. (more…)
Applying Vitruvian Principles when undertaking analysis of websites can be of great benefit: you are given a metric by which to study effective methods of site construction.
As a part of the associated Web Thesis Project module of the MA Web Design and Content Planning a fairly comprehensive study of Vitruvian principles for several sites was undertaken. This was compiled into a research report which can be read here; this is subject to change in the future however.
For the purpose of this module, Content Management, the same principles of Vitruvius were utilised, albeit through a briefly more concise and focussed lens. Several websites were observed, “prodded and poked”, and those aspects of their design and function broken down into more distilled categories, in this case being those deemed as good, bad, and occasionally ugly. The presentation seminar given in class will be located in PDF format here after the presentation has been given.
These sites are all mostly related in nature of content or theme to the Web Thesis Website ‘Spooky Reads’, the alpha-test live-draft version which is locatable here, which is a horror book review website. (more…)
The Romantic Novelist’s Association (RNA)
Per its meta description: “The Romantic Novelists’ Association was formed in 1960 to promote romantic fiction and to encourage good writing and now represents more than 700 writers, agents, editors and other publishing professionals.” (RNA, 2011)
Keywords identified: Romance, fiction, romantic fiction, writers, editors, agents, publishing professionals.
Per Google AdWords/Keywords tool, with settings at Match Types: ‘Exact’ (for higher accuracy) and locations and languages set to ‘All Countries’ (we are assuming the site is aiming for maximum coverage).
Defining an indecipherable concept
There are many aspects of design which have apparently clear boundaries. The Golden Ratio, for example, is defined as a mathematical constant of 1.6180339887… representing the Greek number Phi (The Golden Section, 2007). Used prevalently throughout design it is said to be aesthetically pleasing due to its familiarity of form, apparent in works through human history from the pyramids to the Parthenon and beyond (Livio, 2003). It is not alone; numerous other definitions exist to classify and catalogue aspects of design theory employed by artists, designers and their ilk.
The Japanese-born aesthetic of wabi-sabi is a more elusive concept. When Marcel Theroux interviewed a monk living in a wabi-sabi Japanese monastery in the Kyoto prefecture he offered the British novelist the clearest definition in what had been a puzzling series of investigations into an attempt to conceptualise wabi-sabi: “Put simply, there is no definition for wabi-sabi. If it could be defined it wouldn’t be wabi-sabi” (In Search of Wabi Sabi, 2009). Whilst this abstract definition is arguably inconvenient to those seeking clarification, it does represent a school of thought, often Japan-rooted, which associates the philosophical aspects of wabi-sabi as an incalculable portion of a greater whole, the physical aspects of which may be sometimes defined. This is not an easy task however. (more…)
YumYum.com is a free recipe and cooking website.
CubeStat reports that the site has daily pageviews of 3,492, with a website value of $7,647 from daily ad revenues of $10.48. It should be noted, that when checking the site at Compete, monthly figures varied considerably – this is likely a seasonal variable skewed by U.S. Thanksgiving holidays and Christmas traffic.
For example, the monthly traffic was 72,336 for Nov 2009, reaching 92,065 in December 2009. This fell sharply to 59,108 in January 2010, and since then site traffic averaged out at around 40k visits per month.
Alexa provides a further breakdown of information, including Alexa proprietary traffic ranking figure that places the YumYum website in the top 1% of all websites. Key site traffic data that it does provide is a bounce rate figure of 90.2% – with a 3 month rolling average of 84.9%. That’s quite a high figure, and the goal of redesigning the site will be to take this high bounce rate into account.
Alexa does provide some important demographic information in that the site is heavily skewed toward a female demographic.
The site has been around since 1996, and it would seem from examining the page very little appears to have been done to it. Whilst it’s arguable that a recipe site needs only ingredients, I would argue that the huge bounce rate is due to the fact that in comparison to numerous media rich sites out there, this site is sorely lacking images. Other recipe sites are full of images, enticing and informing their visitors of what content is available and what recipes they can cook.
Whilst there may be certain reasons for not wanting images on every single page of a site with 20,000 recipes, I would argue that there would be definite benefit to having a fairly comprehensive image section on the front page – this because this is the keyhole to the remainder of the site, and thus will be essential in driving down that high bounce rate figure.
The redesign will therefore focus on keeping things relatively simple from a navigation standpoint, but on the front page ensuring that there are suitable image/photographic markers of content to entice readers to enter the site further to see/use the thousands of other recipes on offer.
The final site design can be viewed here.
As can be noted, an image-based menu was selected to entice readers with visual photo representations of the main images requested. The orginal theme was to be based around a clean, minimal, steel-themed (for stainless steel in a kitchen) with a tile-based (kitchen tiles) theme. I pared back on using more tiles and decided to focus on a gallery which highlighted the section image in larger image in the middle of the image-map.
Look at the following websites and analyse how they use symmetry, asymmetry, balance, lines of unity and contrast in their design.
The Emigre site teases with both symmetrical and asymmetrical qualities. If strict rules were to be applied, it could be said to be asymmetrical; the sites centre column is not flanked by equal sized columns on each side, but by a smaller column to its left and equal sized column, solely, to its right. Nonetheless, there is definitely symmetrical composition in play here in portions of the design.
The squares comprising the left column are almost half of the size of those of the squares in the centre and right hand columns, in the case of the image grabbed for display purposes (whose scale is in proportion to the original site) 118 pixels vs. 242 pixels (allowing for an 8 pixel approx. margin). This use of scale to create balance is strengthened by the use of margin between elements tying the seperate elements together as a whole (lines of unity). This idea is emboldened by the strong use of colours in the boxes themselves, which strengthen these lines of unity. Despite the rectangular size of the of the site page as a whole, the Golden Ratio hasn’t been used here.
Due to the strong use of ratios between the boxe sizes, there is a strong sense of balance on the site. The strong use of primary colours here also enhances this balance, with red, blue and yellow – each a primary colour equally spaced on the colour wheel – creating a hue-based sense of balance equal to the mathematical ones of the square’s edges.
The Eye Magazine site traditionally symmetrical. There is also a strong sense of horizontal balance here, enchanced with a liberal dosing of white-spacing above and below the menu. Your eye is thus drawn here. There is no confusion in that respect.
This is an exceptionally balanced site, both in terms of the symmetry of the side columns to the centre column, and to the colours used. Whereas the black & white/greyscale of the centre image is strong with good use, again, of white space, the side columns use small but punchy hues of pink and orange in the smaller boxes opposite to each other, and then more subdued colours for the adverts/columns immediately above them, again in contrast to its partner in the opposite left/right column.
look at a previous website design of your own and apply the golden section to the design and organisation of the content on the page.
My Hill Farm website appears to utilise the Golden Ration in regards to its basic triangular shape, but this was quite accidental. The main aim was to ensure that for the front/home page of the site, a user visiting would get key information about the B&B all in one hit, the aim being to reduce bounce-rate.
Were the site to employ the Golden Ration, the main column would be 538 pixels in width, vs. the estimated 463 pixel width in the final site design. Retrospectively this wouldn’t have been too difficult to employ had more attention been paid to it, but in this design more focus was given to the font face used in header and menu and spacing/size of the associated menu in regards to column placement.
With all of the Hill Farm enthusiasm this week I almost forgot to mention the scripting sites which I had found useful over the course of this week.
2) http://www.adventuresindevelopment.com/ Adventures in Development is a great blog resource with some very practical guides on web development. It does lean into some more advanced technologies at times, but digging around there are a good few jQuery-based articles here including this one on image rotation.
3) http://net.tutsplus.com/articles/web-roundups/the-20-most-practical-and-creative-uses-of-jquery/ This site is great as it takes the guess work out of jQuery ideas for your site providing inspiration for the person wondering just how they can benefit from jQuery.
The Critical Appraisal Process
Okay. So the group crit of my first draft design really didn’t go too well as regards approval of my first design and implementation. That said, I made a point of writing down all criticisms and taking them into account going into the new start of my design. Criticism can be tough but it’s a healthy thing. I found the following quote online quite amusing, and also true (attributed to Franklin P. Jones):
“Honest criticism is hard to take, particularly from a relative, a friend, an acquaintance or a stranger.”
The main comments – that my design looked too much like print and the pictures not very appealing at all, not to mention ‘menu in wrong place’ – sank in pretty fast. Then there were also comments about text centred on large page and too much white (green) space at the top of the page. I had had similar thoughts myself, but when I flicked to Photoshop in the course of throwing a few of the other pages together thought I might just pull it off by ‘tweaking’ here and there. And as discussed, that really isn’t such a great thing to do to try and fix your site. Looking today with fresh eyes, I see why it failed much more clearly. The image default I would glance at was set at 66.7% and sits all nice floating in my screen but when I look at the web page itself it just doesn’t fit well at all. It is a bit off-line. Not good. With that in mind, I actually felt happy opening up Photoshop yesterday and having a second stab at trying to nail the design.
I wanted to ensure that on the first page all content is above the fold. That was one key point. I look now at my first design, and it’s either looking like print brochure on A4, or looks like an old-school splash page that you used to see on so many sites in the late 90’s. It doesn’t convey any real key information.
The target audience is anyone who is able to use a b&b, but I want it to have a contemporary and clean feel. My logic for the choice of colours sits tight as with my earlier choice (see earlier post for that information). This time the background is a very feint paper-textured design with a colour change to fit my hue aesthetic, and though very subtle I really like it vs. plain background colour.
There’s alot to change. Okay, almost everything to change. But there were a few things that you can see I’ve settled on – mostly the actual fonts used, and the green-slanted colour scheme. Those were two things that weren’t beaten heavily to death in the crit 😉 I did almost keep the leafy border but pulled it (that was hard) and actually created a header and footer wrap adapted from it but that also looked a bit strange and not in keeping with the overall clean feel I am going for so I pulled that too, instead opting for the lines breaking content and giving more balance to the overall structure of the page. That was also a reason for the choice of the darker tone of blue I used in the text on the main page quotes and mini-blurb – taken from a Photoshop colour picker of the image. The idea being it offers balance, continuing from the sea and then onward with the natural colour of the page evening things out. I had earlier set the text in a dark green, but it was looking too restrained.
Revisit to my key point: I want everything on the main/home page contained so that the user doesn’t have to scroll. This is key.
On the other pages – such as our location – the user is actively pursuing further content regarding the area. The front page is to be the salient selling points with contact info condensed. The image on the left is the first of three that will either rotate slowly with pull quotes doing likewise in synch with the image change, or I will place buttons in image to permit the change manually. Key selling points of the hotel and area may change but I am thinking just the pull quote to change at the moment. Other pages will likely extend beyond the fold – or definitely will extend in the case of the our location page, and likely the rooms page also.
Anyway, I wanted to stick Mk. II up so that anyone reading had a chance to let me know what you thought.
So, whilst I know we were most likely required to come up with something Freudian with tones of ‘familiar but foreign’ I couldn’t quite resist sticking up a picture of the X-Men. They are, after all, the Uncanny X-Men! Funnily enough, in my trawl of the internet I came up with another cartoon-based image (this time when searching Google images for Uncanny) that really summed up Freud’s concept quite succinctly I felt.
What’s more uncanny than a familiar cartoon character, but now in 3D ‘real-life’ form with the associated human skin hues replacing the garish canary yellow that normally graces the flesh of his and the other faces of Springfield’s denizens.
Now – seriously – how would I answer the question ‘What is the uncanny?’ (and in one sentence!) It would depend on my target audience. If my audience were my fellow students and occasional random stranger from the world wide web dropping by I have to say that I would happily rely on the above comments condensed into a single sentence. Informal, fun, educational, punchy. That’s just what we’re looking from from a blog, right?
If it were to be relied on in an educational context, for an opener to an essay or suchlike, then I would have to say that the one sentence would probably be backed up with more than the obvious trip to wikipedia, or even freudfile.org, but likely a trip to the library to check out a few texts on psychiatry/psychoanalysis/psychology. Following a little further investigation of bibliographies and references of a few key texts which I’d hopefully identify I would try to break down the best definition into my own words with references where needed. That’s how I would answer the question in one sentence.
Now as to who I am going to email about my thesis project… it’s going to have to be a designer friend to see what he thinks of some ideas I have for logos for my site. I also considered emailing a pair of authors who I would like to write a feature on for the site launch, and also a contact at a major publishers, but I must get the branding/name/logo down first of all. Time to get emailing…