This project has been interesting. Although I would like to have learnt more about coding, I have learnt a lot more than I thought I would, mainly on my own using books. If I had more time I would like to have coded my website. I designed my website in a way that I don't think It would have been too hard to do. I am glad that during this project I have created work that didn't use vector based designs as I often do. The success of the watercolour photo editing has taught me that I should try other things before vectors. Skeuomorphism is something that I have not experimented with much, and this project has showed me that it can be used really effectively if done for the right reasons.
The knowledge of web safe fonts and colours will help me in future when designing for web. I found that a lot of people were designing their websites in illustrator of indesign. I initially started designing in Photoshop due to the capabilities of photoshop allowing me to edit my images to the Skeuomorphic style, but I found that I will design in photoshop for web in future as it allowed me to design at the correct PPI and the functionality of layers helped organise the way that my website worked.
Archive for November 2014
Studio Brief 3: Project Evaluation
Studio Brief 3: Final Web pages
The skeuomorphic design of the website is inspired by the book that I used during summer to document and record my research. The research has been recorded during my time working in a bar and is written in quite a formal manor. The watercolour styled photos were a way that I could keep the overall look of the website looking handrendered and slightly messy. The websites homepage is a full windowed image of a messy bartop with the book in centre. This sets the tone of the website instantly. The Homepage image stays static throughout the rest of the website with scrollable watercolour paper textured layer which my content rests ontop of. The navigation bar is designed to look like the tabs of a book to keep the skeuomorphic design consistent.
The website is seperated into 5 sections: Glasses, Equipment, Techniques, Garnishes and Cocktails. The websites is aimed at a wide audience range so has a simple layout, making it easy to navigate.
The navigation is made even easier with the consistency of content. Once the user has visited one page, they know to expect a title, short explination and then multiple examples with apropriate images to support them to the side. The homepage has is minimal with just an ‘enter’ button that is underlined when a mouse hovers over it. This hoverover will also apply to the tabs at the top of the website. The ‘Bartending 101’ title in the top left of the page also acts as a homebutton if needed.
Homepage
The homepage is a simple still of the book with an enter button.
The video below shows how the website would look and function in a web browser.
Studio Brief 3: Website Mock-ups
Here are some mock-up images of how my website would look inside a browser on a macbook pro.
Studio Brief 3: Coding Cheat Sheet
Basic Tags
<html></html> Creates an HTML document
<head></head> Sets off the title and other information that isn’t displayed on the web page itself
<body></body> Sets off the visible portion of the document
Body Attributes
<body bgcolor="pink"> Sets the background color, using name or hex value
<body text="black"> Sets the text color, using name or hex value
<body link="blue"> Sets the color of links, using name or hex value
<body vlink="#ff0000"> Sets the color of followed links, using name or hex value
<body alink="#00ff00"> Sets the color of links on click
<body ondragstart="return false" onselectstart="return false"> Disallows text selection with the mouse and keyboard
Text Tags
<pre></pre> Creates preformatted text
<hl></hl> Creates the largest headline
<h6></h6> Creates the smallest headline
<b></b> Creates bold text
<i></i> Creates italic text
<tt></tt> Creates teletype, or typewriter-style text
<cite></cite> Creates a citation, usually italic
<em></em> Emphasizes a word (with italic or bold)
<strong></strong> Emphasizes a word (with italic or bold)
<font size="3"></font> Sets size of font, from 1 to 7
<font color="green"></font> Sets font color, using name or hex value
Links
<a href="URL"></a> Creates a hyperlink
<a href="mailto:EMAIL"></a> Creates a mailto link
<a href="URL"><img src="URL"> </a> Creates an image/link
<a name="NAME"></a> Creates a target location within a document
<a href="#NAME"></a> Links to that target location from elsewhere in the document
Formatting
<p></p> Creates a new paragraph
<p align="left"> Aligns a paragraph to the left (default), right, or center.
<br> Inserts a line break
<blockquote></blockquote> Indents text from both sides
<dl></dl> Creates a definition list
<dt> Precedes each definition term
<dd> Precedes each definition
<ol></ol> Creates a numbered list
<ul></ul> Creates a bulleted list
<li></li> Precedes each list item, and adds a number or symbol depending upon the type of list selected
<div align="left"> A generic tag used to format large blocks of HTML, also used for stylesheets
<img src="name"> Adds an image
<img src="name" align="left"> Aligns an image: left, right, center; bottom, top, middle
<img src="name" border="1"> Sets size of border around an image
<hr /> Inserts a horizontal rule
<hr size="3" /> Sets size (height) of rule
<hr width="80%" /> Sets width of rule, in percentage or absolute value
<hr noshade /> Creates a rule without a shadow
Tables
<table></table> Creates a table
<tr></tr> Sets off each row in a table
<td></td> Sets off each cell in a row
<th></th> Sets off the table header (a normal cell with bold, centered text)
Table Attributes
<table border="1"> Sets width of border around table cells
<table cellspacing="1"> Sets amount of space between table cells
<table cellpadding="1"> Sets amount of space between a cell’s border and its contents
<table width="500" or "80%"> Sets width of table, in pixels or as a percentage of document width
<tr align="left"> or <td align="left"> Sets alignment for cell(s) (left, center, or right)
<tr valign="top"> or <td valign="top"> Sets vertical alignment for cell(s) (top, middle, or bottom)
<td colspan="2"> Sets number of columns a cell should span (default=1)
<td rowspan="4"> Sets number of rows a cell should span (default=1)
<td nowrap> Prevents the lines within a cell from being broken to fit
Frames
<frameset></frameset> Replaces the <body> tag in a frames document; can also be nested in other framesets
<frameset rows="value,value"> Defines the rows within a frameset, using number in pixels, or percentage of width
<frameset cols="value,value"> Defines the columns within a frameset, using number in pixels, or percentage of width
<frame> Defines a single frame — or region — within a frameset
<noframes></noframes> Defines what will appear on browsers that don’t support frames
Frames Attributes
<frame src="URL"> Specifies which HTML document should be displayed
<frame name="name"> Names the frame, or region, so it may be targeted by other frames
<frame marginwidth="value"> Defines the left and right margins for the frame; must be equal to or greater than 1
<frame marginheight="value"> Defines the top and bottom margins for the frame; must be equal to or greater than 1
<frame scrolling="value"> Sets whether the frame has a scrollbar; value may equal “yes,” “no,” or “auto.” The default, as in ordinary documents, is auto.
<frame noresize="noresize"> Prevents the user from resizing a frame
Forms
For functional forms, you’ll have to run a script. The HTML just creates the appearance of a form.
<form></form> Creates all forms
<select multiple name="NAME" size=?></select> Creates a scrolling menu. Size sets the number of menu items visible before you need to scroll.
<option> Sets off each menu item
<select name="NAME"></select> Creates a pulldown menu
<option> Sets off each menu item
<textarea name="NAME" cols=40 rows=8></textarea name> Creates a text box area. Columns set the width; rows set the height.
<input type="checkbox" name="NAME"> Creates a checkbox. Text follows tag.
<input type="radio" name="NAME" value="x"> Creates a radio button. Text follows tag
<input type="text" name="NAME" size=20> Creates a one-line text area. Size sets length, in characters.
<input type="submit" value="NAME"> Creates a Submit button
<button type="submit">Submit</button> Creates an actual button that is clicked
<input type="image" border=0 name="NAME" src="name.gif"> Creates a Submit button using an image
<input type="reset"> Creates a Reset button
Study Task 9:Search Engine Optimization
What is SEO?
Search engines use algorithms to assess the suitability and ranking of websites based on search items. Algorithms are diferent for each search engine and are frequently updated to have new and improved results.
Search engine optimisation is the way that we can use what we know about search engines to make our website more likely to show up to the correct audience, using keywords and phrases. There are many ways to improve the SEO of a website.
The video below is a great explanation of SEO
How to improve my websites SEO
Use key words:
Cocktail
Drink
Recipe
etc...
Use headers and Sub Headers
Optimise the website for mobile
Make the website load quickly
Make sure the content is of a high quality
Studio Brief 3: Visual Style
Now that I have decided the overall theme and concept of my website I can begin designing. As the overall look of the website has to keep in tone with the informal content I have chosen to edit all my photos into a style which resembles watercolours. I believe this style keeps in tone with the theme of liquid and has a messy yet nice look.
I have used this photoshop technique to edit my original research photos into watercolour illustrations that would be seen in a notebook. By not continuing the effect all the way to the boarder of the photo it increases the skuemorphic qualities.
My intentions for the website are to make everything on the website look hand rendered.
Studio Brief 3: Website Scale
Halfway through designing my website I opened the file up as a jpeg in safari to get a sense of how it would look. I soon realised that I had not considered the scale that the website should be seen at. I started from scratch, using photoshop to keep the 72PPI consistent and then changed the scale to one that read and worked better with the navigation.
Before:
After:
Responsive Seminar: Working with briefs
Initial Idea Generation
The creative Chalenge
Target Audience: 13-18 year olds - getting smart phones for the first time, they have ready access to a tablet - even if its through school and need an email for social media services.
Do ensure that your idea works across all popular media platforms.
Put simple classic engagement over heavy tech intensive work
What is Yahoos biggest issue/problem?
Yahoo isn't google
We began by looking at the Yahoo homepage to see why it would not appeal to the 13-18 year old target audience for this project. We found that the home page is very cluttered and has lots of writing, information and categories that we thought were unnecessary or did not want to read up about.
We decided to propose a redesign and re-purpose of Yahoo. Most 13-18year olds would quit Yahoo within 3 seconds because of the style of it. It looks a bit dated and dull. We propose a minimal, interactive design which allows the user to choose which content is available on the front page. This concept would be integrated with popular social media websites (Facebook, twitter, instagram) so as to appeal to the target audience in another way. The idea is that the user can choose what category of information is shown in each of the designated boxes (sports, news, social, film). The front box would show highlights or the content available if clicked onto the box.
We settled on a panel system which allows the users to scroll the categories vertically and swipe the content within the categories by swiping left and right. The user can simply click on the box to expand it within the window.
We even considered how this could move outside of the computer and phone platform and into the streets. Short news bursts could be displayed on escalator advertisement
Web development
Having decided on a concept for my website I began looking at the diferent ways that the user could navigate the pages.
My original idea below has a fixed background and navigation bar to allow the users to navigate to anywhere on the website at all times. My only issue with this idea is that it causes the page to be quite narrow and I won't be able to fit much content on screen at one time.
Alternatively I could continue with the book concept and place my content in book format on a double page spread. I don't like this idea, as it splits the page up too much and may be confusing to some visitors to the site.
Alternatively I could place the navigation buttons on the side of the double page spreads to take up less space on the pages.
