courtneyrobinson97 - Tumblr blog

[courtneyrobinson97]

IXD304

Digitising the wireframes

After sketching my basic wireframes, my next stage was to digitise the best layouts. Below you can see the basic structure I put together as a template before I began adding colour schemes and styling to my design. 

After experimenting with image placement and text styling, below is the stage I got my prototype to to present in front of my fellow classmates before I intended to transfer it into Adobe XD to make it a proper functioning website prototype. I ran out of time to get the styling of some sections completed however from what I had done, I was happy to present and received constructive feedback on what I could do to better my design before putting in the final touches.

[courtneyrobinson97]

IXD304

Sketching Layouts

[courtneyrobinson97]

IXD304

Art direction

Art direction is about designing the journey for our intended target audience. 

The most important aspect of art direction is the “concept.”

4 art direction steps discussed in A List Apart – Art Direction and the Web are:

“

Goals, goals, goals. You’ve heard it all before, but there’s a reason you’ve heard it all before. Good concepts accomplish something. And that something should be the objective to which you and your client have agreed. Always ask yourself, “will this idea help us reach our goal?”

Use idea-stimulating techniques. Fantastic ideas might just come to some in the shower, but the rest of us can be helped along by using techniques like brainstorming. There are plenty of books on idea generation, and the rules of brainstorming are fairly well-known. Initially you should generate a large quantity of ideas. Your chances of coming up with a winning idea are usually directly proportionate to the number of ideas you generate. You can use the method of your choice. One effective technique, especially if you work alone, is to take a sheet of paper and write your problem or objective at the top. Then force yourself to quickly write or sketch twenty different ideas, and do not stop until you’ve got twenty. It will be difficult, but hey, if it were easy, it wouldn’t be called work. Here are some pointers:

Keep the bird’s eye view Don’t get too wrapped up in the details. Work like a sculptor. Start with a large mass of ideas and refine from there — but keep looking at the whole through every phase of the project. Let the specialists work out the small details, and guide them subtly when necessary to keep everything on track.

Don’t censor yourself. You’ll do that later. All ideas are welcome at this point, even (and sometimes especially) the crazy ones.

Sketch quickly, write quickly. You’ll flesh out the best ideas later.

Use symbols, metaphor, or theme. Some of the best concepts utilize recognizable symbols, as in Zeldman’s example. Use your life knowledge and experience. To get a feel for this, take the creativity test at Ron Reason’s site and study the test examples.

Don’t design. You’ll do that later.

Once you’ve got your ideas on paper, put on the critic’s hat. Choose the best two or three ideas and flesh them out a bit. Now you can permit yourself to think more about the actual design, type, color, and layout. Test the ideas against your objective. The best idea should win, but stay flexible. Good ideas can always be made better.

“

They also discuss the importance of knowing your stuff by keeping your style in check but be openminded to feedback and criticism.

As I’ve started to digitise some of the visuals I planned to include in my website user master apprentice workshops, my plan is to use these as guides throughout the website to help make the content flow smoothly as well as entertain the user in regards to the game element planned to be featured on some pages.

These are only a few of the illustrations I plan to include in my website.

[courtneyrobinson97]

IXD304

Choosing typefaces

When considering a typeface for this project, I want to select something that I find relatable to the well known Sherlock Holmes branding. In this case you can see i’ve listed about to the left, a few variations I considered in font styles in regards to the Sherlock Holmes titles. 

Once I’d settled on the font ‘Palatino’, I then considered what font would work well along side this font. 

As it was a serif font, I felt going with a sans serif might work well for the body text throughout the website. As you can see on the right side, I took a chunk of the text provided and put it into various fonts to see which one I liked the best and felt would compliment my already selected theme. 

For my body copy I’ve selected a font called Monaco. It is a bit unconventional compared to the font style selected but I felt this would help bring a modern twist for when I used it in my website.

[courtneyrobinson97]

IXD304

Considering navigation

