OUGD503 Module Briefing

"This Brief offers you the opportunity to identify, develop and exploit your own individual design identity within the context of contemporary Graphic Design practice. You will be encouraged to make independent choices regarding the focus of your investigation and appropriate resolution of your ideas."

Studio Brief 1

• Select and resolve a range of live and/or competition briefs appropriate to your individual emerging practice and interests. This is an opportunity for you to investigate content, processes, products and techniques that will help you to understand and define your own creative ambitions within the field of Graphic Design.

Studio Brief 2

• Working collaboratively ;  focus on the role of the creative team and collaborative approaches to solving creative problems... where you stand within the team. Combine your technical, practical and theoretical skills (as well as identifying new skills that need to be developed).

Live Brief Institutions:

• D&AD *(Uni pays for D&AD £15)
• YCN
• ISTD
• RSA (Branding, Sustainability, Packaging)
• STARPACK
• Penguin (Book Covers)

Deliverables

• Studio Blogs
• Design Boards (if doing loads of live briefs, maybe group the briefs according to the theme e.g. logo briefs, packaging brief etc.) 
• Product/Proposals
• Written Evaluation
• End of Module Evaluation

504 End of Module Evaluation

Overall, I think that this module has been quite good. Doing two opposite brief in one module was really helpful as it helped me learn the different elements and methods which are appropriate and not appropriate for both and how certain design elements may have different impact or should be approached in a different way e.g. layout (layout can be dynamic and involve transitions and actions on design for screen however it's static on print). Studio Brief 1 was particularly harder for me as I felt like I didn't really have much content to work with despite the research that I did which may me really stressed out and felt like I was lagging behind and was failing the module. However, through going through with my experimentations has helped me with generating ideas for content and put me right on track. Although, I did have many many mistakes and problems along the way however communicating and getting feedback form peers helped me rethink my decisions and worry less rather than contemplating. Also, managing my time well has also helped me with dealing with these problems therefore correcting them and refining my design. However, the only bad thing was probably the cost, as I've spent so much money on buying materials which was kind of impractical although I do realise it is part of the production process. But personally, I felt like I was wasting money on some things.

In contrast for Studio Brief 2, I felt like I was finally settled into 'study mode' again which made me much more productive and got lots of work done in such a short amount of time. Maybe because it's design for screen as well which helped me to change and modify my design much quicker than on print as it's all done digitally and don't have to be printed or scanned etc. In addition, I was also able to decide on my concept quicker and actually liked it better than my Studio Brief 1 concept that I was able to produce it much better with ideas generating more and easier. And, I think the fact that the brief was short too helped me because it made me work in a much more productive way and made several developments that led me to a final outcome that I was happy about. All in all, I think this module has helped me in terms of carefully thinking about production methods and the advantages and disadvantages of design for print and screen along the way; and it was a very good brief to start the year as now I have more knowledge and experience which I can take to other modules such as PPP where we have to make a Creative Report.

Translate Your English - Final Outcome

This is the final outcome of my application after all the developments and refinements that I've made after the crits and feedback that I've gotten. 

My application is a translation app which translates English (loan) words for users, which are used and have different meanings in other countries in contrast to the users use of the word in their own English. The application is primarily aimed for immigrants and people who are staying in a country for a long period of time e.g. international students. This application will hopefully help them to integrate and get used to the new culture, environment and society that they are in through learning the different meanings and connotations of certain English words that may mean completely different to how they normally use it or a word that they just never heard of before. Secondly, the application can be helpful for tourists and travellers in order to quickly and easily communicate with locals whilst also learning the cultural meanings and implications of the words they are translating. 

Start up Page 

The users will need to sign up or login to the app in order to use it and once they are in, they will need to choose a Default English and a Translated English, in order to make it easier for them to translate the words and quickly just type in without scrolling through the languages, although if users do want to choose another language they can easily do this by clicking the flags on the centre top area of the app. Doing this give the users an indication what languages they are using at the same time straightforward enough for them to know that's where you change languages. The users will also need to choose which community they want to join, optimising their communicate and information for the specific language they're learning as here the can converse with other users who are learning or using the language which can also give them a much more accurate and detailed information. It's also a place for them to have a more humane conversation where they can share their experiences and thoughts, so users don't only learn about the meaning of words but also the more in-depth meaning integrated in the society, culture and environment. 

 

 

Main Menu 

The main menu of the application is the type mode where user can type in a word or sentence that they'd like to be translated. I did this as it's the quickest way for users to access information without going through an extra step of choosing what mode they'd like. In addition, it's also a similar format to other translation apps, therefore it's already familiar to the users and they don't need to learn how to use it. In the main menu there are also other features which are very useful to the users:

• Speaker Icon - Users can click the speaker icon on the top right of the page to listen to the pronunciation of the word. 
• 'X' Icon - Users can click this icon in order to delete what they have wrote, to start again or if they'd made a mistake. 
• Save - users can click this icon to save their translations to a folder.

(My Profile) 

Users can click on the icon on the top left in order to view their own detail and profile, including information about their chosen languages, posts and following and follower counts. Through here the users can also click on the 'your posts' section to view their post on the community board. 

English Language Selection 

Users can click the centre top icon where the country flag are directing them to a pop up list of all the available 'Englishes' they can wish to translate with. This is option is really handy as it allows users to easily select and change languages whenever they desire and gives them a wide range of access to different languages and not just the once that they selected beforehand.

Folder (Save)

The application includes a folder feature where users can save, organise and look back at translations that they've learnt. In order to optimise learning and organisation for users, they are able create their own folders without presets as they'll be able to individually locate and know which translations are where. In addition, it also adds to the personalised learning thus helping the users to learn in a controlled manner in relation to their learning speed.

Speak Feature

This feature allows users to use the microphones in their phones to dictate the word/sentence that they'd like to translate. It allows for a very quick way of translating a word and may be especially useful for travellers as they may pick up words while talking to locals. Although, I am aware that it may not always be accurate as it depends on someone speaking, so if they're too quiet it may not be able to pick up the word, and if they may have a strong accent it may translate another word which can be quite difficult to sort out. However, for the most part, this feature is beneficial and serves enough purpose for it to be useful and effective in the application and give users a good user experience.

Camera Feature

This feature allows users to take pictures of signages that they may see around. In addition, it also allows users to highlight parts of the pictures that they want to highlight for a more accurate translation, as users may only want to know a certain part e.g. on menus or book passages. 

Share Feature

This feature allows users to share the translations that they obtained to the 'Community Board' of the application. This sharing feature also allows the add a comment or a question which shows up on the community board to start a conversation with other users and start a thread with them. 

Community Board

Linking to the 'Share feature', the community board allows the users to engage in a more in-depth conversation between the words/sentences that they've translated and learnt and hopefully follow through to more personal conversations. In addition, through this users can also follow and message each other, allowing them to meet and discuss with users with the same language interest and experiences as them, thus creating a community between users in the application. 

*Design Elements 

Type

The typeface that I chose for the application is 'NexaBold' as I found that the typeface has a very good balanced characteristic of being friendly and welcoming but also relatively smart and contemporary, which gives the users a very good impression of the application and it's services. The typeface has strong geometrical features which kind of reminds me of 'Helvetica' and 'Futura' in a way as it has both sharp and neutral feel. But at the same time, I also found some script characteristics in particular the lowercase 'g' which bring out the bubbly and friendly vibe that I want the app to have. Overall, I think that the typeface is very effective as it doesn't overwhelm the users but gives them a sense of familiarity and assurance that it's a trustworthy app and accurate translations. 

Furthermore, in relation to type I have also considered the typesetting and use of type size in order to establish the hierarchy of information, especially because my application's main goal is to provide users lots of information this is something that is important in order for it to be successful. The heading of each page e.g. Share to Community are 20 pt., whilst the information are 15pt. Doing this, makes it extremely clear for the users to know which information to read first and where to follow through within the app, also making it easier for them to navigate through information. At the same time, aesthetically the weight is balanced and optically looks really good (not too big nor too small). 

Colour

Orange - #FF9D00 

Green - #3BB44B

Grey - #707070

At the end I decided to go with these colours as the three main colour palette of my application. I've taken my peers' suggestion to minimise the use of the orange and make it more subtle so I decided to make it a motif on the top bar of each page. Doing this made for a much cleaner and sleeker aesthetic for the application, however still implying to the user's the informative an immersive experience that I want them to have whilst using the application. In addition, I also matched the orange with green and carried this on to the highlighted portion of the context page in order to amplify the use of the colours in relation to the user's memory and attention. I thought that this would be quite effective as the colours compliment each other quite well, and with the addition of the grey for the text, creates a well balanced colour palette that brings out a bright and professional aesthetic fitting of the content and context of the application. Furthermore, I've also received good comments about the colour scheme with peers in crits saying how it reminds them of culture and society which validates it for me that I've chosen the right colour scheme for my application. 

Thoughts & Reflection: 

Overall, I'm actually pretty satisfied with the outcome of my application and I think through the development process that I've been doing I've create an application which have been well-thought out and revised. I also think that I've considered the user experience quite well in relation to the user interface and the user interface itself and how it aids to the user experience at the same time how it looks and the aesthetic of it which also affects how users will see and think of the application. In addition, I also think that the features that I have included in the application are very effective and useful in terms of users being able to obtain and learn information. The different alternative modes that the users can use also maximises the success fo the application as this means that the user can access information in various different ways depending on their circumstance and their urgency of need. Though it does look very similar to other translation apps, I can argue that doing this helps the users quickly familiarise themselves with the application without tutorials (and honestly should be anyways as my target users(persona) are people who would be used to using translation apps). However, the content the app is generating sets it apart from other translation apps as it gives a more detailed and in-depth look into a word/sentence, giving the users a way of learning the society, culture and environment they are in in a much more accessible method through the app, thus help them mix in more with the locals, as they obtain a richer understanding of what they are translating. All in all, I think that I have done enough in order for the application to be effective and successful both context and content wise and aesthetically and I think that the app effectively generates good user experience for it's target users through it's user interface. 

Design for Screen Final Crit

Today we had our last crit for our design for screen brief and I presented the development that I did over the last week and in the crit I'd say that I kind of felt like people didn't really say much about it and I felt like I didn't really get much response in comparison to everyone else. Though, the feedback that  did get, helped me in realising some shortcomings of my app which was useful and fruitful in a way.

• Refine the navigation - someone pointed out how it takes a bit long to get to a page so maybe I should try and minimise the back tracking users have to make. I did realise this and totally agree with what they said, as too much backtracking can decrease the UX. I changed it right away and users now will only take maximum three steps to get to what they need. 

follow blue lines for navigation links 

• Change the leading on more context page as it looks to cramped - People suggested that maybe I should space out my leading on the paragraphs as it may seem too crowded and too much for a user to read. It may overwhelm them with information and "nobody wants to read that much information at once..." ; I think because my focus was to give users detailed information I overlooked the type setting and how to lay out the info, and I thought having it on one page would max the UX. Thinking back, I was wrong and spacing it out is much better as I realised the user may glance at it and not properly read it, making the purpose of the app completely pointless so therefore having better navigation in order to gain the user's interest into learning the details would be much more effective. However, I wasn't exactly sure if spacing out the leading would work as it's not actually changing much so I asked a peer what she thought and she suggested maybe splitting the info into sections and having them as slides that users can slide through. I thought this was a much better idea, as it would mean that it can increase the user's interest as to 'what comes next' and make them question is there more? And, most importantly it spaces it out for them so it's not overwhelming to breathe and gives them time and breathing space in between slides to process the information. 

Thoughts & Reflection:

Overall, I think the crit was useful and helpful although I was kind of disappointed because I didn't get more than I expected. The reactions were pretty mild and I had to start the conversation in order to get feedback; was it because I didn't prepare enough? Despite that, the feedback that I got did help me develop the app further so it wasn't all that bad. 

Translate Your English App - Development #3

Today I've been continuing to refine my application in order for it to be of good and kind of high quality for tomorrows crit. I added the 'Community' feature to the app where users can communicate and socialise to other users. Initially, I though of having it so user can communicate to other users based on similar searches/the same searches. However, as I was making the extension of the app; I realised that having a 'Community Board' where people can share their translated search and add a comment would be much better as not only does it let user's see other people searches and click to them to see what it is, it also initiates conversation between users and generate conversation. It's also more humane, raw and accurate as the people that may comment may give them their opinions on the matter, giving them more insight on the social/environmental/political context of the word in relation to the country but also may give them other suggestions on other similar words that can be used. In addition, to a 'Community Board' I also made it so user's can go to the commenter's profile's where they can either follow/message them. I did this so this way, the user can initiate a more personal conversation and converse about more specific part of the language, country, culture etc. and I think this is effective as it gives the user's a much more informed information.

After I finished I decided to get one of my peers (Jocel) to try out my app and give me some crit and feedback. Overall, she thought it was good and pretty straightforward and easy to use, however she did point out some changes that I could make and they were more about the minor details that I didn't really pay attention to:

• Change 'More details' icon - She found it quite confusing how this icon work and so I had to direct her and click on it. She said to maybe change it to something clearer as it may confuse the users and may think it's for something else. I also thought of this before, however I didn't really know what icon to use so I decided to search up some references. Also, She pointed how I should make the heart the same as the save folder icon so the users will clearly know it's a save button because it looks more like it indicates it as a 'like' icon instead. From my research, I found that most of it are just three horizontal lines with a magnifying glass overlaid, therefore I decided to use a similar icon as it already indicates from my search that  it's a universal icon that most users will know about, therefore using this icon will stop confusing the users and they'll know once they click on it it'll take them to a page with more information and context about their search. 

• Make the type size consistent - Some of my type sizes were the same on both headings and sub headings and kind of defeats the purpose of the hierarchy of information. I didn't realise this until she pointed it out as I got so used to the screen that I didn't realise how it will actually look on a phone and how users will perceive the type info so I changed the type so that the headings are 20pt and the sub headings and 15pt, giving a clear indication of which information the users will read fist and attain. 

• More context transition should be 'Slide Down' - She pointed out how the context overlays sliding up are kind of disorientating and something she wan't used to, so she suggested that I try sliding it down. I tried her suggestion, however I didn't really like it and I think I prefer the sliding up transition better as it's an overlay quite similar to how a keyboard works (which is to slide up), keeping it to slide up is a much better option and is also consistent throughout the rest of the transitions used in similar icons like the keyboard. 

I found it really helpful to have someone else try my app as they saw it in the audiences' point of view and therefore saw different things that I did which really helped me in refining the details to my app and made me realise to focus more on the details. After, this crit I decided to have a more thorough look at my app and did a bit more refining to it. 

Looking through my content overlays, I thought that I'd add an extra pop-up for unique words used in the language, as I think it would help the users know and adapt more in the language as they can able to use these words unique to the country, to show their understanding as well as to show respect and appreciation for the tradition, society and culture that they are learning through the app. 

Thoughts & Reflection: 

This is what the app looks like after refining it and will be what I'm going to show for the crit tomorrow. Hopefully I can get helpful crit and confirmation that I'm doing alright and progressing well just so I know that I'm going in the right direction; and hopefully I won't have to make any drastic changes as it's the final crit and this version is what I'd like my final to be.  

I thought while refining and developing the app, I found it quite exhausting having to link each detailed transition for an action to another page, however at the same time it was very helpful to get me to consider each step and make myself aware of the how I'd want the user's to navigate the app. Also, doing this naturally made me think in the audiences' point of view and I thought more about what might the user want in the app and what kind of things they might like to learn. This led me to keep adding more and more features in my app and add little details to it like the pop up feature for the word 'po' in the context. Furthermore, it made me realise the (secondary?) effects of the app, as at first I only wanted to let the users know the english loan words and what they mean in their own English language use, however as the app became more detailed and refined, it made me think that the app can also be a tool where user can learn about the culture through the little niche words used iin the country and therefore be more self-aware not just linguistic wise to be able to communicate better, but also cultural-wise, where they can also learn to appreciate the unique traits of each country that they are trying to learn more about.

Translate Your English App - Development #2

Today I continued to develop my application and made drastic changes to it in comparison to its first refinement. I took my peers' suggestion and decided to use orange less and make  it more of signature colour for the header's for each slide. Doing this made the app look really sleek and consistent but at the same time still keeping it's fun and interactive atmosphere but in a more subtle way that it doesn't look childish. Also, I used a much deeper colour of orange (#FF9D00) as I found that the previous colour I've used looks a bit too soft and it made the app look quite 'kiddy' and childish in a way. However, I kept the green as well as the icon colours, giving consistency together with the 'globe' motif that I've got going on with most of the slides. Also, it's a subtle way of emphasising concentration and focus in the app and in particular I've used the green for the highlighting feature in the content to make the key words more memorable to the users as green evokes concentration and focus in addition to the orange, optimising the informative and educational use of the app. 

Before)After)

