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.

\

Translate Your App - Final Brief

After creating the drafts and low fidelity wireframes for my application, I decided to revise my brief and made it more detailed pinpointing it's purpose and target audience in a clearer way. I also changed the title fitting the application purpose and making it straightforward enough for users to understand what it's about without any further description.

Low Fidelity Wireframes

After doing my draft sketches, I decided to create my wireframes on Illustrator giving them a bit more detail and refinement in order for me to visualise how the application will work. I also made it with the arrows in order to get into some detail with some of the options as well as a clearer walkthrough of how the application can be worked and used by the user.

When the users open the application, they will be greeted with an icon of a globe which they will need to press in order to get on the main interface. Instead of giving the users prompts like 'Press Here', I thought, the users will already know what to do anyways as they are a technology savvy generation I think, therefore they'll do what to do. From my sketches in my previous blog I've also made changes such as only having one main page instead of three for each mode. I did this so the users don 't have to keep going back to the start up page when changing modes as they may feel like they're wasting their time and it may be annoying for them to keep coming back ad forth in the interface; it may also start to feel quite repetitive for them and may prompt them to stop using the application. Instead of going back to the start up page, the users can click on one of the options on the bottom tabs, which can lead them either to the 'Save', 'Take Picture' or 'Speak/Speech' mode which will then pop up a similar interface similar to the type interface in relation to the mode that the user is on. 

