{"id":76,"date":"2022-10-03T18:43:34","date_gmt":"2022-10-03T17:43:34","guid":{"rendered":"https:\/\/zaraknox.co.uk\/journal\/?p=76"},"modified":"2022-10-11T12:35:54","modified_gmt":"2022-10-11T11:35:54","slug":"design-for-web-content-good-design-ii","status":"publish","type":"post","link":"https:\/\/zaraknox.co.uk\/journal\/2022\/10\/03\/design-for-web-content-good-design-ii\/","title":{"rendered":"Design for Web Content – Good Design II"},"content":{"rendered":"\n

THREE WEBSITES THAT DISPLAY GOOD DESIGN<\/strong><\/p>\n\n\n\n

  1. Etsy<\/strong><\/a><\/li><\/ol>\n\n\n\n

    About<\/em>: Etsy is an online marketplace where users themselves are the merchants. The content is ever-changing, and users are encouraged to review any purchases they make.<\/p>\n\n\n\n

    \"\"
    The homepage<\/figcaption><\/figure>\n\n\n\n

    Upon entering the homepage, the eye is drawn to the large searchbar at the top of the screen. <\/p>\n\n\n\n

    The logo is also relatively understated, while the pastel colour theme of the banner is minimal and muted. Aesthetics are not the main focus.<\/p>\n\n\n\n

    Sub categories at the top are clearly laid out.<\/p>\n\n\n\n

    The layout makes the user journey clear; most users will have a specific idea of the sort of products they are looking for and either head for the subcategories or the searchbar. Options for browsing more casually are located further down the page, and less of a priority.<\/p>\n\n\n\n

    \"\"
    Once a search term has been entered<\/figcaption><\/figure>\n\n\n\n

    Search results are displayed in a clear grid, with images of the products taking up the most real estate. Only the key information (the information the user is most interested in) is in bold – the rating of the seller and the price. Even the name of each product is not what the eye is drawn to. <\/p>\n\n\n\n

    \"\"
    The subscribe button<\/figcaption><\/figure>\n\n\n\n

    The invitation to subscribe to a mailing list is almost at the bottom of the page. Only those specifically looking for it are likely to see it, and its presence is unobtrusive. There are no pop-ups.<\/p>\n\n\n\n

    \"\"
    The footer<\/figcaption><\/figure>\n\n\n\n

    Hierarchy plays a role in the layout, with information less relevant to the user displayed in the footer.<\/p>\n\n\n\n

    The bottom of the page, where more ‘corporate’ information can be found, has a completely different aesthetic to the higher parts of the page. It is a solid, official blue and very unadorned. It creates a sense of being more business-like. Users looking at this section are more likely to be jobseekers, businesses, or those seeking to make a complaint or report. The overall tone is one of professionalism, which creates a sense of trust. <\/p>\n\n\n\n

    If the main part of the page is the shop front, then the footer is the back office. <\/p>\n\n\n\n

    Summary<\/em>: It is easy for users to look for specific items and quickly assess the information they need. Aesthetics play a smaller role, and mainly the content (products) itself make up the visuals on the page. Etsy’s corporate presence is minimised on the page in favour of user content. <\/p>\n\n\n\n

    2. Brent Council<\/a> <\/strong><\/p>\n\n\n\n

    About<\/em>: Brent Council is a website for residents looking to perform various online tasks and find local information. It was redesigned in 2021\/2.<\/p>\n\n\n\n

    \"\"
    The homepage<\/figcaption><\/figure>\n\n\n\n

    Brent Council’s website is relatively unadorned, with little in the way of decoration to it. It uses the additive primary colour green in background blocks. This gives a sense of feeling ‘official’. Its navbar is also very plain, and the navlinks’ dropdown options prevent the navbar from being too cluttered. <\/p>\n\n\n\n

    Not many options are given upon viewing the homepage; you are either a resident or a business, with an additional option to view the council’s structure. Should a resident navigate to the site in order to find local information, their pathway would be very clear.<\/p>\n\n\n\n

    A mosaic of local residents imparts the message that the focus is on Brent’s population itself.<\/p>\n\n\n\n

    \"\"
    Reachdeck toolbar a clear option at the top of the page<\/figcaption><\/figure>\n\n\n\n

    The 2011 Census found that around one in seven Brent residents (14%) had a long-term health problem or disability that limited their day-to day-activities. The inclusion of Reachdeck software clearly placed in the header assists accessibility, with options for text-to-speech and page reading. <\/p>\n\n\n\n

    \"\"
    Options for residents<\/figcaption><\/figure>\n\n\n\n

    Clicking the residents’ option in the navbar opens a list of subcategories that navigate to the relevant page.<\/p>\n\n\n\n

    \"\"
    Visual subcategories<\/figcaption><\/figure>\n\n\n\n

    According to the 2011 census, 37% of the Brent population used a main language other than English – the 2nd highest in England. Around 9% of adults in Brent have poor proficiency in spoken <\/strong>English. The inclusion of an icon grid below the resident subcategories further helps residents determine which section to navigate to.<\/p>\n\n\n\n

    \"\"
    Further options lower in the residents’ section<\/figcaption><\/figure>\n\n\n\n

    Options for residents are further simplified if they scroll past the subcategories; they are presented with a four-part grid made up of keywords. This can help users who might feel overwhelmed or unsure of which section to navigate to, and also those with limited English ability. <\/p>\n\n\n\n

    News and activities are placed closer to the bottom of the page. Most who log on to the site will have an idea of the action they wish to accomplish, and so more casual browsing is not prioritised.<\/p>\n\n\n\n

    Summary<\/em>: Users and any difficulties they might face when using the site are prioritised on the Brent website, with accessibility a clear focus. Pathways are made as clear and short as possible, while any aesthetic visuals on the page are limited to images of the residents themselves.<\/p>\n\n\n\n

    More on council websites here<\/a>.<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    3. Moulin Rouge<\/strong><\/a><\/p>\n\n\n\n

    About<\/em>: The landing page for the Moulin Rouge theatre in Paris, which offers dining, live shows, and various experience packages. There is also an online shop.<\/p>\n\n\n\n

    \"\"
    Homepage when first navigating to the site<\/figcaption><\/figure>\n\n\n\n

    Aesthetics play a large role in the website, evident from the animation that plays upon first navigating to the site. This cover screen is fully animated and takes up the entire browser window.<\/p>\n\n\n\n

    However, this screen can be removed by a prominently placed cancel button on the top right. Once the user is on the page, this animated cover does not repeat. If left alone, the animated cover recedes after a few seconds, revealing the homepage. This prevents aesthetics from encroaching on the functionality of the site.<\/p>\n\n\n\n

    \"\"
    The navbar<\/figcaption><\/figure>\n\n\n\n

    The navbar is minimal, with few options and a call to action button on the right. The call to action button has inverted colours to make it stand out from the navlinks. Interestingly, the logo\/homelink is placed in the centre of the navbar, which is a change from the usual left-hand alignment seen on most websites. This may be a matter of aesthetics, in order to showcase the logo while ensuring it is prominently placed for easy navigation.<\/p>\n\n\n\n

    As the Moulin Rouge is a renowned tourist destination, language options are available via a dropdown menu above the main navbar. However, the site automatically loads in either French or English, depending on the user’s location.<\/p>\n\n\n\n

    \"\"
    Drop-down menus on the navlinks<\/figcaption><\/figure>\n\n\n\n

    Drop-down menus on the navlinks allow for subcategory selection while keeping the header uncluttered.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
    \"\"
    Booking options page<\/figcaption><\/figure>\n\n\n\n

    Booking options and offers are presented via a series of ‘cards’ that the user scrolls down to explore. Each ‘card’ takes up the majority of the browser window in order to fully present its contents. This may be more effective than say, a carousel, as users can quickly scroll up and down between the cards to compare them.<\/p>\n\n\n\n

    The accompanying images on each card are the only images upon the page. The eye is drawn to these areas and nowhere else.<\/p>\n\n\n\n

    Unique aspects of each offer are highlighted in red text. While it may be chalked up to being a sales tactic to draw customers in, highlighting key features of each offer helps the user compare the offers faster, perhaps while skim-reading.<\/p>\n\n\n\n

    \"\"
    Footer<\/figcaption><\/figure>\n\n\n\n

    As is often the case with footers, it is mostly stripped down, without the spectacle of the main part of the page. This serves to provide a more ‘official’ tone to more functional information, such as contacts and parking. <\/p>\n\n\n\n

    The footer also includes some hidden features, such as video links to performances that are not available in the main site. In this way, the user is ‘rewarded’ for scrolling this far. <\/p>\n\n\n\n

    The most prominent feature of the footer is the call to action section, where the newsletter subscription and social media buttons are the only sources of colour. Furthermore, information on hearing aid assistance is highlighted in bold.<\/p>\n\n\n\n

    Summary<\/em>: The Moulin Rouge places a lot of emphasis on its visuals, as is to be expected due to the establishment’s reputation. However, these aesthetic touches are minimal and do not eclipse the content of the page. In the case of the offers page, accompanying visuals help guide the eye to key information for the user.<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    <\/p>\n\n\n\n

    Finally, some food for thought:<\/p>\n\n\n\n

    \u201cGood web design is a balance between aesthetics and ethics.\u201d<\/em> <\/p>\n\n\n\n

    – Elliot Jay Stocks<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    \u201c\u2026design seeks to negotiate the qualities of the content with the affordances* of the format to produce a cohesive whole greater than the sum of the parts.”<\/em> <\/p>\n\n\n\n

    – Frank Chimero<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    \u201cIndifference towards people and the reality in which they live is actually
    the one and only cardinal sin in design.\u201d<\/em> <\/p>\n\n\n\n

    – Dieter Rams<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    \u201cLess is more.\u201d<\/em> <\/p>\n\n\n\n

    – Ludwig Mies van der Rohe<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    Good web design is user-centred. When we build web properties or create web
    content, we do it for the user, we do not do it for ourselves and we do not do it for our client.<\/em><\/p>\n\n\n\n

    <\/p>\n\n\n\n

    \u201cIn a world where content creation is cheap and 90% of it is crap, we have a
    decision to make: do we want to be part of the 90% noise or the 10% signal of the web.\u201d<\/em> <\/p>\n\n\n\n

    – Brad Frost<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    And lastly:<\/p>\n\n\n\n

    <\/p>\n\n\n\n

    Content over aesthetics \u2013 aim for a balance, but content is the key draw overall.<\/em><\/strong><\/p>\n\n\n

    \n
    \"\"<\/figure><\/div>","protected":false},"excerpt":{"rendered":"

    THREE WEBSITES THAT DISPLAY GOOD DESIGN Etsy About: Etsy is an online marketplace where users themselves are the merchants. The content is ever-changing, and users are encouraged to review any purchases they make. Upon entering the homepage, the eye is drawn to the large searchbar at the top of the screen. The logo is also […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[8,6],"tags":[7],"_links":{"self":[{"href":"https:\/\/zaraknox.co.uk\/journal\/wp-json\/wp\/v2\/posts\/76"}],"collection":[{"href":"https:\/\/zaraknox.co.uk\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zaraknox.co.uk\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zaraknox.co.uk\/journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zaraknox.co.uk\/journal\/wp-json\/wp\/v2\/comments?post=76"}],"version-history":[{"count":73,"href":"https:\/\/zaraknox.co.uk\/journal\/wp-json\/wp\/v2\/posts\/76\/revisions"}],"predecessor-version":[{"id":189,"href":"https:\/\/zaraknox.co.uk\/journal\/wp-json\/wp\/v2\/posts\/76\/revisions\/189"}],"wp:attachment":[{"href":"https:\/\/zaraknox.co.uk\/journal\/wp-json\/wp\/v2\/media?parent=76"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zaraknox.co.uk\/journal\/wp-json\/wp\/v2\/categories?post=76"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zaraknox.co.uk\/journal\/wp-json\/wp\/v2\/tags?post=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}