Also, I've made the app more detailed by having additional start up pages like making the users choose their default and translated English, which I think makes the app much clearer and have a better navigation system. Today, I've also started using more of the features in XD, in particular the 'Overlay' and 'Scrolling' transition option. I've found this feature very useful especially for the more content's bit and for the keyboard as it makes the slides act as pop-up's which makes it seem like the users stays in the same page and lessening their navigation movements, simplifying the app navigation  overall. For the scrolling feature - I've used this to create a more successful scrolling effect for the 'Select English' feature- also using this in combination with the overlay effect was very effective creating a smooth sliding up transition from the bottom of the layout, making it easier for the users to select a language through scrolling especially at the bottom where it's easier to navigate through as its in closest proximity to the fingers and thumb. 

'Select English Scroll'

Furthermore, I also tried to create a more detailed 'Capture' 'Picture' feature, however it needed a movement to show the highlighting of the key words in the picture, but it's not possible in XD, so I decided to leave it and give a step by step which works just alright and shows the concept okay I think. However, I wish it would've worked to show the idea of being able to highlight key words from a picture clearer though. Being able to highlight certain parts of the picture would make it easier for users to translate the important bits that they need only and give a clear and more accurate 

translation. 

In addition, one of my peers also showed me how I could connect my prototype to my phone in order to do a live mockup on how it'll work in an actual phone setting. II've this really exciting and helpful because as I was ding  it it actually feels like my app was working and it gave me the user experience itself first-hand so it gave me a good indication of how easy or hard it can be navigated. Also, it gave me an indication of how big and legible the type and icons should be in order to be readable enough to have an indication of informational hierarchy to guide the users which info to read from, and also how will they can click on the icons in order to go through. I've found that thankfully for my app, the type is easily read, and have a clear hierarchal indication making it very clear to the users, as well as that my icons are of enough size for users to click on them and transition smoothly. 

