HANNAH SCHULTZ & CHRISTIAN GOULD
BROUGHT TO YOU BY
HANNAH & CHRISTIAN
TABLE OF CONTENTS Application Purpose & Scope Objectives Target Market Competitor Analysis Key Design Lessons Design Justification Wire Frames Colour Mockups Libraries Used Proposed Application Design Recommendations & Summary Revision History Time Log Self Assessment
APPLICATION PURPOSE & SCOPE
Stereotypically memes are found in relation to current social, political or cultural trends. Memes influences have increased with the relevant uptake in Internet access and use. Social networking sites are typical of this, and provide a platform where the Millennial generation are able to easily share and discuss content. More specifically the initial uptake of a meme will become popular in a small group of users, which are most often university students. Content is then easily spread throughout this tight-knit community and therefore develop into popular meme culture. The background or general themes of memes revolve around humor or satire and are a platform for expression and entertainment for Millennial. According to Bermel, (2013) “Memes have become an important forum for airing views – and inspiring discussion�. The Millennial demographic is typically interested in new and innovative ways in which they consume their media and are typically found within the early adopters, which means they are more susceptible to new products and trying them out. This platform provides users with the ability to see and create memes like never before. The purpose of this site is to entertain, whilst providing a product result, and to extend onto popular social media platforms. Meme Me allows users to engage in a whole level of memeiness and provide a platform with unlimited meme creations.
OBJECTIVES
1.
To entertain – pick your mood, generate a meme, save of
2.
To provide a uniqueness to memeing – no one meme will be
3. 4. 5.
share online to enjoy with friends
the same, randomization has never been memeier To provide clean and simple web design for customisation purposes – is easy to use, clean modern web design, new memes to cater for users particular mood in the To reach the media – content (even branding) will be shared online through social media after creation To reach a highly desirable demographic through common product that has been revamped and improved
TARGET MARKET: PRIMARY USER 60% GENDER Both Male & Female
AGE 18-25
QUALIFICATION Students, part time / full time work
COMPUTER LITERACY Above average
EDUCATION Tertiary, Under Graduate / Post Graduate
OCCUPATION Students
RESIDENCE Australia
MILLENNIALS
OBJECTIVES: This user group will most likely consist of Millennials currently studying in university, that are looking for entertainment outlets, self expression, communication and amusement to enjoy in spare time. These users are particularly tech savvy, spend most of their time online or through social networking sites.
EXPECTATIONS: Users are looking for a platform to use for entertainment purposes, in relation to meme products. Currently the market for meme generators is flooded most sites following the same sequences for the design process and construction. The site itself will be designed in a manner that does not take away from the user’s experience, and is clean and simple to use. This user will also have the ability to access this across devices. According to recent statistics, 80% of Millennials are use mobiles as their main device choice to access media and entertainment. Research also states that Millennials are focused around user experience, this means that load time, navigation and the overall look and feel of the page’s design is most important. On mobile device users will access the page, select their particular mood or ‘most applicable’ feeling at the time before beginning. After selecting one of these icons or buttons, a randomly generated meme will appear and based on that user’s category selection, reflect those feelings. After this the user is then able to use this meme and share amongst friends most likely through Facebook or Instagram platforms due to the image based content they provide as a platform. They will most likely be in school or uni a computer or mobile device when accessing this platform due to their typical consumption patterns. The Millennials are typically after new and innovative designs, our product being so unique in this market allows this demographic to engage and share with friends more rapidly.
TARGET MARKET: SECONDARY USER 40% GENDER Both Male & Female
AGE 14-18
QUALIFICATION Students full time, part time work
COMPUTER LITERACY Above average
EDUCATION Secondary
OCCUPATION Student
RESIDENCE Australia
GENERATION Z
OBJECTIVES: This user is very similar to the primary target in terms of use and expectations. However, this demographic is younger in age, still in school full time (grades 7-12) who are looking for entertainment. They will most likely spend less time, and are much portion of the user demographic. This type of user prefers to use the internet for online graphics and media and typically use social orientated sites.
EXPECTATIONS: This type of user will also be looking for a platform for entertainment purposes. This particular medium is suited to their lifestyle, and will most likely use both mobile and desktop versions of this site. As a whole in comparison to the primary target this user will spend less time on this site, become easily frustrated and are impatient. According to research teenagers have reduced reading levels, overconfident and require overly simple web design (Nielson and Norman Group, 2015). It is for these reasons layout and user experience or process is basic and clear in design. This user will most likely enter the website, enter their mood, generate their meme and save or share their image. After this process this user will either leave this site or enter social media links for the company page. This particular user is very self orientated and until they visit the page numerous times they are unlikely to want to connect with the brand itself until a trustworthy relationship has been built. This type of user will most likely access this platform whilst at home or during school through mobile and desktop devices. Being able to share with friends and post image related content will be an important attribute that will appeal to this demographic.
COMPETITOR ANALYSIS: COMPETITIVE REVIEW http://memegenerator.net/
1.
Overall Meme Generator utilizes a simplistic design with monochromatic colour and basic navigation bar design. The landing page remains consistent with layout with the rest of the pages. Key headings were determined for the site including a ‘meme images’, ‘meme characters’, create’, ‘forum’, ‘blog’ and ‘login’. Layouts utilize a grid gallery design to search for images and themes. This generator utilizes a basic design and layout however advertisements frequently appear which interferes with the user’s overall experience. In mobile version the site reduces in complexity and page options (‘home’, ‘memes’, ‘search’). The load time lags for about 5 full seconds per page in mobile version. After creating your meme the user has the option to share through social media, unless the user has an account where they can save their images. Overall this page is basic in design and user experience, utilizes an input form for creating memes so all text must be original.
COMPETITOR ANALYSIS: COMPETITIVE REVIEW http://www.mememaker.net/
2.
This website uses a simplistic minimalist approach to its overall design and layout. The homepage provides a brief description and purpose of the website. Its design and features remain very basic and consistent with the purpose of the previous competitor. The user has access to a library of memes, where only the text is customizable. There is not real consideration for user experience within the overall design or function of this website. However, it serves its purpose and allows users to share their creations through social media links. Users also have the ability to sift through other user’s creations and visit a ‘trending’ section to see which memes are most popular.
COMPETITOR ANALYSIS: COMPETITIVE REVIEW https://www.michaelfogleman.com/imeme/
3.
This website uses a mac or pc specific plug in that is downloadable. Once downloaded the application is opened up, a library source list is placed on the left hand side of the interface. Users go through the process of creating memes using built in templates or original images with a header and footer input form. The user is able to customize their memes in a much more personal way through this particular platform. The overall user experience is simplistic and basic in design, having only one page that the user interacts with. Common computer icons have been used in the navigation section of the page. When the user is finished with designing they are able to print, save or directly copy from this platform. There are no direct links to social media or sharing options. After downloading the application runs through a native program therefore load time is irrelevant and designs are instantly created. When using on mobile the application is not incompatible and no iOS or Android application has been developed.
COMPETITOR: MEME GENERATOR
MOBILE / DESKTOP
COLOUR A dark grey has been used for the header where the navigation bar text is displayed in a white font. Two of the page headings have been displayed in a yellow and green colour (reasoning for this is unknown, perhaps they wanted to draw users to these two tabs initially). The body of the website remains white and consistent across all pages. The gallery grids use a change of colour to differentiate hierarchy between the two captions bellow each image.
FONT Each page utilizes the same sans serif family but with variance in size and colour. The landing page utilizes a banner image that is randomized each load and uses a capitalized font. Main headings use the same font in lower case but in the largest size, followed by a size 12 body text again using the same font.
CONTRAST Contrast can be found in the header of the website with the logo and navigation bar titles. A dark grey and white is consistently used throughout the site to create this contrast. This has also been repeated for the mobile version of the site as well. The orange used in the subheadings or captions of the gallery grid contrasts with the white background. These high contrast areas are key focal points for the user and draws the eye in.
COMPETITOR: MEME GENERATOR REPETITION & UNITY The placement of the sites logo, header, navigation bar, headings, subheadings, font, colour, placements remain consistent for every page. A grid gallery has also been utilized in two of the pages, for a library search set up and remains consistent on both. A search bar can be found on each of the pages, consistently placed.
ALIGNMENT The navigation and logo placement is consistent with the F pattern theory. Headings, subheadings, body text and image captions are all left margins throughout each page. In mobile version the logo is removed, the title, navigation bar, headings, subheadings, body text and image captions become justified. This is common practice for mobile design due to the screen size. Content has been simplified and suits this alignment.
PROXIMITY Navigation bar titles are evenly space along the header with a large enough gap between the logo and the titles to differentiate the list. There is also an adequate amount of spacing between the navigation bar header and then image banner used on the home page so that the users eye is able to travel easily and take break in between content. The spacing between headings and body text is close to indicate the ownership of each section but remains legible and easy to flow through. The gaps between the grid of images is evenly spaced and spread across the page. This makes it easy to differentiate between each image and allow the eye to follow through the gallery itself. The mobile version of this site uses a scroll system for the galleries similar to ‘Instagram’ or ‘Facebook’ mobile.
COMPETITOR: MEME GENERATOR
INPUT INTERFACE The website builds on known behaviors for desktop, left and right mouse clicks to access pages, input forms, and share buttons. The cognitive load required to use this site is minimal, navigation bars are straight forward and informative. The banner and pop up ads however increase levels of clutter on the site. The changes in colour within the navigation bar show an idea of affordance where yellow and green suggest these buttons are the most important and should be clicked. The input sections where users customize the text in the memes also afford the idea that users should enter information. A hover effect has been used for the desktop version of the website where the navigation bar once hovered over transforms into a button design. This helps the user recognize that they should click or interact. This website has set the order of their navigation to follow the logical order of making the meme itself.
INPUT INTERFACE The overall website was found to not be elastic in design but there was a mobile version. The mobile versions design was reduced to a very simplistic layout. Some of the key design patterns include navigation, where they have utilized a search bar for users to find specific memes. There home page design pattern however is bombarded with ads and does not portray a strong sense of trust. The banner image detracts and clutters the overall design of this landing page, which takes away from the purpose and signposting opportunities for the ‘product’. There content pages or creation pages do however display a call to action of some form with buttons stating ‘generate meme now’ or share to social media buttons. The menu in both desktop and mobile remained static, hover effects only on the desktop version.
COMPETITOR: MEME MAKER
MOBILE / DESKTOP
COLOUR A monochromatic colour scheme with variations of greys has been utilized throughout each page’s design. This palette of grey has then been contrasted with white font or a white background. Colours have also been used to differentiate between headings and subheadings, as well as navigation headings. A change in colour through a hover function over the navigation bar titles has also been utilized. A pop of colour has been used on the search bar ‘Q’ to create a high contrast and direct the user’s attention to the tool.
FONT Two font families have been utilized through the entire website. Both fonts are San serif and variances in size and colour have been used to differentiate hierarchies and structures throughout each page’s design. Captions of images used in the gallery sections use an underline with text to signify hyperlink (click here) to the user.
CONTRAST The main use of contrast can be seen with the colour palette choices for the overall page’s design. Combinations of dark greys, light greys and whites contrast nicely and still maintain a clean simplistic design. Because a gallery of images is utilized throughout numerous pages a white background contrasts effectively with the content that allows the eye to easily follow through each image with the breaks of white allowing the eye to rest. On the left hand side of each page social media link icons have been used. The bright colours for each icon contrast effectively with the white background.
COMPETITOR: MEME GENERATOR REPETITION & UNITY Visual consistency has been created with the placement and layout of items such as the header, navigation bar, titles, subheadings, body text and search bar. Each page has also maintained the colour palette and placement of social media icons. This consistency enables users to easily navigate and access information through the interface.
ALIGNMENT & PROXIMITY The overall alignment of navigation bar heading, titles and body text follow the F pattern rule. The alignment of the header is positioned with a left margin, titles of pages spread consistently across. Body text on the home page has also been positioned with the same margin setting. Headings and subheadings have been centered with text boxes to establish hierarchy. Galleries have evenly distributed images in a grid pattern, with breaks in between each image. The headings are sufficiently spaced to signify ownership of the body of text or gallery. Captions have also been distributed underneath each image with sufficient spacing and are justified. Overall the alignment on both desktop and mobile remain void of the golden tri theories.
PROXIMITY The proximity of each title in the heading suggest different pages and the placement within the coloured heading also suggests hierarchy and differentiates between normal content. Each heading and caption is placed appropriately to suggest connection or reference to that item or image. In mobile version text and images become displaced and overlap other items, the legibility of the content is lost. In desktop mode and window size is adjusted content is moved and realigned in a manner that is still legible and items are space appropriately.
COMPETITOR: MEME GENERATOR INPUT INTERFACE Users are required to use mouse clicks, scrolls and buttons to use site and create meme. The overall experience whilst creating a meme is very basic and although customizable text could be improved. The mobile version of this site is unusable as text is too small and content became cluttered and overlapped. No consideration has been given for the mobile user experience. Input forms have utilised to enter information to create memes, these sections are simple and minimal so the user can easily comprehend and participate in the creation process. Consideration has also been given for the ability to share content through social media platforms. The cognitive effort required to use this site is minimal as titles, layout and inputs are easily accessed and comprehended as they are consistent with common web design. Hyperlinks found underneath images insinuate click through ability and meme examples are displayed throughout pages to demonstrate the product outcome to users. Hover effects used in the navigation suggests to users that this particular title is clickable and affords that the button should be clicked. The input forms effectively afford that text can be placed to create memes. Generate buttons bellow the meme creation have shadow effect which suggest lifelikeness of a real button. The user expects that this button is ‘clickable’ and is then able to ‘generate’ their meme as expected.
OUTPUT INTERFACE This particular site was elastic and adjusted through a desktop platform, however when used on a mobile device was not compatible. Content became misplaced and too small, and was found to be unusable through devices alternate to desktop. The navigation adjusted and content fit the size of the window in desktop mode when scaled. The alignment and proximity of subheadings were adjusted and distributed evenly across page in the smallest window. Due to the margin placement of the navigation, titles remained static in placement and scale when window was adjusted. There is no auditory feedback but users are presented with their meme creation through visual feedback.
COMPETITOR: iMEME
DESKTOP
COLOUR The platform utilises a clean monochromatic color scheme with silver and grey. The icons found in the top left and right corners use colours to create contrast and highlight these as interactive tools. When typing in the text input forms, a highlight border is used when that particular input form is activated. This colour differentiation helps users distinguish which box is being used. All of the text uses black which contrasts effectively with the light grey background, this allows for legibility.
FONT One San serif font family has been used consistently throughout the page. There is variation in sizing and justification. The library list uses a 12 point font captions of icons use a size closer to 6 or 8 point. The actual memes themselves use a font that is white with black outline for legibility purposes.
CONTRAST Contrast has been created through the use of colour, spacing and alignment. Black font has been used for legibility purposes over a white and grey background. Colour has been used on the icons to create emphasis and draw in the user’s attention to this header bar. The overall colour palette of the application allows for high levels of contrast with the actual meme generator section of the interface. The plain background allow for focus and attention to be directed to the center of the screen where the meme itself is being constructed. The placement and large amounts of spacing in between the header, and side bar library to the meme draw the eye in.
COMPETITOR: iMEME
REPETITION & UNITY Visual consistency has been created with the placement and layout of items such as the header, navigation bar, titles, subheadings, body text and search bar. Each page has also maintained the colour palette and placement of social media icons. This consistency enables users to easily navigate and access information through the interface.
ALIGNMENT The overall alignment of navigation bar heading, titles and body text follow the F pattern rule. The alignment of the header is positioned with a left margin, titles of pages spread consistently across. Body text on the home page has also been positioned with the same margin setting. Headings and subheadings have been centered with textboxes to establish hierarchy. Galleries have evenly distributed images in a grid pattern, with breaks in between each image. The headings are sufficiently spaced to signify ownership of the body of text or gallery. Captions have also been distributed underneath each image with sufficient spacing and are justified. Overall the alignment on both desktop and mobile remain void of the golden tri theories.
PROXIMITY The meme being created is found to be justified in the middle of the application itself with substantial spacing all around it. This allows the eye to rest and direct users attention towards this key area. Icons have titles placed directly bellow and are placed in a manner which suggest connection to the icon located directly above each.
COMPETITOR: iMEME
INPUT INTERFACE Users are presented with a single page to interact with, they are able to scroll down a library list, enter text through input forms. Due to the fact that there is no mobile version of this website users are restricted to mouse clicks and scroll actions. Design patterns such as the icons and input forms. Although this application is not available through any from of mobile device, it achieves the same goal as the other competitors but in one page. Common web design features have been utilised in a manner that has simplified the overall process and experience for the user, achieving the same result but in half the clicks. The cognitive levels required to use this interface is minimal as common practices have been used in an effective manner. Although the icons have captions located directly bellow explaining their use, their imagery conveys exactly their purpose to the user. The text area and rectangle shape of the input form afford that the user should enter text, as well as a highlighted blue outline the user is aware of what box is activated. Due to the overall simplicity of this applications design blurbs and instructions are not essential and users are able to use intuition to easily navigate through this interface. Simplicity is key.
INPUT INTERFACE Due to the simplicity of this desktop application this experience remains void of any audio feedback. The only result the user is receiving in this process is the visual image of the meme itself. This site was not responsive across devices and required a separate download from the site itself. The menu or navigation bar remained static in the top left and right corner. This site required little information to use and could therefore suffice without an expandable menu.
KEY DESIGN LESSONS: MEME GENERATOR MEME GENERATOR Overall the meme generator remained consistent with placement and alignment throughout each page. This allowed for users to easily and consistently navigate through and create their meme. A clean minimalistic colour palette and design created a clean professional feel, however, this was let down by the pop up ads and banner image. These elements cluttered the space and the experience became overwhelming when trying to sift through all of the content. The overall load time of this page was fine through desktop however lagged dramatically through mobile version. This length of load time dramatically deterred myself as a user of the site, and must be taken into consideration for the development of our site. The overall design and functionality of the site was average and the experience was not memorable. MEME MAKER The Meme Maker had an overall simplistic design and colour palette. The design consistently utilised a San serif font for all titles, headings, body text and captions. Consistency was effective and a clean minimalist design suited the site and improved the experience to create a meme. Again this site followed the same design process where users can search through a library of meme background and customize the text. In relation to the users experience this is very basic and could be enhanced. The hover effects with the navigation bar were effective and made it easy to use. Some of the titles in the bar however seemed irrelevant and cluttered the space unnecessarily. The links to social media on the side bar were quick and easy to access. Being able to share the meme creations at the end also created more of an incentive to use this interface. Overall the page could have been simplified a lot more and achieve the same result.
KEY DESIGN LESSONS: MEME GENERATOR MEME GENERATOR The iMeme plug-in was easily downloaded from their website, however this action was time consuming and annoying. Once downloaded the platform itself was very simple and minimalistic in its overall design. This was extremely effective in achieving the goal of the site, ‘creating a meme’. Having one page was simple and easy to navigate. The lack of branding and design however reduced the overall memorability of the site. A mobile version of this platform was also unavailable. This site was the most effective in accomplishing the objective however, could be easily improved with some simple changes. Again this platform also followed the same creative process where the user accesses a meme library and can customize the text only. This process is very basic and could also be improved.
MEME ME: DESIGN JUSTIFICATION
After analyzing these competitors design decisions will be made in relation to the successes and failures of each. Overall it can be seen that a simplistic, clean design should be utilised for optimal effect. A monochromatic colour scheme will most likely achieve the most effective result, pop’s of colour being used to draw attention to key areas of use. Branding, design, layout and structure should also remain consistent across all pages that are created. A simple user experience should also be harnessed with more personalisation options, or should differentiate itself from these same design processes. The navigation bar should utilise hover effects, with high contrast colour palettes for legibility purposes. A stacked approach with the elastic design should also be designed that accommodates for desktop, tablet and mobile. The site should remain void of advertisement placements as this reduces the trustworthiness or quality of the brand or site. Load time across all devices must also be taken into consideration. Overall the design process should remain simple and the user should be entertained and enjoy the end result being able to easily save or share through social media platforms.
WIRE FRAMES AND COLOUR MOCKUPS: MOOD PAGE
MOOD
MEME
ABOUT
MOOD
SELECT YOUR MOOD
CONTACT SOCIAL MEDIA
MEMES
ABOUT
WIRE FRAMES AND COLOUR MOCKUPS: MEME PAGE
MOOD
MEME
ABOUT
MOOD
MEMES
ABOUT
YOUR MEME
SAVE SAVE MEME
SHARE MEME
CONTACT SOCIAL MEDIA
SHARE
WIRE FRAMES AND COLOUR MOCKUPS: ABOUT PAGE
MOOD
MEME
ABOUT
MOOD
MEMES
ABOUT
ABOUT MEME ME
ABOUT Here at Meme Me we have created a Platform so that you can have access to New and original memes everyday. We cannot guarantee that every meme will be glorious but we promise their originality. Feel free to keep generating as many meme's as you would like.
PAGE PURPOSE AND DESCRIPTION
Don't forget to share the memeiness around, post and share to your social media accounts so all of your friends can see what you've memed.
SUBMIT
If you have any questions, feel free to contact us today.
CONTACT SOCIAL MEDIA
SUBMIT
LOGIC SCREEN & FLOW CHART
PAGE LOADS
MOOD BUTTON CLICKED
SEARCHES FOR AN ARRAY FOR RANDOM ‘KEY WORD’ DIV TAG, BACKGROUND IMAGE CHOSEN
FUNCTION CHOOSES TEXT OUT OF MEME STRING ARRAY
FUNCTION PLACES STRING IN ANY OF THE 3 PRE DETERMINED LOCATIONS
LIBRARIES USED
CODE ACADEMY W3 SCHOOLS
STACK OVERFLOW SITEPOINT
The following sites were used as reference points to develop the code elements for our website.
MEME ME: HOME PAGE
MOBILE /TABLET/ DESKTOP
COLOUR A simplistic colour scheme has been utilised for the branding of the website and generator. One of the key goals was to build a strong foundation for companies branding and this consistent palette has allowed us to do this. The home page utilises (#66CCCC, #FFFFF, #000000) aqua, white and black colours throughout the header and logo, navigation bar, button icons and our footer. This colour palette remains consistent with the minimalistic page styling and branding. The colour choices for this page remain the same for the tablet and mobile version of this website.
FONT Two fonts have been chosen to use consistently throughout the websites design. “Bebas Neue and Avenir Neue” are both San serif style fonts that are legible and clean in design. The “Bebas Neue” has been used has the navigation bar, headings, button titles, meme font and footer font. “Avenir Neue” has been used for the body text or subheading on the home page. These fonts remain the same for this page in both the tablet and mobile version.
CONTRAST Contrast has been created with the use of colour, text, size and alignment. The contrast in the colour of the logo, navigation bar and footer allows the user to easily distinguish sections and sets a hierarchy of the information. The size and choice of font clearly distinguishes the navigation and footer bar from the subheadings and body text. The imagery used in the buttons also helps with creating a distinctive different
MEME ME and eye drawing feature to the home page. The user is instantly drawn to this section after the header due to the size and colour usage. The elements of contrast that have been used remain the same in the mobile and tablet version of the site for this page.
REPETITION& UNITY The header image has been used consistently across each page of the website. The navigation remains in the same place along with the styling and functionality so the user easily navigates through the page. The styling and hierarchy of the font also remains consistent across all pages, along with the placement and location of the footer and contact information. The repetition of the header styling and footer styling create a visual consistency. These colours have been continued through from the companies branding to the styling of the web pages design creating a sense of wholeness and unity. In tablet version the buttons again remain in a repeated two by two grid. In mobile version the buttons fall down to one by one to maintain a large enough scale for visibility purposes.
ALIGNMENT The main header and navigation bar are center aligned to form a hierarchy and establish a contrast with the rest of the websites body content and titles. The main heading remains left margined and allows for the eye to rest between the centered items. The buttons have also been centered to follow the clean design that helps users eyes follow through. Bellow each button the title has also been center aligned and spaced appropriately to represent each mood type effectively. The consistent alignment provides the user with an easier reading and flow through of the content creating structure through the grid of buttons and content alignment. Small alignment changes have been made to create interest and keep the user interested
MEME ME
PROXIMITY The header image at the top of the page indicates a hierarchy and is spaced sufficiently from the navigation bar to give the users eye a break. The navigation bar is shown to be placed above and separated from the normal content this also helps the user differentiate between content and hierarchy. The heading for the section is placed within close enough proximity to suggest ownership and remain legible for the user. The titles of each of the buttons are placed within a close enough proximity to suggest ownership of that particular icon. These buttons are evenly spaced across the page in desktop mode, two by two in tablet and one after another on mobile. These placements remain consistent across devices and pages allowing the user to easily navigate through each emotion option given to them. There is a spacing between the content button box and the footer banner this suggests to the user a new section and allows for a break. The content within this section is placed within close enough proximity to indicate a connection to the banner. This remains the same for both mobile and tablet versions.
INPUT INTERFACE Users will be presented with the navigation bar options to explore the brand and purpose of the site or develop their own meme. The first page loaded will allow the user to determine their particular mood through a series of buttons that generate a meme in relation to that category. This will remain the same across all devices and modes. Button design pattern has been utilised here as well as a typical footer and navigation bar design. An active feature has also been added so the user is aware on all devices what they are accessing. Basic clean web design has been utilised to simplify the users experience. As previously stated in research this aligns perfectly with our primary and secondary demographic. The cognitive skills required to use this page are minimal and features like the buttons are explained in the subheading at the top of the page. The icons have been designed to differentiate itself from the rest of the page and afford common button features. The overall design and simplicity of this page can rely on basic human nature and intuition to easily navigate through this initial page’s interface.
MEME ME OUTPUT INTERFACE The out put of this page is apart of the meme that is generated. The picture that is created through the users input results in the output of the meme itself. This page is consistent and responsive across, desktop, mobile and tablet devices and maintains a fluid layout and scaling of the page’s elements. The navigation bar remains visible at all time bellow the header across all devices. The meme generated remains the main visual feedback for the user for this page.
MEME ME: CONTACT PAGE
MOBILE /TABLET/ DESKTOP
COLOUR Once the meme has been generated the same page is utilised but a div hide and show tag has been implemented for the buttons section. As a result the meme itself is then generated. The colour scheme utilised remains the same with #66CCCC, #FFFFF, #000000 again being utilised for the buttons bellow the generated meme. This colour palette has been utilised as it keeps the overall websites clean and consistent for the user without distracting or overwhelming the user.
FONT Again the fonts remain the same for this section as only the body content is change or updated for the user. These two fonts again have been chosen as they are clean in design and legible for the user. “Bebas Neue� has also been utilised for the text section on the meme writing part. This also remains consistent across desktop, tablet and mobile versions.
CONTRAST The greatest contrast created on this page will be meme that is generated in the center of the page. The varieties of colours and styling of each meme contrast nicely against the overall websites design and layout. The font contained within the meme utilises black and white font so that is legible for the user.
MEME ME
REPETITION & UNITY
The header image and navigation bar have been consistently repeated across each page. The styling also remains consistent with the colour palette used, content layout and placement. Each meme generated remains consistent and repeats a series of different text placements. This has been repeated so as to not interfere or cover to much of the image in the background and still utilise the randomise feature.
ALIGNMENT The text within the memes have been aligned randomly throughout the image every time a meme is generated. The alignment allows the user to easily read through the text in the meme. The meme itself has been placed in the middle of the page which is consistent with the alignment of the header which creates an overall balance to the page’s design and layout.
PROXIMITY
The meme picture has been placed so that it separates itself from the headings and subheadings to suggest a new section and give the users eyes rest points. The meme is placed far enough away but still suggests connection to the headings.
MEME ME
INPUT INTERFACE After determining the user’s mood, they are able to generate a meme specified to that emotion or mood. They will then be presented with the option to save or share their meme through social media. The user is able to navigate through basic design patterns found in the navigation bar, buttons design and footer. This remains the same across desktop, tablet and mobile. The buttons to save and share afford this notion of clicking due to their design and styling. Similar features on the navigation bar and footer also afford the notion of clicking due to a hover colour activation.
OUTPUT INTERFACE The meme itself is the main output for the users experience after they have input their emotion or current mood, they are then presented with an ‘infographic’ of their category choice. The user is then also able to decide what they do with that visual feedback of information. This section of the website is also responsive across all devices.
MEME ME: CONTACT PAGE
MOBILE /TABLET/ DESKTOP
COLOUR The contact page maintains the consistent colouring and branding as the landing and generating page. These colours have been chosen as they are clean and reflect a professional branding. The black and white allows the eye to be drawn through to the pops of colour found in the header, navigation and footer. The colour choices for this page remain the same for the tablet and mobile version of this website.
FONT The contact or about page utilises the same two fonts in similar manners. “Bebas Neue” was again used for the navigation, headings, submit button and footer contact info. “Avenir Neue” was used for the subheading and body of text on the page for the about section of the company. These fonts remain the same for this page in both the tablet and mobile version.
CONTRAST Contrast has again been utilised through the contact about page with the header image and overall website design. The body and input form again create a contrast in the middle of the page and the users eyes can easily follow down through the design. The submit buttons uses a block colour of black to create a strong contrast between the form itself and the submit section. The Facebook icon also remains a solid black and white to draw the eye down to the bottom of the page. The elements of contrast that have been used remain the same in the mobile and tablet version of the site for this page.
MEME ME
REPETITION & UNITY
The contact page repeats the same positioning and layout as the home page with the header, navigation bar and footer. This page also remains consistent with the placement of each of the headings, the fonts and colours used. This creates a strong connection and unity amongst each of the pages.
ALIGNMENT
Again the main header branding, navigation bar, and subheading remain centered with their layout. The about paragraph in the body text utilises a left margin with the input form with a right margin. This creates a balance between the two elements as the eye follows down the page. The alignment of the key sections apply the rule of thirds where the navigation body text and input form are all in key points where the consumers attention will be drawn to. In tablet version the text and input form remain the same in alignment but are reduced in scale. In mobile version the text of the about section becomes justified, which is far more suited to the mobile user experience and common practice.
MEME ME
PROXIMITY The subheading is placed within the center of the page bellow the header and navigation, this is placed in a manner that suggests a new section and distinguishes itself. The heading is placed in close enough proximity to suggest ownership of the about and contact form section. The submit button is placed bellow and close to the form to indicate a connection to the user. This remains consistent across mobile and tablet versions as well.
INPUT INTERFACE The user will be presented with the option to read through the companies about paragraph and then have a call to action to communicate through an input form. Bellow this section the user will be able to access our Facebook page directly. Similarly, to the other pages design this section of the website remains very simple and easy for the user and their experience. They are able to easily comprehend the task through the text placeholders, and buttons found within the form section. A basic form design pattern has been utilised in this section as well as the consistent header and footer. Again the placeholders and submit buttons affords the intended design. Activation colours have also been implemented to further enhance affordance within this page for the user. The site remains relatively simple and requires little effort or strain on the user’s cognitive load, as the user is able to use their basic intuition to interact with this page of the website.
MEME ME OUTPUT INTERFACE The user is required to complete input sequences of information through the input form before receiving any output from this section. This page also remains responsive across desktop, mobile and tablet devices and allows the user to interact with the page’s output and interface. The navigation bar or menu remains static again on this page and consistent across all devices. There is no real visual or auditory feedback required for this page.
RECOMMENDATIONS & SUMMARY MEME ME
Short term developments will focus on fixing smaller issues like facebook share button, and a save button for the user to save their memes as a JPEG file. These advancements will quickly enhance the users experience dramatically. However due to time constraints on the project these elements were not able to be developed. The long term plan for this website involves the further development of the randomisation algorithm. This application has the ability to be further developed to enhance the overall users experience. Currently the libraries for the user’s emotion or mood is catered for and not entirely random. We look to develop this and utilise Google search through size specifications and tag words. Users could enter their specific mood or theme they wish “cats, angry or skateboarding� through an input field, google image search tools will be applied which specifies the width and height for the initial photo and then randomly place the image as the back ground. On top of this words will also be randomly generated through a cap on characters and be placed on top of the image like our initial design. This will truly revolutionise the randomness of the memes that are generated, and all of the work will be done for us. This could also advance to the use of GIFS in our generator that will enhance the overall users experience and create more variation. We look to take this site through a platform called kick-starter to engage with a larger community and build support. Kick-starter provides a platform for new and innovative ideas to be financially supported and create exposure for our brand. Our social media platforms will also be utilised to build branding awareness and post memes generated from the site on a daily basis. Future developments could also include a section where the user is able to upload there own photos and type their own text and have full customisation over their memes.
REVISION HISTORY
VERSION 1.0 The basic algorithm to develop the random image choice, text choice and text positioning was developed as a basic box model. Therefore, this needed to be updated which required implementing new font type and colour for legibility purposes over the background image of the meme. The basic HTML and CSS was developed with a 2 by 2 grid for the buttons and icons were also added. VERSION 2.0 The next version of the site utilized a much cleaner look, reduced the amount of pages from 3 to 2 (meme and about or contact page). This also required the advancement of making the site compatible across different platforms and devices and the site was optimized for desktop, tablet and mobile versions. VERSION 3.0 The third version of the site updated the icons and the layout of the buttons on the landing page to become one clean line, so the viewer could see all options at once. The tablet version required a two by two or three by three across the screen and finally mobile was queued one after another. A colour hover activation was also added to the buttons page to make this part of the user experience much more engaging. There was an attempt to update this version to also include a secondary image to the meme itself but due to time constraints and skill levels was unable to be fulfilled at this point in time.
SELF ASSESSMENT AREAS IN NEED OF IMPROVEMENT Utilising more online available content instead of relying on basic HTML and CSS skills to development features and elements, by utilsing these resources online a much more professional and advanced design could have been created Time efficiency and using back ups so data and information is not lost for future work We wanted to develop a secondary image of PNG’s to also feature in the randomization process when generating a meme, unfortunately due to lack of time and skills I was unable to work out how to use a series of function and arrays to allow this action to happen Due to the rushed end result the overall layout and quality of code could have been improved a substantially, although working it is good practice to always work concisely and neatly with the code which in the long run will benefit you a lot more when trying to work out problems AREAS MOST PROUD OF The overall branding of the site and simplicity of the design was quite good in the end, with more time this could be enhanced further especially the main button page however the generator did its job in the end and that’s all that matters The basic HTML, css and basic java functions and arrays, understanding their role and function within the website
TIME LOG
THANK YOU