Above is the opening page which provides the user with all the available functions of the web app, the flat design is simple yet engaging due to use of colour and image, through the use of colour coordination each page comes across individually which is a theme that features throughout the app. In feedback one peer commented that the square boxes are clever because they resemble a page themselves, comparing it to Windows 8 design which I highlighted as a influence. The main type choice 'Din' is used for the titling of each page available with Helvetica Neue being used to supply the user with information about each function for example 'See whats on' which gives the user a brief insight of what to expect on the following pages. Boxes with 'BALTIC EMAIL SIGN UP' and 'DONATE TO BALTIC NOW' can offer a link between the Baltic and the user as soon they open the web app, as the brief specified. One aim is to create a connection / link between the Baltic and its visitors, I believe offering them another service such as an email sign up is creating that link.
Above is the opening pages of the archive which lets users access the Baltic's online archive which stores every single exhibition and artist who have been involved with the Baltic. The design is simple again with white space allowing the images to be engaging. Form and function work together to create a page that is aesthetically pleasing yet useable for any age group.
Below are early developments that feature throughout the app as a form of navigation or style. Number 1 shows options being presented as a circle, this minimises space on the screen but also works well in a grid, the circles in this case are being used to show a list of the latest exhibitions. Number 2 shows a number of design components that I added in development, firstly the white circles which are used in digital design to show a showreel of in this case images. By using this it allows a number of images to be shown on one page without taking up room, as the images will be on a time loop which also creates engagement as the page will always be changing due to the images. The other development is the shadow on the image, I added shadows in development as they add a sense of importance to content along with an added depth to the compostions. I also believe shadows are a nice touch to a basic and stripped back design such as mine, as it brings the design more to life. The third development is the 'Burger button' originally the icon was just the three lines, but in development I added a circle and shadow to make the icon stand out more. The reasoning for this is that I learnt when moving elements around sometimes the colours would clash or the icons wouldn't be prominent for the viewer to see, so the addition of a circle and shadow instantly solved this problem.
Above shows more archive pages, the first is more the options page which provides the user with a selection of options. The archive icon is used to show a backlog of information, when designing the archive pages I needed to fully consider type size more because the amount of content on each page. From research I learnt 12px and 14px are the minimum sizes you can use in digital design, when experimenting with sizes it was clear that the 12px and 14px were essential to the layout of the pages as they allow larger copies of text on each page and when I tried using larger type such as 20px the text resembled titles and headers which didn't serve a purpose. In the pages above 14px Helvetica Neue is used for the titling of each archive page and 12px is used to give a brief descriptions of what to expect. In many cases I used the primary typeface Din to highlight more important information, seen on the page to right. Its set in 16px and in Din to signify importance and an opening to the page.
The page to the left is the scroll down page of the 'The Playground Project' page which I was previously talking about in the last paragraph. The white circle elements are used again to showcase a range of images of the exhibition, in this development design the social media element is introduced which will allow the user to share this archive page with others as a possible educational tool or just to inform people of what they've been up to while at the Baltic, this could lead to people being inspired or motivated to visit the Baltic. Once again the archive icons are used to offer more options about the specific exhibition, artwork or artist. While the user is using this page they are presented with options of other artists they may be interested in, this can create both enthusiasms and engagement for the visitor.
To the right is the 'burger button' icon in use, the colour coordination is used again subtly, initially the colour clashed with the background designs therefore I placed a 50% opacity box over the background to mute the page and allow the drop down menu be more prominent. The navigation icon is used to show another drop down menu, with this option being more specific which will enable the user to choose a specific page.
No comments:
Post a Comment