Thoughts & Reflection:

Overall, the drastic change to my design is very prominent and I think is for the better for my design as I think it actually look much better aesthetically and navigation and usage wise it's also much more clearer. Also, in the user perspective I think I'd be more willing to use this app than the other I've made as it looks quite professional giving me some kind of indication that it's an informative and educational app which is trustworthy and accurate to it's translation and would help me learn and understand what I'm trying to learn and achieve through the app. Tomorrow, I'm aiming to add a 'Community' or 'Share feature to the app, as I think it would give it more appeal as users can not only interact with it but also other people. For this idea I'm thinking of:

• Making it specific to a country
• Making it specific to a translation (e.g. other suggestions?, 
• 'Share' button to share to a bulletin board where other users can comment on (similar to a reddit thread?)

Hopefully, I can do this and get it to work in time for Friday's final crit. 

Translate Your English App - Development #1

Today I made a rough development of my high fidelity wireframe for my application and I wanted to know how a user might find it and how they will use it so I got some of peers to try it out, also in order for me to get some feedback before the final crit on Friday. Furthermore, Ive also taken into account the feedback that I got from the silent crit and tried to lessen the navigation the users ahd to do in the app. by putting all the 'More details' information in one frame (a), I realised it actually looks better this way as the users can read all of the info in one go and save them in one go as well, also they don't have to keep going back and forth to frames which may lessen their attention span and bore them. In addition I've also decided to have an orange and green colour scheme as these colours evoke concentration and a playful atmosphere at the same time, which may incline the users to keep using the app and learn the information quicker as  they are faced with a more energetic and bright aesthetic.

a)