Navigation is a key element of any website, it’s how the user gets from section to section, and to specific content. Most website navigation nowadays follows a handful of specific formats that, because they're familiar, won't leave your site visitors confused about how to access your content.

Horizontal Text

Horizontal text-based navigation is probably the most common style found online. This type of navigation consists of a horizontal list of the sections of the site, generally named in one or two words each. It can either be created with graphics or straight HTML text, both of which can have rollovers for a bit of user interaction.

Sub-Menus

In some cases, you may want to present the user with the depth of information, even without a drop-down menu. Having a sub-menu below main navigation titles takes up more room, and is less conventional, though it does allow visitors to clearly see what is available and get where they want.

Vertical Text

Vertical text navigation is also quite common and is often used for sites requiring a longer list of button bar items, expandable navigation, or for titles of longer length. Vertical navigation is most commonly found along the left side of the webpage, though right side navigation can be effective if designed properly or if for secondary navigation. Vertical navigation is often used for a second button bar, such as for sub-sections of a major section found in a horizontal bar at the top of the page.

Drop-Down Menus

Drop-down menus are often used along with horizontal navigation, and allow the user to jump not just to the main sections of the site, but also to many of the key sub-sections. Sites with a lot of content can certainly benefit from drop-downs, as they eliminate a click to your content.

Icons or Graphics

Integrating icons or other graphics into your navigation can create an intuitive interface. The user will associate the icons with the content they represent, creating an even clearer approach to a button bar. A set of navigation icons should be created in a consistent style with each other and the site as a whole, as they should improve the site design rather than create a distraction. It should also be clear what they represent. Adding icons just to make a design look better may not serve the best interests of the site.

Source:

https://www.lifewire.com/types-of-website-navigation-1697495

After doing some research into the latest perceptions on navigations for websites, I did a few quick sketches of potential layouts for the website I plan on creating for the Sherlock content.

[courtneyrobinson97]

IXD304

The Five Rules

During a lecture, something i thought important to note down was the five rules that need to be considered when creating any text heavy content. These five rules are highly important to keep in mind for the project I’m working on as we are wanting to present information to our users in a way that guides them through the content and therefore telling them a story in an enjoyable way using typography, visuals and design choices. The five rules are as follows:

Focus on body copy

Choose a comfortable point size

Consider leading

Maintain the measure

Select a legible typeface

[courtneyrobinson97]

IXD304

Target Audience

The important thing to keep in mind when setting a target audience is not to try include every category. The more specific, the easier it is to design your product to their needs.

The target audience i decided to work with for my project was the late teens to early 20s group. I settled on this because it’s the usual demographic which enjoys the Sherlock series and franchise as a whole. It is also the category which would appreciate the game aspect I plan to incorporate into my website. As my target audience is one that i can relate to, this makes the design process slightly easier as well as being able to receive helpful feedback from my classmates who also fit in to my intended demographic.

[courtneyrobinson97]

IXD304

Site Map

So as my site map shows above, I originally plan to have my site with a single scroll landing home page and using the navigation, the user will be able to locate to the other pages of the site. 221B Baker street is another tab on the nav however there it going to be two possible outcomes from the first page that will lead to the information shown on the page related to 221B Baker Street and then the other option will present information around the Sherlock Museum. 

In regards to On the Silver Screen page, again it will be a single page scroll showing the provided information and a selection of imagery and illustrations.

For the characters page, an original landing page will direct the user to either a page on=f information about the heros or another about the villains, both presented in an illustrative way.

[courtneyrobinson97]

IXD304

Reviewing and marking up my chosen content

[courtneyrobinson97]

IXD304

Markdown file of Sherlock Content

[courtneyrobinson97]

IXD304

Looking at Cluedo for inspiration - a game element

Cluedo is a murder mystery game for three to six players that was created in 1943 by Anthony E. Pratt from Birmingham, England. The game was first manufactured by Waddingtons in the UK in 1949 but since then, it has been relaunched and updated several times, and it is currently owned and published by the American game and toy company Hasbro.

