this document contains the word document to follow my app build for my self-initiated
UX semester 2
UX – app build phase 1 evaluation
Although I was only able to physically create the log in page for my app design I learnt so much which will just have to be practised in order to be put into practise. This phase of my development was designed to make a start on the actual app but the main aim was to be able to teach myself to used the Xcode software, this phase has required an extensive amount of time watching and reading on how to used the software and create the different aspects within it and what each of the areas are used for.
I would have been happier if I had created more of the actual app but it was difficult to get to drips with the software and how it works without guidance, although this one page took many hours to create with time the actual development would become a lot quicker and more fluent in its stages.
The rest of my app will be developed within the coming years at University throughout my course, my aim is to have a completed app within a year not only working on it in my assignment work but also developing it within my own time. The final product will have a completed app along with a website advertising it with the link to the app store to download it.
UX – app build phase 1 part two (walk through of app build)
This is a step by step guide of how I created the first part of my app using Xcode.
Although all I was able to complete was the opening log in page for the app due to the time scale given for this assignment this was due to having to research into the app extensively and self teach how to use it, I learnt everything through walk throughs i found online both written and videos but mainly it was through Treehouse which is a subscription community of industry professionals who make tutorials and references to aid other developers, I am unable to link in the specifics I used as due to the subscription nature the links just lead off to the home page.
This is the log in page I created using Xcode, this was challenging in comparison to using my usual coding software Visual Studio Code which personally I find a lot easier to use.
This phase shows only adding and editing elements, there is no real design to the page as I was keeping it simple to make the development more time efficient.
UX – app build phase 1 researching trends
The following are the links I referred to throughout my development;
- https://www.upwork.com/hiring/for-clients/11-mobile-app-trends-will-dominate-2018/ (app trends for 2018)
- https://crysberry.com/blog/mobile-app-development-trends-2018 (app trends 2018)
- https://medium.muz.li/top-9-ui-design-trends-for-mobile-apps-in-2018-14b4fa350d3a (app trends – best choice)
- https://99designs.co.uk/blog/trends/color-trends-2018/ (colour trend)
UX – app build phase 1 part one
For this assignment I am advancing on my previous assignment and building the app that I choose to break down and redo, I will do this from the information I gathered and my prototype I created.
Due to the size of this project I will be doing it in phases through my degree course, this assignment will be phase one which will be the learning curve of learning how to build an app through code and generate the first part of the app, I aim to have at least the home page created for this assignment.
After speaking to my code tutor he has advised me to use a program called Xcode to build the actual app on, he advised this as it is easier to build for apple platform first, I am going to follow his advice and will look into creating it for further platforms in the future.
I have found this video as a starting point to use as a reference
UX – browser compatibility
Different browsers read code differently which can cause aspects to be unreadable and produce a different visual on each platform or browser, this is why we test the compatibility. It is important to make sure that your website is compatible with all browsers and devices as this is how you optimise views and reach more potential users which means more sales and traffic for the website. It also allows you to achieve a better SEO (Search Engine Optimization) rating which brings you higher up on results for search engine. It also means that it has a better accessibility rating and conforms with WCAG.
The major web browsers which are used are;
- Chrome
- Safari
- IE (Internet Explorer)
- Firefox
- Opera
- mobile
When cross browser testing you should;
- test it on all platforms by using a simulator tool (mobile, tablet and desktop)
- each test will give you SEO data to analyse
- if you don’t have access to any missing data regarding browsers or platforms from the client test it on the more recent version of each and work back through older versions.
When you are ready to test the browser compatibility you must follow a plan;
- always plan out your process
- use wireframes when available to save time creating code from scratch (such as Bootstrap, these will handle a lot of the cross browser compatibility issues)
- You could also develop a separate mobile site for phones and tablets
The best way to be able to avoid compatibility issues;
- Run your code through a validation tool to flag any problems
- Know your audience, and client requirements
- Try to use framework
- Keep your design simple
- Anywhere possible reuse components to reduce the amount of code to make the website run faster
- Always test with the oldest/difficult/problematic browser available
- Make sure you constantly test as you go along to fix small elements before they become big problems
- Check any features functionality
An example of some browser compatibility testing tools;
- Caniuse.com
- Browserstack.com (paid for)
- Browserling.com
UX & User Centered Design Semester 2: Website presentation
UX & User Centred Design semester 2 website redesign
Design research
For influence on my website I have chosen to research Cameron Chapman and Don Norman.
Don Norman:
Describes design thinking as problem solving he describes the process as a continus circle of; “Observation, Idea generation (ideation), Prototyping and Testing” he feels that every design starts with the observation which is the foundation to every good design, not only looking at the product/service but breaking it down to its fundimentals even down to who will be using it and any problems which they could face along the way and finding the solution to these. From this inspiration I will create my foundation before i begin my design itself.
Cameron Chapman
(from the book “colour for web design: apply colour confidently and create successful websites”)
Cameron theorises that colours is one of the main factors and influences in web design, he believes it is directly linked to the popularity of the website, that a designer should build there own colour pallet from the foundation of the basic one and work from that to create a concrete key element in your design tools.
From this inspiration I will create my foundation colour pallet for the website using any colours which they provide or use as my foundation.
UX & User Centred Design semester 2 website evaluation
The word document containing my UX evaluation
UX & User Centred Design semester 2 website redesign
I have created mockup from my wireframe designs using photoshop but after creating a prototype using Invision I have since been locked out of my account from it and my exported file is unreadable across both my laptop, desktop and the college computers and will not upload to any storage or wordpress so I will attach jpg files into a post on here to create my walk through.
There are annotations to what would happen within the images.
The menu would be slightly transparent as not to take away anything from the image displayed, each option within the menu would contain a sub menu of further options which would drop down when you click or hover over it.
The home page image would produce a beautiful captivating video depicting the prestigious sights of Chester the only thing overlaying this would be a very basic menu at the bottom which would rise up once the video had finished.
Once you click on a hotel each of them would be displayed the same way to keep a layout simple and clean, the description is direct from “Late rooms” as are the images, the images would come alive as either a short video or slideshow of photos which would be to the owners discretion. There is a direct like to be able to book the chosen hotel which would take you to the comparison site http://www.booking.com which would ensure the guest gets the best price.
All the hotels would be stacked up within a very neat grid and the only information which would be displayed is the name as most people make a decision on what they see before they even read into it, each of the hotels would start a slideshow of images when you hover over it.
Naomi Eccles 