From what I've gathered the navigational features seemed quite clear and my peers went through it quite smoothly although they did say that they got confused with some of the buttons like the mic button (b) on next to the 'Save' and 'Delete' button, as they thought it was the same as the mic button at the bottom. However, it was actually intended to be a 'Listen' feature for the pronunciation of the word, therefore I may need to change this button in order to give a clearer indication of symbols to the users.

b)

They also mentioned how the overall aesthetic and the design of the application could be much better and they didn't really like it, which I was kind of glad they pointed out as I wasn't sure of it myself either. Especially, while I was designing at the beginning I thought it looked good however, as I added the other frames and the app started to take shape I felt like the layout got a bit too much and I didn't really know how to change it and I was glad I got the confirmation that it wasn't good as well so I could confidently change it. They suggested maybe don't have the white boxes as it made them feel like they had to write something as I've realised that it would actually make users naturally feel the need to type. Also they suggested to lessen the use of colours? maybe use them as spot colours instead? As well as maybe have a keyboard option too! because I completely forgot about that feature. 

Thoughts & Reflection:

Overall, I got really good suggestions and criticisms in order for me to develop my design further. I will definitely take into account what my peers gave me as feedback and hopefully the design will be a bit more refined in time for the Friday crit. 

Visiting Professional: Only