Instead of having a 'More Details' page that I've intended to do, for the translated language type box, I've broken down what it's going to include as it's the most important part of the interface as it's the part that gives the users the information they need. I decided to break down the information that can be obtain so that the users won't be confused and be overwhelmed by the information presented to them. Breaking it down to 'Definition', 'Context' and 'Synonyms' the users will get the important linguistic terms and uses of the word/phrase/ sentence that they've translated giving them a full breakdown of it as well. I've also thought using a highlighting tool that will highlight the important parts (especially in sentences so that the users can identify them within the sentence structure - also, if I was to do this, would I need to show the actual sentence structure? Do I also highlight the subject, object, verb, adjective in the sentence? or is that a bit too much irrelevant information? Maybe, if I do this, I might confuse the users; in addition, doing this may alter my target audience to linguistic or language enthusiast which is not my intention. I think, going into too much detail will just complicate my interface in turn making in into a bad UI for my actual target audience and won't serve it's rightful purpose. 

For the 'Saved' folder and 'Language Selection' I decided to separate them by countries as it would only make sense to keep order of the translations by their country of origin (especially for the 'Saved' folder), this way the users can easily navigate through which saved translation they want to go back to in relation to the country it's from, because most likely the users are more interested in the country the language is from when finding it.

Furthermore, from my last sketch I also added some new details which would make the interface easier to use, such as 'Back' buttons and the 'language selection' button always on the top centre. The 'back' button indicates to the user to go back to the main page if they want to whilst the 'language selection' button is always there for quicker access on changing languages instead of going to the main page.

Thoughts & Reflections:

I think after doing this new sketch and drawing it up on Illustrator made me think more of the details the application can have, such as having 'back' buttons and constant buttons for easier access. Also, because I've drawn it up on Illustrator it also made me think of the process the users go through whilst clicking a button therefore making me think of easier ways to access it, and ways in which it's presented in a simple and concise way to the users. Overall, I think that through this I've came up with a structure which I am happier about and something which I think will work and will be effective in presenting the users the information that they need.

Low Fidelity Wireframes for UI

After Stephanie Bell's talk this morning, we were tasked to create the low fidelity wireframes for our user interfaces. I first started to write down ideas and features which I thought could be included for my interface as well as the content that I wanted to have in order to place the features in a way where users will be navigate smoothly through the application with no hassle and quickly get the information that they want for the application in the first place. I thought because my application's main point and use is to translate English loan words, the UI should have:

• Two main boxes for the two languages that are being translated.
• Have a 'Save' option for the translated word/phrase/sentence.
• 'Save' folder in which the saved languages are separated by countries.
• 'Delete' option
• 'Swap' languages options 
• Allow for a 'default language' option
• 'Countries' icon which takes user to drop down list of all the countries (may include an icon  of the countries flags as well)
• 'Speak' and 'Scan/Take Picture' option (shown as icons)
• Sans Serif font 
• Minimal colour palette -> not take away the attention from the information -> don't make it look overwhelming and tacky to use.

After writing down these features I decided to do some basic sketches on how I'm intended the application to look. I first started with how the main interface will look like as I thought it would make it easier for me to lay features and remember to put the important features in order for the application to be used by the users effectively. 

In my first draft, I've designed the main interface to be centred on the two type boxes where the words/sentences are translated while having the 'Speak' and 'Take a picture' options are put as smaller icons on the bottom of each box, indicating to the user for them to click in to change modes. Here, I've also thought of having the logo of the app on the top left (however, after actually doing it and evaluating the design, it looks a bit website-y and more appropriate for desktop; also I need to aim to only put the most important information on the screen as it's aimed to be used on mobile phones which have smaller screens in the first place; it shouldn't be distracting or confusing to the users. Here, I've also started to think about how the 'countries/languages' option can be opened. I thought of having it as a list that the users can scroll down through with the countries flags and in alphabetical order for quicker access.

Other design drafts also included a 'More Details' option, where the users can see the full details of the translation such as the context, use, when and how to use the word. I've thought of having this as a more details option as I thought maybe it would be too much information to be put if it was included in the main interface page. It will also include a 'Save' option in which the users can save their translations for later use so they don't have to translate it again.

In addition, I also started to sketch a rough idea of how the users will navigate through the application. Starting from the start-up page, the suers will be able to select a mode they want to use - type, speak, or take a picture, after selecting  mode the users will be taken to the screen of the mode that they've chosen. Each mode will look very similar in order to have a consistent look throughout however, it will be made suited best to the mode that they users choose for an easier and less complicated user experience and user interface. 

Type: This interface includes the two boxes for the users to type in, with the top box being their 'default language' and the bottom the translation box. The users can also 'swap' the languages and choose another language to translate to, in which a drop down list of all the countries will show up. Having a drop down list will make it easier for the users to scroll through and navigate to the language that they want to translate to as well. In addition, to these, along with the top box are small icons directing the users to particular navigations in the interface. Instead of going back to the start up page, the users can quickly switch modes by clicking the icons on the upper right corner of the top box. Similarly, on the bottom box the user can have the option to 'Save' the translations. If the users have saved a translation they can click on the saved option where the translations are separated in countries, keeping the information collected in order and for the user to remember what language the word/phrase and sentence have been translated into.

Speak: The users can use this mode by clicking the speak/speech icon on the left side of the box where the speech will pop up as they are talking. The rest of the navigation options are the same as the type mode.

Take a picture: When on this mode the users are automatically taken to the camera where they can take the picture quickly and the translation can then pop up after they have taken it. Similar to the previous two modes, the rest of the features on this mode are the same as the type and speak mode.

'More Details' - I also want to have a 'more details' option in my interface in order for the users to get more information on the translation that they made. As this is the main point of my design, I thought that if I was to include this on the screen where the initial translation is done, it wouldn't look as important and because of the size of the phone screen itself it would look really cramped on the page that it would just look really confusing and unattractive. It may also make the users feel like they are being overloaded  by information so I've decided that it's probably best to have it in a separate page.

Thoughts & Reflections:

Overall, when I started to make these wireframes I was feeling great about it because in my head it actually made sense and it looked quite good and the user can navigate. However, after finishing them, I feel like they do make a good navigation experience however it looks too generic. As I've looked back at it again I feel like I've focused too much on the 'normal' features and the basic translation information that I didn't utilise my main points e.g. having the context, use of the translation so I didn't make a more innovative interface. I think I'll do this again, and create a design that's more centred towards the main point.

Visiting Professional: Stephanie Bell

Know who you're creating for and what there persona is.

To be Digitally Native:

• growing up with technology
• be more aware of how to use it and be more innovative
• Always think about mobile use first then scale it up to desktop version as most users will have a phone.
• look at details such as 'average thumb size'.
• the clearer you make something to be, the more consumers you'll get
• AB testing - human psychology applied to UI for UX
• *SocialChain
• Brief comes in -> Ideation and Decisions -> Low Fidelity Wireframes (Sketch) -> Feedback -> High Fidelity Wireframes -> Feedback -> Refinements -> Prototype -> Build
• Wire framing -how it'll look, how can it be used, what does something do on the page.
• *Sketch - helps with wire framing/ websites 
• What do you look for in a good app? Clean, minimal (LEAN UX = bare minimum) toned down colour palette, clean crisp fonts -> UX and UI Apple guidelines* ; something that allows you to do what you want to do quickly, the main point  of the app is there right away

• what content, navigation, pages, social media

Thoughts & Reflections: 

I really enjoyed Stephanie Bell's talk as she was really enthusiastic and shared with us how she got started into design and the kind of route that she went through, as it was quite different than usual. As she studied Fine Art I thought that she would have to learn new skills and knowledge to be proficient in designing for screen - she did and she mentioned how she went to Shillington College and did a lot of intensive courses as well as learn along the way from her seniors in how to operate design and create design for screen. I thought this was quite interesting as I would have never thought that she got a different degree other than Graphic Design. She also talked about how she worked with a developer in order to produce her designs therefore she doesn't actually need to know how to develop the software and the actual app. I also learnt about what a good app should have and her preferences and thought about a good app features. 

Lost in Translation Translation Brief

I decided after comparing this idea to my other ideas and the good response from the group crit that the English translation app idea is the idea that I will take forward for this brief. I think that choosing this idea would give me lots of content to include in my app e.g. actual translations of words and giving it context, linguistic aspects etc. For the UI as well I will hopefully be able to create a simple interface that will be easy to navigate as the message and information that I'm trying the users to get is quite straight forward. In addition, I also think that having it as an app will be more effective than a website because phones are portable and can be taken anywhere as opposed to computers that are less compact. I think the target audience is also appropriate for the app, as I feel like it will be quite useful for people who are moving to another country (*my main audiences will be these demographic, however it may also be useful for ordinary people and tourists) in order for them to learn local terms and society norms to help them in their everyday lives.

Overall, I think I've put enough information in this brief that encapsulates my main point and idea of what it's going to be, who it's going to be for, how it will be used and why they will be using it. Although, I might still refine it more as I get more feedback and develop my idea further - also I might need to change the name as its too long at the moment, something short and snappy will work really well which can be memorable to the target audience.