The object of the game is to determine who murdered the game's victim, where the crime took place, and which weapon was used. Each player assumes the role of one of the six suspects and attempts to come to the correct answer by strategically moving around a game board representing the rooms of a mansion and collecting clues about the circumstances of the murder from the other players.

The game consists of a board which shows the rooms, corridors and secret-passages of an English country house called Tudor Mansion in Hampshire, England in 1926. The game box also includes several coloured playing pieces to represent characters, miniature murder weapon props, two six-sided dice, three sets of cards (describing the  rooms, characters or weapons), Solution Cards envelope to contain one card from each set of cards, and a Detective's Notes pad on which are printed lists of rooms, weapons and characters, so players can keep detailed notes during the game.

There was even a Sherlock themed cluedo released.

I was inspired by this game for visual imagery as in Sherlock Holmes, he analyses the rooms, the victim and potential murder weapons to come up the mastermind behind the attacks with the inclusion of clues throughout each investigation. This relates highly to the theme of cluedo and my idea is to use a game concept within my website using the main rooms featured within Sherlock to guide the viewer to the related information.

[courtneyrobinson97]

IXD304

Considering design styles

After doing some research, I settled on the idea to take inspiration from the BBC Sherlock series in regards to design styles. With this in mind, I was able get together a colour scheme as shown above as well as a style for the image I intended to include throughout my website. 

I felt like the dark, cold colour tones featured in this promotional image would look well when transferred to my webpage to give a young but professional over all look. However as I planned to make an illustrative game aspect for the webpage, an adjustment in colours may need to be made as I was the illustrations to be as accurate to the life scenes of Sherlocks home so that theres no confusion for the audience as well as it being an iconic part of the franchise so therefore deserves to be left alone.

[courtneyrobinson97]

IXD304

Researching Sherlock Holmes

Sherlock Holmes is a fictional private detective created by the British author Sir Arthur Conan Doyle. Referring to himself as a "consulting detective" in the stories, Holmes is known for his high observation skills, experience in forensic science, as well as his logical reasoning that borders on the crazy to most who don’t know him well. He investigates cases for a wide variety of clients, including Scotland Yard.

First appearing in print in 1887's A Study in Scarlet, Sherlock’s popularity became widespread with the first series of short stories in The Strand Magazine, beginning with "A Scandal in Bohemia" in 1891. This series eventually totalled to four novels and 56 short stories. All but one are set in the Victorian or Edwardian eras, between about 1880 and 1914. Most are narrated by the character of Holmes's friend and biographer Dr. John H. Watson, who usually accompanies Holmes during his investigations and often shares quarters with him at the address of 221B Baker Street, London, where many of the stories begin.

Although Sherlock isn’t the first fictional detective in stories, Holmes is arguably the best known. By the 1990s, there were already over 25,000 stage adaptations, films, television productions and publications featuring the detective, and the Guinness World Records even lists him as the most portrayed literary human character in all of film and television history.

Holmes's popularity hit an all time high to the fact that many belief him to be a real person and not just a fictional character in story books. Fans of the franchise helped create the modern practice of fandom. The character and stories have had a profound and lasting effect on mystery writing and popular culture as a whole, with the original tales as well as thousands written by authors other than Conan Doyle being adapted into stage and radio plays, television, films, video games, and other media for over one hundred years.

The inspiration behind Sherlock Holmes stemmed from Edgar Allan Poe's C. Auguste Dupin which is generally acknowledged as the first detective in fiction. Similarly, the stories of Émile Gaboriau's Monsieur Lecoq were extremely popular at the time Conan Doyle began writing Holmes, and Holmes's speech and behaviour sometimes follow that of Lecoq. Holmes and Watson discuss Dupin and Lecoq near the beginning of A Study in Scarlet.