Why Design for Print?

• Constantly evolving and theres endless opportunity
• Primary source of information 
• It's experimental and interactive
• Motion and actions in websites have been used nowadays to add character to the websites for brands- usage of typography and animation
• Having motions also creates a better experience for the users and takes them on a journey 

Design Process

• Spend time researching analysing the brand that they are working for and things that they can improve on.
• Run workshops with the clients and really find out what the audience are and create persona's -> persona is then used in order to figure out and see if the application will actually do it's job.
• Wireframing - helps to visualise what the application will do and how the user will use it and separate it from the aesthetic and visual designs first.
• Design - bringing in the content and fleshing out 
• Front end (Developers) - take the design to the developer and communicate with them e.g. how the animation needs to work, how it'll move etc.

Case Studies

*Printworks - idea of printing and motion in traditional printing processes

-really simple idea that has been taken to so many levels and mediums, e.g. website, posters 

- usage of type, layout and composition have been pushed 

Tools

-Invision

-Marvel App

-Adobe XD

-Sketch

Research: User Interface Consideration in Relation to my App

I've also researched more into user interface design elements which could be helpful into developing my own user interface of my app.

WHITESPACE - Usage of white space helps the users to focus on certain part fo the interface, particularly coloured elements where users need to be directed to. For my own application Using these idea on giving focus on highlighted key parts of translations may be effective in order to take the user's attention to it.

NAVIGATION TABS - This feature should be used when context needs to be separated. This is particularly useful for my own application as it will include lots of information in order to give users more context about the translations. Using this feature will help with learning the information in steps and not overwhelm them at first glance, making for a more effective user interface and good user experience.

GRID - A grid could be used for the user interface layout in order to create a structure to the application and create a rhythm and pace pace within it. Furthermore, it also creates consistency and organisation which helps the users familiarise themselves with the structure of the app faster as well as fo them to know where everything is. Having a particular or rough grid for the application will likely be useful in my application, however, having reference from existing similar applications, using a similar grid as those will be effective as it's probable that the target users will be used to using these translation apps, therefore having a familiar app will be very effective.

PROGRESSIVE DISCLOSURE - Progressive disclosure lets users view content that they want with minimal distractions, this is particular in Youtube where a  'View all comments' section is used. This is useful in my publication as it can help section the information the users can view, making it less overwhelming and boring, especially because it's a very type heavy and information heavy application. Also, I think, I've already started to do this anyways, in particular with my 'More Details' page in order to allow readers to view the bigger context of the translations.


*Ellen Lupton - Type on Screen: A Critical Guide for Designers 

Because my application is going to be very type heavy and type based I researched ways and tips in which it could be used properly and appropriately on screen.

According to Ellen Lupton, type can be used to signal an action - Especially on screen type can have many usage and can be used in order to signal users to do something. 'On a  web site, people expect coloured type to provide a link to new content.' I think type on screen is advantageous in a way as it allows for dynamic actions and certain styles like being underlined, bold or in a different colour can have a diff meaning for the user that they'll know already from learnt habits from using digital media. Doing this, can indicate users important information to and in a way manipulates their actions on the web through these signals used in type.

In addition, she also mentions how it needs to be centred towards content and the user's needs have to be recognised. Such as that if the user's need to have content which are very detailed and type heavy the the type itself should follow and accommodate; and vice versa when users need quick and snappy information, is type really appropriate for it can it be replaced icons or signs.  Furthermore, as it's design for screen, it should be open and accessible to various mediums. This means that screen  typography should be flexible and versatile in order to be able to be used and communicate to its users effectively as well as present the content needed successfully.

https://www.howdesign.com/design-creativity/fonts-typography/conversation-ellen-lupton-type-screen/

Research: Psychology of Colour

After the crit on Friday, I decided that it would be good for me to research more the colours that I may use in my application, in order for it to have a stronger link and be more effective to use for the users.


Green: Green is good for concentration as it's a colour that "promotes restfulness and calm" therefore it helps us to become efficient and focus more.

Blue: According to my research the usage of the colour blue for highly intellectual work is effective for productivity, especially when paired with a warmer colour/tone on the opposite side of the colour wheel.

Red: can stimulate energy, however depending on the intensity it can appear threatening. Although, when paired with repetitive or detail-orientated tasks it helps improve focus.

