kyledowsettkib204-blog-blog
kyledowsettkib204-blog-blog
Web Interface Design
16 posts
Kyle Dowsett n7137788
Don't wanna be here? Send us removal request.
kyledowsettkib204-blog-blog · 11 years ago
Text
Concept Development
0 notes
kyledowsettkib204-blog-blog · 11 years ago
Text
UI Inspiration
builtbybuffalo.com
This is a fantastic example of a minimalistic apprach to a UI. I really enjoy how the vast white spaces contrast and make the few colours really pop! The font is sleek and easy to read. The whole page looks neat and presentable.
Tumblr media
0 notes
kyledowsettkib204-blog-blog · 11 years ago
Photo
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
 common graphic elements for Vintage and Retro designs are:
illustrations from old posters, movies, newspapers, CDs, vinyls, ads
old-style typography (e.g. Roman typefaces)
script fonts and handwriting
old radio devices
old TV devices
old cars
old packaging
old photos
vibrant rainbow colors (high contrast, neon-style)
torn, used paper with stains (often yellowish paper)
dark, dirty colors (brown, dark red, dark blue) and textures (e.g. paper)
scrapbooks
pop-art elements
retro illustrations
old-style signs
0 notes
kyledowsettkib204-blog-blog · 11 years ago
Text
User Interface Trends: Retro & Vintage Design
Retro and vintage are becoming a new trend. Once rarely used in this robust, dynamic medium, early, retro and vintage elements are now becoming more and more popular in a variety of design contexts. Online shops, corporate designs, portfolios and blogs incorporate both styles on a small and large scale. When applying “old-style” elements to their works, designers produce creative and appealing designs that make their websites stand out and look really different. As a matter of fact, if executed carefully, such designs almost never look boring, although one might intuitively think that the opposite would be the case.
Retro and vintage designs exhibit graphic solutions that are strongly influenced by the time period that they are supposed to represent. While retro focuses on the style of the 1910s to 1930s, vintage recalls the time period between the 1950s and 1980s. In both cases, design elementsreflect some old-fashioned motifs, trends, personalities and objects that had been an essential part of our lives in the past.
Such elements create a nostalgic atmosphere, awaken feelings and memories and attempt to communicate information effectively using emotions. Some such designs make use of so-called “classical conditioning” — a technique used to associate a stimulus with an unconscious physical or emotional response.
Resources
99designs.com
creativebloq.com
goodui.org
daringfireball.net
0 notes
kyledowsettkib204-blog-blog · 11 years ago
Text
User Interface Trends: Skeuomorphism
A skeuomorph is “an object or feature which imitates the design of a similar artefact in another material”. This isn’t just limited to user interface design; In the physical world, we find them all around us too. Lightbulbs shaped like the flame from a candle, marble or wood grain patterns printed on linoleum, those useless tiny handles you find on some bottles of maple syrup. Things that are ornamental.
So what’s skeuomorphism then’ Aside from being one of the hottest subjects for tech bloggers to write about, skeuomorphism - or a skeuomorphic UI - refers to the overall graphical style of an interface. If done right, things look and behave the same way as the real-life object they are based upon.
What about that other word’ Simulacra. This is something that refers to the likeness or similarity of a real object, but behaves in a different way. This what we commonly see in today’s user interfaces when skeuomorphism is implemented into a design badly - or incorrectly.
Whether it’s decorated in a linen or paper texture or not, there’s guaranteed to be at least one skeuomorphic element in every single app. It’s something that can’t be avoided. Seemingly simple elements such as buttons and sliders are all skeuomorphic. Even things that aren’t visual like the fake camera shutter sound when taking a photo in Camera or Photo Booth give you that reassuring confirmation that you’ve taken your photo. It’s this kind of comfort that can make skeuomorphism a valuable part of an application’s design
Resources
99designs.com
creativebloq.com
goodui.org
daringfireball.net
0 notes
kyledowsettkib204-blog-blog · 11 years ago
Photo
Tumblr media Tumblr media Tumblr media Tumblr media
examples of skeuomorphism: User interfaces designed to look like real objects.
0 notes
kyledowsettkib204-blog-blog · 11 years ago
Text
User Interface Trends: Minimalist & Flat
After  many years of complex and intricate designs, user interface design is back peddling and returning to basics. Well known companies, such as Microsoft and Google are now adopting this aesthetic, with countless others following.
Glossy icons are substituted by simpler one-color versions or text-based buttons, rich gradient with simple solid color combinations.  Minimalistic interfaces are definitely taking off.
Stripped-down navigation is a trend that looks set to grow in popularity. Partly influenced by the need to design condensed navigation for mobile, There is a lot more focus on icons, rolldowns, and navigation that shrinks as you start to scroll down the page. It's an intelligent, well thought out UI design, it is undeniably slick and extremely usable.
Resources
99designs.com
creativebloq.com
goodui.org
0 notes
kyledowsettkib204-blog-blog · 11 years ago
Photo
Tumblr media Tumblr media
Minimalistic UI's are definitely becoming wildly popular.
Top: Windows 8 uses monochromatic icons and simple solid colors for its new interface.
Bottom: Pinterest UI takes on the ultimate minimalism approach – aside from the user content, very few things occupy space on the screen.
0 notes
kyledowsettkib204-blog-blog · 11 years ago
Photo
Tumblr media Tumblr media
Mount Lawley Pets & Puppies UI
0 notes
kyledowsettkib204-blog-blog · 11 years ago
Text
Competing Work Analysis 3: Mount Lawley Pets & Puppies
mountlawleypetsandpuppies.com.au
This third example is of Mount Lawley Pets & Puppies website. The websites stand out features are its flashing, slide show of adorable puppy pictures which draws the user in, and its bold, striking colours that contrast the white space.  Overcrowded with information that would have the users scroll finger cramping. When clicking to other pages from the navigation bar situated on the left, one notices that there is not much structure to where the images are being placed with accompanying text. The layout of the website is based on the centre column but not all the information fits neatly into it and seems a bit chaotic. The website overall has a lot of white space. There is not much structure with the font and paragraphs.
0 notes
kyledowsettkib204-blog-blog · 11 years ago
Photo
Tumblr media
Paws & Claws Website Architecture
0 notes
kyledowsettkib204-blog-blog · 11 years ago
Photo
Tumblr media Tumblr media
PuppyWorld UI
0 notes
kyledowsettkib204-blog-blog · 11 years ago
Text
Competing Work Analysis 2: Puppy World Pet Shop
puppyworldpetshop.com.au
The second example of a pet adoption interface is the smaller scale, Puppy World. First impressions of the site are that its cluttered with bright colours, pictures and text. The bright magenta heading is harsh on the eyes and makes the website look very dated. The website favours a centred column layout with all its information and pictures displayed in the middle. The navigation bar is situated to the left even though everything else is centred. There is an unnecessary tab on the navigation bar leading to a "Contact Us" page when all the contact information is already displayed in the header and footer. There is also an "about Puppyworld" paragraph on the home page which makes the "About Us" page  obsolete. The user can't see the puppies available for adoption on the website. Instead a link to another website is displayed. There is no mobile or tablet adaption of this website.
Overall the colour scheme of the website is too harsh and mismatched. The layout isn't consistent, there is unnecessary clutter. The font is small and plain. The user can't even view available puppies for adoption. I think this is a bad user interface example.
0 notes
kyledowsettkib204-blog-blog · 11 years ago
Photo
Tumblr media Tumblr media
Adoptapet.com.au  UI
0 notes
kyledowsettkib204-blog-blog · 11 years ago
Text
Competing Work Analysis 1: Adoptapet.com.au
adoptapet.com.au
For this unit we are required to develop and implement an aesthetically pleasing, web interface design, based on a chosen topic for use across platforms. I have chosen to design and implement a web product that supports the theme of, 'Adopting a Pet'. I will be analysing some already existing interfaces that are aimed at adopting pets so as to get a further understanding of what is required and what I can improve on in my own design.
The first example I will be looking at is the RSPCA Adopt a pet website. RSPCA is perhaps one of the leading contenders in Australian pet adoption. Their website implements a grid design layout with boxes of information and pictures. The users eye is drawn to the centre of the interface by the varied, coloured boxes that highlight the different types of pets available for adoption. The soft colours of the boxes compliment the images of baby animals within them. The navigation bar is positioned on the left side in a grey box, listing the different pages you can be redirected to. The font is a quite small and positioned quite close together which looks a little condensed. After selected a type of pet you want to adopt, you are led to a somewhat more bland screen that has a lot of white space, text and drop-down menus. There is no mobile adaption for the website.
Overall the RSPCA Adopt A Pet website is fun and friendly. The website is relatively easy to maneuver around, but doesn't stay consistent with the grid type layout or colour scheme. 
0 notes
kyledowsettkib204-blog-blog · 11 years ago
Link
Great Vintage UI themes
0 notes