Conan Doyle repeatedly said that Holmes was inspired by the real-life figure of Joseph Bell, a surgeon at the Royal Infirmary of Edinburgh, whom Conan Doyle met in 1877 and had worked for as a clerk. Like Holmes, Bell was noted for drawing broad conclusions from minute observations. However, he later wrote to Conan Doyle: "You are yourself Sherlock Holmes and well you know it". Sir Henry Littlejohn, Chair of Medical Jurisprudence at the University of Edinburgh Medical School, is also cited as an inspiration for Holmes. Littlejohn, who was also Police Surgeon and Medical Officer of Health in Edinburgh, provided Conan Doyle with a link between medical investigation and the detection of crime.

Watson describes Holmes as "bohemian" in his habits and lifestyle. Described to have a "cat-like" love of personal cleanliness, Holmes is an eccentric with no regard for standard tidiness. 

Watson describes him as

“in his personal habits one of the must untidy men that ever drove a fellow-lodger to distraction. [He] keeps his cigars in the coal-scuttle, his tobacco in the toe end of a Persian slipper, and his unanswered correspondence transfixed by a jack-knife into the very centre of his wooden mantelpiece. ... He had a horror of destroying documents.... Thus month after month his papers accumulated, until every corner of the room was stacked with bundles of manuscript which were on no account to be burned, and which could not be put away save by their owner.”

While Holmes can be dispassionate and cold, when pulled into an investigation, he is animated and excitable. He has a flair for showmanship, often keeping his methods and evidence hidden until the last possible moment so as to impress observers. 

Except for that of Watson, Holmes avoids casual company. In "The Gloria Scott", he tells the doctor that during two years at college he made only one friend: "I was never a very sociable fellow, Watson ... I never mixed much with the men of my year".

The detective goes without food at times of intense intellectual activity, believing that "the faculties become refined when you starve them."

Although Holmes is not the original fictional detective, his name has become synonymous with the role. Doyle's Sherlock Holmes stories introduced multiple literary devices that have become major conventions in detective fiction, such as the companion character who is not as clever as the detective and has solutions explained to him (thus informing the reader as well), as with Dr. Watson in the Holmes stories. Other conventions introduced by Doyle include the arch-criminal who is too clever for the official police to defeat, like Holmes's adversary Professor Moriarty, and the use of forensic science to solve cases.

The Sherlock Holmes stories established crime fiction as a respectable genre popular with readers of all backgrounds, and Doyle's success inspired many contemporary detective stories. Holmes influenced the creation of other "eccentric gentleman detective" characters, like Agatha Christie's fictional detective Hercule Poirot, introduced in 1920. 

The phrase "Elementary, my dear Watson" has become one of the most quoted and iconic aspects of the character. However, although Holmes often observes that his conclusions are "elementary", and occasionally calls Watson "my dear Watson", the phrase "Elementary, my dear Watson" is never uttered in any of the sixty stories by Conan Doyle. One of the nearest approximations of the phrase appears in "The Adventure of the Crooked Man" when Holmes explains a deduction: "'Excellent!' I cried. 'Elementary,' said he."

For the 1951 Festival of Britain, Holmes's living room was reconstructed as part of a Sherlock Holmes exhibition, with a collection of original material. After the festival, items were transferred to The Sherlock Holmes (a London pub) and the Conan Doyle collection housed in Lucens, Switzerland by the author's son, Adrian. Both exhibitions, each with a Baker Street sitting-room reconstruction, are open to the public.

In 1969, the Toronto Reference Library began a collection of materials related to Conan Doyle. Stored today in Room 221B, this vast collection is accessible to the public. Similarly, in 1974 the University of Minnesota founded a collection that is now "the world’s largest gathering of material related to Sherlock Holmes and his creator". Access is closed to the general public, but is occasionally open to tours.

In 1990, the Sherlock Holmes Museum opened on Baker Street in London. A private Conan Doyle collection is a permanent exhibit at the Portsmouth City Museum, where the author lived and worked as a physician.

Sources:

https://en.wikipedia.org/wiki/Sherlock_Holmes

[courtneyrobinson97]

IXD304

Researching website/content hierarchy

For this project, we’ve the option to create a digital website or a digital immersive ebook prototype. I’ve settled on the idea of creating a website as code and css are areas I want to strengthen and continue to work on as well as the fact i’m already creating an app prototype for my other main project.