Yellow: can evoke happiness but if overdone it may lead to feeling of stress or warning instead.

Orange: stimulate critical thinking and memory. It increases oxygen supply to the brain and stimulate mental activity and is highly accepted among young people.

Purple: often associated with royalty, class, power; pairing it with a contrasting colour like yellow will evoke a fun and easy attitude appropriate for children's products.

Black: A very versatile colour that it can fit into almost every design to add contrast, and make the other colour stand out.

White: evokes a clean, fresh and pure characteristics. Design wise, if used with a design with lots of negative space it can give the design a very sleek and clean look.

Thoughts & Reflection: 

After having a better understanding about colours in terms of their use for online design and learning I think that I'm going to make some changes my colour scheme in order to utilise these colours and help the users in learning and becoming more immersed in the application better. I think using green would be more effective in  terms of getting the users immersed in the application and making them use it more and learning in general s it may help them to focus especially as the application is quite information heavy and there's a lot of things that the users may find informative. Maybe using green as outlines or the application name colour will be effective in attracting users to it. I also liked the idea that the colour blue can be even more effective when used with an opposite colour. Going along with this, I thought of maybe using orange as well e.g. replacing the yellow highlighting colour to orange in order to stimulate memory and make the users remember the words/sentences better and more efficiently. In addition, from the crit, I've also got suggestions that maybe I should make the interface a bit more playful therefore I may customise the icons and symbols that I'm using using these colours in order to evoke a fun character to such an information heavy application where users may find it boring and intensive.

https://www.shiftelearning.com/blog/how-do-colors-influence-learning
https://www.td.org/insights/how-color-can-affect-learning

Studio Brief 2: Low Fidelity Wireframes (Silent Crit)

Toady we had our first crit for this studio brief. As I said in my previous blogs before I was hoping to get some really insightful and helpful feedback. Thankfully, I did get relaly good feedback praising aspects of my designs and good feedback suggesting my other features and designs which I didn't think about that may work in my app. 

Things people thought was good:

• Context is really good.
• "Camera and speech page are useful and good UX"
• Target audience is considered, "catered towards their needs"
• "the journey seems intuitive and the saved folder is a good idea"

Suggestions:

• 'Simply the UI' - Most of the suggestions were similar to this or in the same line. I think because there's so many steps to the app, this may be why it can be a bit confusing or too long to use especially to the users. I think definitely I'll need to think about how I could lessen the amount of info or simplify and lessen the amount of clicks the users will need to do in order to get to the information that they need and  providing good UX. Although, another alternative someone said was to have a 'how to page' or a walkthrough for the users, however, I feel like the users should already feel like they will know how to use the app like other translator app, and I think a how to or walkthrough will just be a nuisance to them and be redundant and the users will figure it out themselves. Therefore, this is probably not an idea that I will experiment with.

• 'Saved pages to 'Saved phrases/definitions - Someone suggested that instead of saving by countries saving by phrases or definition would be more effective. After some thought, I think they may be kind of right as users will probably use the app to learn one or two languages in detail therefore they would only need to focus on those two languages. They also pointed out how it'll be "more effective on allowing them to become familiar + confident using the terms, can access them quicker + easier". I think they have a really good point here and this saving technique would probably highlight and increase the effectivity of the app better. Furthermore, I think to achieve this, I may categorise the Saved pages by Content like 'Social', 'Formal', 'Food' OR just leaving it up to the users and providing them a 'New Folder' option in order for them to customise it themselves for their own needs and usage optimising the personal usage and effectiveness of the app.

• Activities or features centred to the audience - All of the suggestions also talked about how the app could have a feature where users can interact? Someone suggested a discussion board or a chat for user interactivity? I think this could become a feature or an idea I can definitely consider. It could be really helpful in terms of getting other users to share other similar definitions or usages of a word and phrase which could a community and communication between the app users or even find people they could meet with in the area. If I was to do this I'd probably need to make it a separate feature on one of the buttons at the bottom where the users can easily see -> may also mean that users will now need to sign up and give personal info in order for them to use the chat? -> privacy policies etc. needed., email, username, password

• Need a stronger justification for the colour choices - I thought the yellow and blue would be good as contrasting colours which both connote and bright and playful at the same time informative and educational content for the users however, someone suggestion to possibly link the colours to 'research into effect if colour on memory, ability to learn?' I didn't think of this, but it sounds really beneficial for my colour scheme choices plus they're not set in stone yet so I'd definitely look into this.

• Tweak feature usage *camera - what if users only want to translate certain phrases from the picture? - Someone pointed out this problem for the camera feature and suggestion for me to utilise the highlight tool, for the users to possibly highlight certain parts they want to translate. I think this would really helpful and I'd probably add this in my app for better and accurate UX.

Thoughts & Reflection: 

I think this crit was really fruitful and I got really positive feedback as well as good suggestions and criticism which I could sue in order to develop my application further. I will definitely look into the suggestions that have been given and apply them to my application in order to see if they actually work and make it more effective. In addition, hopefully by this week or next I'll be able to do a simulation of how the app will be used using Adobe XD or other apps for a more effective and accurate evaluation of the UI and UX so that I can refine and evaluate as I go along. 

