These are my final designs based upon my research and wireframing stages. These were vital for creating a relevant website that met the brief, I have to tried to use the design techniques employed in the Spotify Year of Music site, to bring mobile web experience to the desktop to create a similarity throughout the devices, you will see all of the designs below for all mobile, tablet and desktop.
DESKTOP
TABLET
MOBILE
I decided for my business card, I wanted to create something that would portray what I do much like the ones in my research (https://akbrodie.wordpress.com/2014/12/21/business-card-research/). I decided to create a laptop which had google’s search engine open looking for a local web designer. First I went about designing the laptop complete with keyboard and touchpad, next I added my logo on the front upside down like on the macbook range so that it can be seen the right way up from people looking at it. Something worth noting here is that created the word “Found” using the same typeface and colours as google to give it that recognisable feel, but avoided advertising them on my business card. You can see this mockup here;
After printing this version out I decided to turn the logo the right way up because the business card is all about the user experience. I also removed the details from the back of the card to ensure a clean look which is more appropriate for the ‘luxury’ styled branding I wanted to achieve. I also used google search to directly impact the design stage and here how I have used the same colour and style on my card;
– I must note here the reason for the circle shape ate the bottom is a line for me to cut out when it is printed so that you can lift the screen up. If you look carefully, I have also tried to avoid putting across the idea that there are other competitors, so underneath me at the top there are a few other ‘designers’ which are completely made up with names and descriptions that make them sound really bad. I have also faded them out the lower down you go so that the main impact was my details. The only way this card looks different to the real thing is the fact that it has an arrow and my telephone number to the side.
Below you Can see the different versions I printed out with the first on the left, you can see both outside and inside, the physical changes I made to the design.
I read the book “Making and Breaking the Grid” by Timothy Samara so that I had a better understanding of grids in general. There are many many uses for grids and layouts and I will be able to implement what I have learn’t in this book into almost every aspect of my work.
There is a massive history of grids that date right back to the Romans and Greeks, and whilst this isn’t completely relevant it allows us to understand where the grids came from and how they became what we know and use today.
Early uses of grids were used in architecture to get the correct proportions, which then moved on to design furnishing and everyday household objects, and then into print. In print, grids were used to give structure to a document both visually and spatially. Every grid is split into different sections, these are margins, flow lines, spatial zones, markers, modules and columns. You can see a diagram of what each section represents here;
Using different combinations of these sections is what makes every grid slightly different to the other, for example if you have maybe 3 columns with a smaller line length surrounded by large margins and spatial zones, you would have a easily readable page rather than having just one column with a longer line length with smaller margins and spacial zones which would make it much harder to dread and take in. Something to take into consideration due to it’s importance is not only the typeface you use but some of the attributes like size, line height and letter spacing.
Manuscript, Column, Modular and Hierarchical are the four main types of grid, of course there are variations within these categories but they are different enough to understand they have their own use and purpose.
The manuscript grid is the simplest of the four as it’s structure is designed to accommodate large amounts of text so can be seen in textbooks most commonly, it is also the same structure that is used for writing essays. It doesn’t even have to just consist of text though, images can be used to implement space into the text to give the eye a rest of reading.
The column grid is probably the most common because of it’s functionality in wide range of aspects, both images and text can be placed within a column grid, and you find that there is a large history of this style of grid in newspapers and magazines and this has seemingly been transferred to the web with such templates as the 960 grid:
This grid allows for up to 12 columns on a page, which allows the designer to have much more control over the layout of the page.
A modular grid is very much similar to a column grid but different in the sense that it also has horizontal flow lines which divide the page into columns into modules. A group of modules can be put together to create spacial zones, which can be allocated different content in a way of having an overall order.
The hierarchical grid is the last of of the four, it is probably less commonly used grids too. It works much less systematically based on the fact that the elements have their own constrains so they are arranged in such a way they look right on the page but the layout probably wouldn’t work for any other purpose. By using spacing and equal margins you can make elements that are somewhat unorganised become arranged in a presentable manner, you usually this type of layout within posters.
Sony’s ‘Be Moved’ campaign main focus is to allow users to look deeper into the products they create and the teams that work in them. They created an elaborate website with a fully immersive user experience using parallax scrolling, which is where the foreground images move faster than the ones in the background. This method of having separate layers within a page and manipulating the size and the speed they move you can create a sense of depth.
The method of having images and text moving alongside each other and flowing in front of and behind each other looks like something that would be somewhat of a nightmare should it be attempted using code.
The website is complete with animations of shattering glass, assembling of products and visual scenes of underwater, forests and the universe. It looks very professional and an extreme version of a parallax scrolling site, at first glances this website seems extremely complicated to build, but doing a bit of research I came to the understanding that it was much more simple than how I’d imagined.
By creating a video sequence that lasts 1306 frames and allowing the user to flick between the frames by scrolling is essentially all that is needed to create a website as creative and professional looking as this one. It then creates a website that looks like nothing else on the market as it would be extremely difficult if not impossible to create the movement of some of the objects in 3D space with just normal code. Looking at the code;
the .frameloads is a function that makes the display move on the the next image when thhe user scrolls, and the small_256,small_512 and large_960 are for the different size images for the different sized displays.
As you can see it is very visually appealing, the textures and layers just create this completely immersive experience for the user, telling the story of how they engineer and design together.
References
http://subtlepatterns.com/thumbnail-view/page/16/
http://discover.store.sony.com/be-moved/
https://ihatetomatoes.net/sonys-be-moved-website-deconstructed/
A website is designed to be a centre of information for businesses, indivuals and marketing purposes. Mostly websites are there top create action from the user, whether thats to purchase, share information, visit their pysical store or even use the service they provide. It must become easier for users to understand how a website works and how to use it. This will be done by making sites like their print counterparts by using full advantage of the technology that is available. Becoming interactive, using sharing for easy marketing and pageless designs for simplistic use. Many people try to second guess what the market is doing but given I am studying a three year course not only do I need to stay current and research what media is doing now, but by the time I finish my course some of the design elements will be dated and looked down upon. Therefore it is vital that I constantly try and work out where the Internet is heading, and use that to my advantage to create work that incomparable to anything else that is available at the moment. Audiences loose interest very easily and the average attention span is on average 7-10 minutes, online users spend a lot less time and will simple move on to the next site if they do not find the information they are looking for. People do not want to spend time reading a lot of information of a website and a 2013 study carried out by The National Center for Biotechnology Information, U.S. National Library of Medicine, The Associated Press discovered that users won’t read all the text regardless how many words A website that contains less than 111 words the user will read 49% of the text on average, this is a moderately small ammount of text in comparison to the average webpage that contains about 600 words on average, the user usually only then read about 28% of the text and then spend a further 4 seconds for 100 words on a page. This indicates that webites are doing themselves a disservice by creating a page with lots of text. Through other research I have conducted tht is available on my blog, white space with less text is key. While our attention span last for about 7-10 minutes on average, you can guve users a ‘break’ from your content, allowing their attention span to ‘reset’. While you don’t want users to take a break from your site, it might be easier and more intuitive to include a form of break on the site. In terms of being in a presentation where you address your audience pysically, you can ask questions, do something interactive, tell stories or move on to a new topic. While some of this is an alien concept to using a website, I think that taking advantage of the information I have just researched and implementing it in a site in a new, user-friendl way may capture the audiences attention for longer periods of time. Another interesting and key factor in creating a website would be to allow users to understand the website as soon as they visit the site without scrolling or clicking anything, ‘Above tthe fold’ is a phrase used for the area that users see before they scroll. Jakob Neilsen noted in 2006 that 77% of users do not scroll on a website and only 22% actually reach the bottom, this means something is going wrong with current design of websites. It would be considered important, given the facts, that summary of the page and its contents is provided above the fold. Benifits of pageless websites are that they can created with responsive or adaptive formatting meaning they’re much easier to use on a range of different devices. They are less common and leave a better impression on the user, making it something thy will want to share through word of mouth. Tell a story,, following a timeline down of a ficticious character that needs his/her roof fixing. water drop starts leaking through the roof, follow the waterdrop through the house, following the steps as you go, explaining the services. A visual journey that takes the user from the problem to the solution.
References:
http://www.dtelepathy.com/blog/design/8-reasons-why-pageless-design-is-the-future-of-the-web
http://www.statisticbrain.com/attention-span-statistics/
http://www.mrmediatraining.com/2012/08/23/how-many-minutes-is-the-audiences-attention-span/
http://en.wikipedia.org/wiki/Above_the_fold http://firstresponsive.com/pageless-design-future-web-design/
http://www.google.com/nexus/5/ http://www.sequence.co.uk/media/278589/fowd.jpg
My brief is to create a logo, this logo is going to represent me as a student, the work that I produce, something I will be able to use to brand my work as my own and become instantly recognisable to the people who view it. With little knowledge of branding, I plan to study and revise key concepts that will affect my final design.
Initial thoughts on my logo are that I want it to be based upon the name “BRODIE” so it is instantly recognisable as my own, it should be somewhat relatable to a computer or the web as i am a web designer. I have written these initial thoughts before I start my research so that you can see how my ideas develop after I have researched further into the world of branding.
akbrodie.wordpress.com 