The better your site structure, the better your chance of ranking higher in the search engines and for users to flow with ease throughout the entire website. Every website has some “structure.” It might be a rigorous and streamlined structure, or it may be a disorganised jumble of pages.

A good site structure means great user experience. When you take away the colours, fonts, kerning, graphics, images, and white space, good site design is really about a great structure.

The human mind craves cognitive equilibrium — being able to put pieces logically together, finding things where they’re expected, and locating what they are seeking. Thus, a strong and logical site structure is cognitively satisfying to users.

Generally, a site hierarchy looks like this:

There are a few hierarchy features that should be kept in mind.

Make your hierarchy logical. Don’t overthink or overcomplicate the process. You want simplicity, both for your own sake and for the ease of users. Each main category should be unique and distinct. Each subcategory should somehow relate to the main category under which it is located.

Keep the number of main categories between two and seven. Unless you’re Amazon.com, you don’t want to have too many main categories. There should be only a few main things. If you have more than seven, you may want to rethink the organisation and pare it down a bit.

Try to balance the number of subcategories within each category. Basically, try to keep it approximately even. If one main category has fourteen subcategories while another main category has only three subcategories, this could become a little unbalanced.

A site hierarchy is the beginning point for a great site structure.

Site structure is a product of careful thinking, intentional design, and accurate organisation. The best time to develop a strong site structure is before you create your site.

Images Source:

https://www.locallogy.com/what-is-content-hierarchy

Examples of Website/Content Hierarchy

[courtneyrobinson97]

IXD304

Gathering inspiration

https://www.pinterest.co.uk/courtneyrobinsondesigns/sherlock-holmes-research/

After my original mind map of my ideas, I created a pinterest board and started researching existing artwork based around Sherlock Holmes as I wanted to give myself a broader knowledge on the topic.

This varied from book cover, posters, movie advertisements, to just works of art that people had created from their own interest in the franchise. 

As you’ll be able to see from selecting the link provided, my inspiration varied between imagery and typographic examples as I wanted to cover all my options for styles that I could potentially copy and use in my prototype.

As I myself am a fan of the Sherlock BBC series, I rewatched a few episodes to jog my memory of how the characters are portrayed as well as some of the storylines to gather inspiration. This experience gave me further visual inspiration as well as helping me to decide I wanted to make my design approach based around the colour codes and structures used throughout the series as well as adapting this portrayal of Sherlock.

[courtneyrobinson97]

IXD304

Kicking off a new semester - Narrative and Storytelling

This semester, we kicked things off with Paul giving us a run through on what our project will be for the coming weeks. 

The main things we are to focus on for Narrative and Storytelling is the art direction for our project as well as pacing, enhancing content and making sure that the work we produce is designed to help unfold the content that will be provided like a story.  We want the experience to be fun for us as designers as well as easy for a user to follow from start to finish.

Keeping a weekly diary will help me keep up to date with my progress throughout this project as research is 40% of the module with the final prototype website being the other 60%. 

We were given the topic of our new project being Sherlock Holmes, Heros and Villains which immediately intrigued me as i’m a fan of the BBC Sherlock series and have always found the stories to be interesting as i love anything that involves mystery and clues. 

For the week ahead we have been told to work on gathering inspiration in order to come up with a solid idea that we can then start to design and build after we’ve been given the content next week. 

Before leaving class I did a rough mind map to show my original thoughts and ideas in relation to the topic given so that I could expand on these ideas from the research I gather. I’m originally liking the idea of an illustrative storytelling throughout my prototype but also including a game element that would keep the user intrigued from start to finish. An idea I had was to base some of my inspiration and research around the game Cluedo as I feel it strongly relates to the Sherlock concept.

[courtneyrobinson97]

IXD303

My presentation slide deck for my project so far

https://drive.google.com/open?id=1a39mpxCRJvZXWK1ADCOvEJSvnvJ-gxEv