Low Fidelity Wireframes (in more detail) For Friday Crit

For tomorrow's crit, I decided to give my wireframes a bit more details with a bit more context in order to hopefully get as much feedback as I can and make them more understandable and clear.

Colour: I've thought of maybe having a yellow and blue colour scheme which is quite a good contrasting colour palette which can enable it to have a friendly and bright feel and as well as informative and educational undertone to it as well making it more trustworthy and useful.  

Main:  For the main pages of the interface, though, I feel like the yellow and blue will be a bit too much and challenges the legibility of the information therefore I was thinking of possible subtly using the colour scheme instead through the icons and symbols? or the highlighting options?

Type: For the typography I want to use a sans serif typeface for easier legibility as well as give it a contemporary, clean aesthetic. For this wireframe draft though I've used Helvetica as there were no other sans serif typeface available for the mock up which I wanted. I want the type to have a friendly and informative (educational) feel to it and a more softer rounded sans serif as opposed to rigid and very geometric type would be more suitable. I also think it would be more engaging to the users due to the bright and welcoming feel that the interface will give, especially because the interface will be very text heavy I think it's important for the type to always be very engaging and pleasant to look at in order for the users to keep using as well as give them good UX, as opposed to a very boring and dull interface and type.

Icons and Symbols: For the icons and symbols that I'm going to use, obviously for this mock up I've used standard icons used by other apps however when I come to create the actual wireframe for my UI, I'm intending to create more stylised icons for the application in order to give it a consistent colour scheme, size, weight and layout throughout the interface. In addition, because some of the symbols and icons will be constant through the application it's important for them to be consistent as well, in order for the users to learn the UI quicker as well as be pleasing to the eyes when being used.

Thoughts & Reflection:

I wanted to develop my previous wireframe structure more as I felt like it was a bit too basic and similar to other translation apps and by creating a more developed version with the design elements and some content, I felt like it helped me differentiate my application more and gave me a better idea of the structure of the app and how everything works as well as what other structures and features I could have on it that are not in other translation apps. Because I think at first when I was making the wireframe, I got stuck in the rabbit hole of making it a 'translation' app that it started to feel like any other apps, and I totally forgot how it's giving the users much more content that usual apps and by focusing on this instead I will create a much more innovative UI design to make it effective and solves the users problems. I tried going about this by trying to focus more on unique features and information I can give users especially on the 'More Details' option. I think by having this I've started to differentiate my application to other applications making it more appealing and useful to my niche target audience them more willing to use my application than others as they are getting much more than just a translation but also an insight information to how the local society in the country uses the word/phrases which they can then use to integrate in the community in a much quicker, accurate and efficient way. Overall, I think I became more confident with my application and its UI in relation to its UX whilst I was making it, and hopefully in tomorrow's crit I will get insightful feedback and critique from my peers, and from these feedback hopefully I can develop my application further as I can gather suggestions and criticisms not just from me evaluating my work and my peers who have seen my work, but also other people who may think in a different point of view as me and give me new ideas which I can interrelate to the development of my application.

'Read Me' Final Publication

After all my experiments and developments this is the final publication outcome that I created. My publication is centred around the idea of semiotics and how we understand signs and symbols, this idea came up from my initial research during summer of taking pictures of business signage. From there, I started to look more into how costumers look and react at signs that are presented to them; expanding this research I gathered further information about how we think about signage in general.

As signage have become integrated so much in our lives so much, when we see signs we tend to ignore them to the point that in some ways they become part of the background and our surroundings - although we know what they are we either don't pay attention anymore or ignore them thinking that it doesn't affect us or have anything to do with us.  In order for signs to become more 'alive' usage of emotive language have been used as a strategy to attract attention - to surprise, and elicit empathy from people. This has been greatly research by Daniel H. Pink in his human studies. Usage of more humorous and relatable signs have been done resulting in better response from readers to an extent where they'd be willing to do the sign/rule said as they relate to it. In my publication, I've tried to challenge this by having 'normal' signs that we see everyday, and try to make readers think more of their actions, and why they do them. I've also integrated elements in order to make readers notice these 'normal' signage within the publication. The publication is titled 'Read Me' a pretty straightforward title fitting the content and has a commanding implication just like the content inside. The content pages contain information about 'Semiotics', 'The Stroop Effect', and 'Emotionally Intelligent Signs' split in different sections in the publication.


*CONTENT

Semiotics 

In this section, I drew illustrations in which readers may interpret in many different ways highlighting the main idea of semiotics and understanding and connotations of symbols. The idea is that readers will hopefully interpret the illustrations in various ways depending on the connotations that they gathered from their environment and society with the illustrations. Having the description with the illustration will also hopefully make the readers understand and think about their reaction, making them understand semiotics in  a very simple way.

The Stroop Effect 

I've included this in the contents of the publication as it's a nice addition which highlights the understanding of signs. I've used the words 'STOP' and 'GO' as examples, with the 'STOP' in green fill and red background and vice versa with 'GO'. As 'STOP'  has connotations of the colour red, traffic lights, being static, while 'GO' with green and movement, blatantly opposing these known 'rules' this in the publication will hopefully show it's effect on the readers- either they stop and analyse the content as it may look 'wrong' or they completely miss it; they may even realise later? Furthermore, I've also used different paper weights for this part of the publication in order to create a subtle change and disruption to the flow of the publication, mirroring the disruption the readers may encounter when they see the stroop effect section of the publication. (I used both 135 gsm and 270 gsm White Frost Colorplan from G.F Smith). Although I've only used it in two pages, readers may detect the change due to the massive different in paper weight.

