PORTFOLIO
Magazine Cover
The objective of which to transform this cover to something that is exciting and good look at targeted at younger viewer.
Magazine Cover
This is a basic cover which is created for younger views on general discussion on media and entertainment. The purpose of which to covert the original cover to something that is of engaging to younger viewers.
UI Mock Up
This mock up is basic sketch and wire-frame of a interactive website that was created using PowerPoint but later were converter to full website. the intended the target was young users as the aim was to develop a exciting yet fun and user friendly experience.
The mock ups presented above are the initial sketches and wire-frames that were designed before agreeing on the final design. The mock ups shown are of attempts that were created to help me identify the most appropriate design to meet the target audience.
Game Elements: House
The images shown (top and bottom) are comparison throughout the development process to the final production. Created using 3Ds Max, the assets are used for game elements as I was the asset designer and developer at that time.
We're always working on something. Most of the time, we're focused on getting results for our clients. But every so often we get the chance to experiment with new concepts and ideas.
I'm always working on something. Most of the time, it's getting results for my clients. But sometimes, it's a personal project that lets me explore new concepts and ideas.
Tree
These image comparison between the development phase and the final rendered views which were used throughout the final stages of development. The final rendered images are also shown below with their final textures and color that were used in the final production.
Road
Asset Textures
House: Top
This is created and applied to the roof of the house as I wanted created strong but subtle look. (see house section)
House: Body
This applied throughout the body of the house as it resembles a brick texture giving it more modern look. (see house section).
Road: Surface
For the road, this texture is very ideal as it's colour is very common and resembles the color of the road. (see road section).
Road: Pavement
Created for road's walk path as this texture tend to blend in well with the surface of the road. (see road section).
Tree: Bark
Used for the texture of the bark of the tree as this kind of colour and texture resembles the outer layers and stems of real tree. (see tree section) .
Tree: Leaves
Basic choice of texture and colour for the leaves of a tree. this is basically the static colour of the tree where in rendered and development stages this is adjusted for authenticity. (see tree section).
The Project
The project was creative writing application which consists of a short story creative writing application for younger children. The aim of which to develop a tablet based interactive tool to assist primary school children in writing short stories. The developed application must consists of both audio and visual assets to help support writing stories.
Contribution
My contribution within the project was to design, create and develop the required assets which then were to be handled by the developer. The choice of colours, textures, the number of assets, audio and visuals, are to be decided by me (designer) but must be reasonable and is doable within the time-frame (11 weeks).
Timeline
All activities and decisions based on the game is outlined here as some adjusted were made during the development stages. The timeline shown here is the final outline of the timeline having made all the final adjustments.
During the development of the project, I also created sounds that are essential and significant to the game and some of these sound will also benefit younger children. The audio created for this are mostly sounds that will bring happiness and excitement for children. These sounds will provide children with more engagement and involvement throughout the game without getting any frustration or boredom.
If interested, the link below is an attachment of a list of all audio assets created and used within the game as it consisting of all the details of each audio file!
Mobile App Interface - SmartCENTER Home Automation App
The purpose of this was to design an interface for a mobile app (phone or tablet) in regarding a prototype for a home automation app for controlling smart devices around the house. The design prototype can be presented in any form as the presented prototypes does not have to be a fully-professional production however, must be high-fidelity. the design and development of the prototype can be achieved by the use of any software package as these were created using combination of Photoshop and Illustrator.
Login
To access the login screen, the users simply needs to open the application and enter their email address and password they chose when they registered with the “SmartCENTER” application.
From the screen above, we used the email (example) “[email protected]” and a 9-digit password, if the user doesn’t have a SmartCENTER account, then they will need to register by clicking on the “Sign Up” text in white at the bottom of the screen, this will then take the user to a website in which they can create a new account.
After the user has entered their details they hit the “Sign In” button, and the application will take you to the housing page.
House Screen
After logging in with SmartCENTER, the user can add a house using the settings icon, once a house is added the user can then add the address of that house through the settings icon once again.
The settings icon can also allow the user to add specified items that some house may not have, and for instance, the user has two houses in which he can interact with by hitting the “Select House” button.
As we can see above the current user will be displayed at the top right hand corner of the screen. Also the app must be connected to the same Wi-Fi network to select the right house.
Menu
After selecting the users house in the Housing Screen, the user will be greeted with a menu screen for the respected house that they selected, in this screen we can see that the user has selected “House 1” as indicated on the top-left corner of the screen.
We can also see the user has a wide range of tools, devices and other accessories that can be recognised by the application. Also the devices listed are only displayed if the devices are smart enabled and support it.
Wi-Fi Settings Menu
The following page shows the user in the Wi-Fi settings menu, as you can see a list of devices that are currently available to connect to the houses Wi-Fi.
The screen on the right shows several devices, which include PC’s, Phones and Gaming Consoles that will be detected and able to connect.
The user will be given a choice to decide in which devices they want connected and devices that should be disconnected.
Surveillance Screen
This screen shows the surveillance camera screen, as we can see from the user interface; the user is in the Camera settings.
The idea behind this is to show the user all the cameras that are currently active and inactive. Only shown if homes have cameras and are smart enabled.
From the screen, both the front and back cameras of the house are currently active whilst the sides and the main door are currently inactive.
In order for the user to activate these, they would simply have to slide the switch to the right to activate the cameras that are currently inactive.
Surveillance Availability
This screen will be displayed if the app were unable to find any cameras within the areas and will notify the user.
While scanning, the icon will rotate in circles informing the user that the scan is in progress.
When the “No Cameras Are Detected” is displayed the user must press either the home or the back button down the bottom left and right of the application.
Light Control Menu
The following screen shows the user about all lighting within the house, the user can control the lighting within each room, they can choose whether to switch the light on and off, via the button under the light bulb as well as dim or brighten button on the top right of the screen.
The other lights within the room is controlled via the drop-down menu on the right of the screen; this allows the user to control each of the lighting elements within the house per room.
For example, in the screen above, to select the lighting options within the Living Room, he/she would simply hit the down arrow next to the Living Room and then flick the switch on the light bulb onto on.
After this, the user can then decide if they wish the lights to be bright. In this case, the user has set the brightness of the lights to approximately 50%.
Room Control Menu
The rooms menu is to show any other electrical appliances or devices as this is only displayed if connected through the same network and they come in support of smart home app.
In this scenario, for the Master Bedroom drop down menu, there appears to be electronic curtains and windows, which the user can open or close, by simply clicking on either the “OPEN” or the “CLOSE” button.
Room Temperature
This screen basically the displays the set temperature and details for a specific room as it will only display the details one room at a time. From here, users can change the settings of that specific room as the changes will remain saved.
Climate Control Menu (Specific Devices)
In this menu, the user is able to select whether they would prefer to have the Air Conditioner or the Heater running, whilst also being able to set a timer for how long they wish to set the cooler or heater running.
At the bottom right of the screen is the temperature settings allowing the user to set the temperature that they wish the heater/cooler to be running at.
However, in this instance the user will only be allowed to control one device, meaning that whilst the Air Con is turned on, the heater therefore will automatically be turned off.
This basically allows users to control specific devices within the house as the setting will be different for different devices.
Website
This website design and creation is very basic as the content is based on one of my passions and were design as per requirements during studies. The website was created during my early year of studies as the design consists of basic use and understanding of HTML. The purpose was to create a website with some images, content and more importantly functionality. This website was also done within a group as I was responsible for all the HTML where my member were in charge of the content and the report as they did not have any experience with HTML.
Home
This is basically the home page of the website as the navigation menu is visibility centered to suit most users. The home also consists of a logo which is consistent throughout all pages making easier for users to navigate back home.
About Us
On this page, we provide you with our introduction to this online store and our main idea. You can fully understand what this site includes and the type of goods in this
store. If you want to browse for other products and information, you can go back to the homepage via clicking the logo or the link "return to main".
Products & Services
This page, we distinguish products according to the scope and type of goods, we will constantly update the product and design, but regardless of the old and new products, we can still provide services for those who need more traditional or retro design.
Our clothing number and layout are comprehensive. Therefore, all the requirements of the user can be satisfied.
We hope to help each customer's approval by giving them an ultimate secure online experience, and have each of our customers recommend our products and services to our friends.
Contact Us
Here you can find all the ways to contact us, including: phone number, email. You can also find payment methods and our address. If you have any questions and feedback about the product you can contact us through this page.
Terms & Conditions
In this page, you need to read the terms and conditions of this site, including: registration, orders, online purchase of deposits, purchase conditions. The purpose of
this page is to guide you in the right way to buy the staff and meet the purchase conditions.
Orders & Refunds
In this page, we provide you with detailed information about orders and refunds. If you have problems with purchasing goods, you can read this page. Any problems with any items, concerns or suggestion people have are welcomed.
Website on Climate Change
The website below demonstrates a more functional and interesting website based on the facts and information on climate change. Initially the development of the website began through a course but did not manage to finish it as I decided to finish the website in my own time. The aim of this was to create informative website on the impacts of climate change and how it happens as well as ways of reducing or prevention. As well as the information, the website were to also consist of the use of HTML, CSS and JAVA, which all these combined will add style as well as functionality.
The start of the website containing introduction to climate and a quote which users can interact as when the button is clicked, the quote will appear and re-appear. Also the heading 'Climate Change' will change colour and font once clicked (added it to make the website more engaging and interactive).
Moving further along the page are some of the reasons and facts for climate change as clicking the button will reveal the facts for that particular reason.
Move further along the page.....
Scrolling down the page.....
This is the end of the page as this also provides the users with references on where they can visit for more information as well as providing a option of taking the quiz based on the information on this website.
This is the quiz page where all the question are based on the information provided in the previous page.
At the end, user can submit the quiz which at this stage will only provide a 'thank you for completing the quiz' statement or they simply click 'back to main' to take them back to the home page.
This is a simple validation where if the user were to submit the quiz without the his/her initials, the initial are to be 2 letters and the surname limited to 50 characters.
Capstone Program: Project Design (Group Project)
The core idea of our project is to take what used to be a paper based system and turn it into an automated service that will assist the client with their research. The product will take information that is entered into a form and perform calculations based on predefined values to predict whether a current basket and healthy basket are affordable based on incomes. The client has requested the following features in creating the final website:
Website Design: This features a home page and a product page
Database: The information regarding the food items, stores, users are all stored in Deakin’s Oracle Database
User Registration – people can create an account by providing an email and password
User Login: Provides a user access to the food data
D3JS: This is the recommended visualization library by the group’s adviser
Affordability Calculation: The equations for the calculation of affordability and total cost of a basket for a fortnight
OUR PROJECT: We are a web-based platform for recording data for monitoring the price and affordability of foods and diets in Australia. Monitoring the price and affordability of a healthy diet is essential to inform public health policy making. Current methods to monitor the price and affordability of diets, using market-based surveys, have progressed substantially in the recent years with the development of the Australian standards for affordable pricing method. As these methods rely paper-based data recording making it a resource intensive process, as our website will be essential people who intends to compare prices of a healthy diet and the affordability of the foods that interests people.
Above is the initial mock up sketch of the website UI
UI Designs
These designs are the mock up designs of the initial sketches which was done within the planning stage as per requirements some pages and design assets were changed throughout the development. The changes made were initially made by me as I am the designer within the group but were changed due to conversations with our client and project manager.
The site will contain a section to which the users will be able to input specific data that relates to the healthy food prices that are offered.
This will provides users with the necessary information on all food prices as per to the request by the users. It will also provide an option for users to compare prices within their health diet.
The website will provide users with prices for all food that are categorised within the healthy diet and will allow users to compare the prices and be able to choose a healthy diet that is affordable and will save money
The site will also include a search bar where users are able to enter any type of specific data and it would provide the user with the all relative information that matched the descriptions.
A search function will avoid users being lost and provide users with sense of direction on where things are located.
The site will allows users to display all the product prices and will provides users with the prices regarding the food products that were previously displayed to that specific user.
UI Assets
The designs below are the assets that are used in the website as these were created and designed completely from scratch with combination of software packages. Some assets were previously used and removed due to discussion with the team but most importantly the meetings with client as the objective was to build the website per client's requests. The focus was to create and develop the logo and search icon for the website as I experimented with a variety of layouts and colour to created the right one and based on the discussion held with our client. However, for the search icon I decided it was best to use code to develop an interactive search bar, a decision that was accepted by our client and team.
The first layout for the logo
The second layout for the logo
The third and final layout for the logo
The first design of the website logo, decided against using this as it to me was not very interesting
The second design of the website logo, decided against using this as it a little wordy to my liking.
Finally I was happy with this design as elegant and subtle, it also resembles the previous logo for Global Obesity Center. We cam to final decision on this logo with further discussions with my team as well as the client where both parties were satisfied
Capstone Program: Project Design (Website)
Below are the designs of the website that I did as per my contribution as these screenshots are not of the final production. The designs shown below are however are based on the design of the final website but the design shown below are only the important pages that I had to make since being assigned to them.
This is the home page where the menu is located in the left, as the user moves the mouse over towards the menu tab it will automatically expand as shown above while staying hidden when browsing.
When user navigates the menu links, it will appear in different colour as presented above where the page the user currently at will be highlighted.
The user wish to click on one link, it will navigate the user to a different page providing the user with all necessary information.
Our website contain a search function in which the user are able to type a specific keyword or in searching for something particular food or any related articles about the organisation.
This function specifically designed to be used within the website where the search in limited to within the information that can be and available in the website database.
The search function will move to the left once the user hovers over the magnifying glass icon located at the top (as shown above).
The registration page is new customers who are willing to register within database, which requires a user name (ID), password (8-20 characters) and an email address which provides our admin with a contact email of that particular user.
This also provides the admin to make sure to approve that current users who has recently registered within our organisation and the database.
Throughout registration process the system will also check to verify that if the same user exist in the system and notify on users on the appropriate action.
As the registration is completed, the user will receive a confirmation email with a user ID and a store ID provided.
Once the registration process is completed, the users only have to login using their userID and password.
Throughout registration process the system will also check to verify that if the same user exist in the system and notify on users on the appropriate action.
Capstone Program: Project Design (Final Design)
Below are the designs of our final designs of our website design as we as a group decided to change variety of elements within our website. The changes were significant as per request of our client as these designs were done later in the year. The other reason for this was the given time frame as well as the requirements for our client, however the screenshot shown below are not of the final published website.
The home page, defining the purpose of the organisation and services while highlighting the services that are offered to customers.
The account allows to register to our database where users are able to fill in their personal details as well as create/change passwords.
Shown above is the home page but the focus being the footer of the website where each page will consist of this footer for better user friendliness by offering these helpful links.
MOBILE CALL APP: UI DESIGN
The primary aim of this project is to demonstrate that you can create the User Interface (UI) and User Experience (UX) of an Android app, and compile and run it successfully on Android. This project is focusing just on the graphical user interface (GUI) and related events (event-handling functionality), not specifically on programming as programming focused later on.
PHONE-BOOK: PEOPLE
Lists the people that are saved with each displaying all details of the people.
PHONE-BOOK-PHONE
This category displays the previous call made with all necessary details while also allowing users to make calls with numpadx`
MOBILE CALL APP: UI DESIGN (Mock-UPs/Wire-frames)
Below are some of the sketches done prior to building and designing the app as some of details were decided at that time but were changed through the development process. The app a basic UI design for a mobile call app as with the initial stages task was to just design the UI as later on I worked on the functionality (programming).
NOTE: If interested further details on the task complete prior to this project are included in the link below (portfolio) as it is separate portfolio of this project (unit) and tasks involved throughout the process. Also this is in relevance to above images.
GAME PROJECT: GAME PROTOTYPE AND DOCUMENTATION
The aim of this project was to design and develop game prototype based on the 'dreams' theme as every aspect of the game can be of our choosing. However, when creating the game, the idea of the game must new which we were avoid the use of an existing game with the theme dreams. The final developed product must be a functional and consists of the 'dreams' theme.
The images shown are some of the design and element that I created as this project was done in a group where I was the environment and level designer for the project. Also note that the images below are done in the early stage as to show the progress of the project.
The images below are the final rendered images of the level and environment designs for the game as these will used for in-game puzzles that will appear before proceeding to level stages. The designs included show different variants of the settings as well as the angle of some levels due to the larger scale. Some of the level and settings shown have different climates that will appeal to some audience and players.
The game was only partially developed and is functional as per requirements of the project. As to the game being partially develop was mostly due to the time frame as we were only given 6 weeks to produce what we have managed achieve. If given more time were would managed to complete the whole game as the designed shown here are the contributions I have made to the project.
NOTE: I have also linked the documentation for the whole game on the things done and of the things we were meant to and could have achieved. If interested, feel free to browse through with the link below!