Emotionally Intelligent Signs

This study is included in the last part of the publication as I figured it would be effective into eliciting more action from the readers by directing them with emotive language into finishing the publication hurriedly. In addition, usage of type setting in order to highlight the motive language have also been done. e.g. "faster, faster, faster, faster" or 'Don't worry you're nearly there'. In particular, I've used the word faster four times, alerting the readers to speed up but at the same time, I've gradually increased the kerning in the words 'faster', subtly opposing the hurriedness and meaning of the word which may once again disrupt the readers flow of reading the publication as often the known meaning of large kerning is pausing and slowing down your pace - 'breathing space'. In the phrase 'Don't worry you're nearly there', the urgency is brought back with the key words 'nearly' in bold, thus making the readers move faster. Doing this showcases the effect of emotive language to the readers and how they can manipulate and make readers react more successfully through a more relatable language in which they are more complied to listen to. And, hopefully by the end of the publication the readers will attain a better understanding into why they react to signs in such a way that they do and how these reactions are being elicited. Finally, in relation to the content, I decided to use 'Helvetica' for the type as it's a neutral typeface, something that readers are familiar with and is also seen in many signs, therefore appropriate in presenting the content.

*DESIGN ELEMENTS

Paper Stock & Hard Cover

I've said in my previous blog that my chosen paper would be a 160 gsm white 'Satin' stock from digital print and a 135 gsm Colorplan White frost stock for certain pages (STOP), however when I went to print I compared the two and realised that there's a such a big contrast between the two white tones that I didn't like, therefore I quickly decided to have my pages in the 135 gsm Colorplan Satin and bought a 270 gsm stock of the same kind for the specific page that I wanted for the 'STOP' pages. I decided these as from my previous developments I've found the 135 gsm Colorplan stock to feel much heavier than it is mimicking a sturdier and heavier paper stock which I liked. As well as, the paper stock as resulted in a high quality printing finish and gave a very nice contrast with the black text due to it's bright shade as well as high quality. Furthermore, I also revised back to my other G.F Smith paper experiments and samples and found that the Black Plike 240 gsm paper matches well with the thick hardback cover that I've made, so I decided to use it as well as extra front and back pages of my book. In addition, to this, it also gave me an opportunity to engraved the title on the front Plike page of the book matching the handmade aesthetic with the rough engraved outline the laser cut produced, as well as they fact that the engraved title stand out on the page making it quite bold against the smooth black surface of the paper. Furthermore, I've also created a hard cover for the book as the card developments I've made, didn't quite meet what I envisioned and made the book look quite unfinished despite it's quality. The buckrum covered cover gives a sturdy and smooth exterior which compliments the intricate binding of the book making it more attractive to the target audience. In addition the lack of titling on the cover also create make sit more intriguing making readers curious as to what it is.

Binding Method - Kettle Stitch 

I've used kettle stitch as the binding method of the book as has a high practically and durability to it, It also allows reader to properly flip each page of the book giving them the full experience of the content. In addition, aesthetically it gives the publication a handmade feel linking to the original research of the publication. The only downside to this method, it that the publication may possibly not be mass and commercially produced in a large scale as the binding method is a very time consuming part of the making process, and as it's a high level handmade method it may introduce errors which affects the quality of the publication overall. Therefore, if I was to commercially produce the publication it may only be that it'll be produced as a limited edition or a limited batch of 50 to 100.

Printing Method

The publication was ultimately digitally printed as I realised digitally printing it is a much more efficient and effective way of presenting the content, as trying to shove other printing methods e.g. laser cutting, would only dilute the message of the publication. It's also much more easier as if I were planning to speed up the publication making process as the printing can be done quite quickly helping to reduce the making time in relation to the binding process of the publication. It'll also be cheaper to batch produce the book, therefore reducing costs for production.

Thoughts & Reflection:

Overall, I'm quite satisfied with the final outcome of my publication. As I've been through many errors and changes in my experiments and developments I think I've come to an informed and refined outcome. In addition, I also think that I've answered the brief that it's aiming and the audience that it's targeting, through the use of appropriate content and production methods which highlights the content as well; I also feel that it does stand beside other competitor books in the same genre as I feel it's unique look will attract reader's attention when seen in a bookshop. In addition, I also think that I've considered the commercial production aspects of the publication and reviewed its potentials and limitations to be mass produced and proposed an alternative in which it'll be possible for it to be produced in real life. Although, the only thing I would say is that the binding time would decreasing it's potential to be mass produced is a shame and the introduction of errors in the production is highly possible- which I've also encountered during binding the book (as the front black cover is slightly high showing the content pages through, making it look unbalanced and untidy. If I had a lot more time to produce this publication I would've changed the cover, however because that means that it'll have to unwind the whole bind it would take me too much time and meant that I'd had to reprint everything again as the holes would be too big which would make the new binding to be loose on the pages, which is very unpractical in the span of time that I have.

\