Assignment 3 #6

this blog will be a little different, it will be on writing the report but ill still follow the same structure being analysis > feedback

 

so i start writing my section.. which ends up being two sections as Dylan and I did the entire report, I was still happy to get help as it was a big job.

my two different parts i wrote about was UI and UX design, my main part and the part i will present is UX design however,

so we hurry with haste to the achievement criteria for the assessment and see we need 6 parts on UI design, UX design, Media design and Web design, we will not aim for any less so i hope my buddy has also done his part to equal of my work quality!!!

i already had my 6 keywords for each and they were:

UI : Color scheme, Controls, Navigation, White space, Symmetry and Navigation element positioning.

UX: Usability, Accessibility, Pleasure, Clear design, Responsiveness and Being easy to find.

so I start by re writing the definitions to my own understanding, this will show if i actually know what i’m talking about eh!

and then i take my time filling in the rest of the report

EDIT:

instead of wasting your and my time writing about how i wrote the report as it can be seen in the submission anyways i’ll like to talk about our presentation instead,

Slides planning:

i want to cover all 6 of my UX points in the slides, i think this will outline what i learnt and help outline better what is going on inside of the website, i also want to add humor also, so i ended up adding GIF’s in there, but mainly it had the facts the audience need

also i spent some time refreshing my knowledge on how to write up a good slide show, and i actually found on the home page of Google Slides there was a guide, the majority of the slide actually said to use lots of white space! who would have thought that at this point… continuing it said to try make it punchy and add the good stuff and don’t bore the audience with walls of text, this i can do! (The not bore part i mean)

so i make a summarization of the report contents and also outline key concepts that were not relevant in the report setting to really capture everything i need, we only managed to have time for one practice run for the presentation, but we devised a plan and made Q cards on where we struggled from presenting on the spot and this helped a lot.

i don’t normally use Q cards but i wanted to try and see if it helped, it is easier to loose track when using them as you have two places to focus, on your audience and the cards, but it saves you when you are lost! so is it any better? i’m really not sure, I’ll get back to you when i have a giant corporation and google is on the verge of closing down whilst i’m conducting massive presentations, hell maybe you’ll even happen to be there who knows.

Not 100% sure where this blog went, it had Reflections through out so i wont make a section this time around, so i guess my “Extra section” will be on evaluating the class

My thoughts/experiences with DES501

To be quite honest i really thought i was back in COM501 quite often through out the course, this isn’t a problem and i realized carrying on the key concepts from COM501 to the presentation would help lots, and the report writing alike, and it did.

But i felt that the amount of time doing web design was very limited, i felt this could be improved on in future iterations of the class, i spoke to many individuals for their input and they told me they could not tell COM501 and DES501 apart for the first month and i’d agree to an extent there.

however there isn’t all negatives, i thoroughly enjoyed the professionals coming in to guest speak lots and learnt a lot from their presence and working with Liz and Belma as tutors made me put more effort into my reports and presentation without me realizing until now, i like this as we should be doing this anyways really, it pushed me in the right direction and i enjoy the critique from professionals in their work divisions.

I hope you guys enjoyed teaching us as we enjoyed being students, I wouldn’t even pick different teachers for the subject if i could, that’s for sure!

 

 

 

 

 

 

Advertisements

week 13 – media design

today we learnt about media design, what it is and its key aspects you must follow to be proficient on the subject,

what is media design?:

Digital media is any media that is encoded in a machine-readable format.[1] Digital media can be created, viewed, distributed, modified and preserved on digital electronics devices

what are the key terms:

typography

images

logo

banner art

video

page layout

how can you harness the goodness:

 

creative typography is hip and is a trending way of design now, if used correctly then it will help send the vibe that the customer wants, usually this can be placed all over the site so go crazy!

images and placement show what the site is about and help set a first impression, even textures can do the job, it doesn’t have to be about something in particular, many leading game sites only have pictures of actual titles not a background image of something

the logo is who you are and how you stand, also has a similar vibe to the collation of pictures on your site, his can be quick or take the longest of all to decide, its usually up high next to your site name, as they both identify and flow together about who you are.

videos are a special thing, they don’t always have to be in there and sometimes they just don’t suit, like a medical place, we really would not like to know the horrors within!, but if they do apply and are executed correctly then it is a fantastic application to your website as a picture says a thousand words.

page layout i found is one of the hardest but most satisfying things to get correct, it seems easy when you’ve seen a couple hundred sites but when your staring at a white page the ideas really don’t come to you, so its best to research this as you go, same as the color scheme.

Assignment 3 #5

today i press on and want to add flare, and enhancements to the website, i’m very happy with the home page so far but i want to just add more to the website and get it close to functional so far! lets start

so unfortunately i will not have time to make every page, but i want to try my best and start with relevance then work downwards onto things that is more of a polish then anything, i have made all of the pages so i will show the page and talk about the making and design decisions that were undertaken.

Login:

login.PNG

this page i felt is the most important and is in the design brief, well not to make but the user must be able to login, anyways if i was going to make pages this would be one of them, anyways.

i have positioned the navigation bar at the top so the user can see where they are at all times, this will be a common addition across all of the pages, also i have kept to the black charcoal box and the content inside, i added in a newer iteration which is this one an employee login which will go through externally to the vap0r-X site, which is a place you can view pay details, kiwi saver, annual leave balance and more.

the rest consists of customer log in, and a register field as we need there and a forgot password button, i nearly forgot to add this as its not easy to remember these things even though you may have used them a thousand times before.

game:

game.PNG

this is the showcase page for a game listing, here you can have easy access to the cart and view it when you’d like to, and a bigger picture of the game as its the only thing on the page,m and more picture/ video selections down the bottom, and a full game description inside of the charcoal box this time, these are factory descriptions and this one happens to be quite short however.

also i have implemented the supported platforms a swell so you wont make a bad decision as it can be a clear assumption for a user who isn’t very tech savvy to make these purchases and pull out the short straw and have problems, also the updates section updates and pulls the data from the live developers website as it does with the majority of the content including images, and video so the page is self maintained to a degree.

cart:

cart.PNG

the cart has been made simplistic with the navigation bar again, not too sure where the site footer went but it is there on this page, but it shows a list of the items added, the supported platform as a kind of confirmation to the user, the title and picture if you’ve been browsing for a while and forgot what one thing is and a price.

subtle things have been added to make the users time easier which includes removing the item and all items, these have been slightly dimmed so they are not popping out like the more important stuff, and we don’t really want them to do that! but if they must there must also be a way to do so

games:

games.PNG

the last page i have added is a list of games, i still maintain the white space here and try to make a nice collage of games at the top, these are new and trending titles only to make the page look appealing and most of these will be bought also as they are trending removing the use of trying to find them through search/filtering

below i have added a few tabs to choose from, these i felt cover most of what you need without adding to many and destroying my minimalist approach I’ve been trying to go for since the start of things.

New | Top selling | Specials

there is something for everyone here and factors in people that don’t have as much money and also like to game, its easy to pack the latest and greatest everywhere but forgetting this group is literally shooting yourself into the foot as more traffic and sales is made up with smaller purchases, so this way those users wont feel intimidated and leave like the scenario of an over priced restaurant or something. through out the design i wanted to add in the slim white lines for balance and guidance as they seem to blend well with the color scheme and don’t stick out like a sore thumb.

Reflection:

what i enjoyed over the course of website design –

i really loved and could not put enough emphasis into, is that Axure was introduced to us quite early, this tool has been a blessing and a half to use! i was going to do this whole thing in Visual Studio, it is not for web design but you can do some nice forms in there, i did this last year for my COM501 presentation and it worked well, but this works nicer in larger scale projects as you don’t have to spend as much time coding, and you can focus on more aspects of design, also the transitions work fantastic, transparency has full support, something VS is not as good at unless you want to put in extra time making it work which is unnecessary compared to this fabulous tool!

what i disliked as a whole –

i felt Axure should have been taught more in class time, as this was a big part of the assignment, it didn’t have to be as the requirements as just for a home page, but it will let the students strive better, it took a considerable amount of time learning each aspect one by one on YouTube as the videos are quite long to get one simple thing done, but it really paid off and i most likely will be using this tool in the holidays and designing a bit for fun.

our teamwork –

our teamwork was actually non existent, we were all working on other subjects and the load was a bit much, this being due later then the rest was kind of put on the back burner a little, i’m surprised we actually got all of this done to be honest, it all flowed together a lot better then i expected it to.

 

 

Assignment 3 #4

i recently have been working on developing the website visually and functionally.

i will start to research component/control placement placement and see what will be good relative to our topic of selling games.

.

.

.

my internet went down at this point and after a few hours i had to continue and do my best with the screen shots i have saved and the knowledge I’ve learnt so far, time to dive right in!

Capture.PNG

i wanted the game layout to be on a pad, like this color, i feel it suits the background and does not become to be much of a focal point, it really adds a good touch and we are off to a good start here, also i have added a navigation bar, i did some more background searches on what to put here as when your website is searched for these links will show under your site, this was new to me but i needed to have some good relevant stuff here as its really the heart of navigating the core of our website and we needed to be clear cut and direct with out things being too vague.

so here the navigation content stands: Home | Games | Videos | News | Account Settings

I feel this has very good relevance toward the website and should cover everything a user will expect to see here without checking and needing to do a page scan to find it.

next inline i need to add some good content, something to make the page look more filled and add more functionality

Capture2.PNG

i have added some white dividers i think this is a nice touch, because they are slim they do not act as a vocal point and just ft in with the design quite nicely, also i have added a genre tab on the side where the user can re-define their search on the home page, i think this is important as if a user lands on our page and wants to see if our content is up to date, they can just hit their favorite category and check, or if a particular item is listed they can do the same, also this is a games site so on many other sites such as trade me or car dealerships, usually there is something similar because we don’t want to get he user to expect that they have to know how to use the website in advance, this part is very clear and concise.

and now to finish the deal i have made my final iteration, many iterations have been made up to this point, and what we have just works well so far, here it is :

Capture3.PNG

many small touches have been added like a much needed cart, its a store after all, not a charity. more titles and their details are listed below and I’ve positioned the description next to it and it looks nice, the middle is quite bright so i went with a black around that area when i’m outside of the charcoal boxes, the add to cart buttons have been added for the content and i’ve been working on making actual embedded videos for everything, i did this in the last iteration but work better now after some practice. for the brief we needed the relevance to all stakeholders and what the site aim is so i put this off to the side as its not super crucial to have dead center but is visible without scrolling, i feel there is lots of good white space now and most of the functionality has been met so far.

 

Reflection:

 

what i have learned so far –

I’ve learnt so much about Axure, i never knew the software was so intuitive and had click events! i thought it was great when i was prototyping but when i accidentally mis-double clicked on something i found i can add events, this gets even better as i can crank up the complexity one step more!

what we could have done better –

once again i really wish we got to spend more time on this whole process, just with the time management i feel a little over whelmed, but i want to make a outstanding product which sticks on presentation day so ill keep going strong

time management –

time management is the only let down, with all of the other demanding classes i would have liked to spend more time on this, it has been a big blast of fun every time i have had a chance to work on this as its a break away from the rest of the similarities in the course, i see a lot of code and this is expressing feels with out any!

to conclude this post everything is coming together nicely, its only been just over a week now and the website is looking fresher than produce. i’m actually quite happy with the outcome which is quite rare for anything and want to go the extra mile and add more even if it isn’t needed, until next time folks!

 

week 12 – web design

today we learnt about web design, what it is and its key aspects you must follow to be proficient on the subject,

what is web design?:

Web Design is a series of steps which go hand in hand to design a website making sure that all the basic aspects are covered which creates a professional looking website.

what are the key terms:

information/site architecture

categories and navigation

responsiveness

mobile support

color scheme

how can you harness the goodness:

by adding good categories and navigation, your website will look and flow better, navigation is normally under the menu bar and the categories is normally either side apart of the while space.

optimizing your files and making sure they are no bigger then what they need to be by checking the scaling will mean that your website leads extra fast all the time.

mobile support could mean re coding your entire website to suit that language but this will mean the customer gets a better user experience when they sit down on their cell phone / tablet and could mean that they choose your website over others for this very convince

color scheme must be researched and relative to what you are tying to do and what aims your website is trying to hit, as you could make the base colors for a mail site red or yellow and a professional site have lots of white and blue and appear structured to give the end user the right feel when they are using your website, its the correct matching vibe that will determine if they stay or not.

Assignment 3 #3

today i am working on researching the right amount of white space and probably going to make a base website design.

so instantly i hit google once again to get white space guidance and stumble across this page which sums up white space quite well.

http://www.seguetech.com/whitespace-web-design/

the page summarizes beautifully 6 points of the advantages of white space.

1 – the content is more legible this way, it also helps the user keep focused whilst reading and understand the content better.

2 – it speeds the user up helping them understand what they can interact with and gives clear guidance on what can be pressed on and most likely how it will react also.

3 – highlighting call to actions (CTAs) surrounding controls and images with white space will make them stand out, so making them bigger isn’t the only way, this way can be more effective rather than increasing the image size

4 – white space makes your website look superior, color schemes and such are important but white space really sets a website apart from another, the site will look very tidy and impressive

5 – creates the correct balance, not enough white space will create distractions and confusions for the user, but too much white space can create a lack of options/content for the end user

6 – the white space will act as a separator for different content so you don’t have to add stupid images or boxes or whatever, white space has got your back

 

 

these were very handy facts to learn, and i will try my best to stand by them as their site uses lots of white space and noticing this is amazing when reading their content as it flows nicely and i know exactly what they are talking about.

the next thing i will research is the element layout positions, this can be specific site to site, so ill stick with known gaming brands for this one for help and reference.

uplay_vs_origin_vs_uplay.jpg

i have already compared the websites but i go back for another look, i don’t want to fill this blog with pictures and no content so i will only show steams design as its what we will try and employ in ours with out copying, just trying out and using concepts.

Untitled.png

i have circled the content, they don’t actually have much but all of this content really packs a punch as its everything you need to do without lack of content.

they have a logo with cross related things that they also have as a game selling corporation site.

below that they have a navigation bar which is the main aspect of their website, slimline and powerful with login features above it.

next they have a browse by category, and recommended games, this surprises me how recommended games is above the categories as this isn’t how id make my site, but this obviously blends in as i had to do a website design course only to notice this years later and it works well, which means people care about recommended content, something to remember.

 

i try my best to make a starting design for the website, a base if you will, this took hours of finding the right resources for a backdrop but eventually we found something that works for now and behold! here it is:

Untitled.png

here is a base design i made which will work good with lighter text, white or a light grey perhaps? following closely to steam but i wanted a non scrolling texture which contrasts well in the back, and we have done that here, next time i hope to have most of the site done and blog about that

 

Reflection:

i would have liked to have done –

even more research into the color side of things i’m not 100% happy at this design but hopefully time and time only will be the cure for this as we continue to work on our following design

what went well –

the outcome for the actual amount of time shocked me, its amazing how good something and not to mention how much better it can go with preparation done before hand, I’ve done a few art classes before but needed a few content refreshers on contrast and complementary colors, the color wheel, hues etc to make this all happen

next time we will –

work on designing the site, i want to stick to this design or if something better comes up ill be happy to use that instead, but this looks not too bad if i do say so myself so far, but control placement and making a suitable trim color would be nice, because purple text is not going to work well on the purple background now is it!

week 11

so far this week we have been learning lots about UI and UX,

UI – this is the look of the website

  1. Colour scheme

2. Aesthetically pleasing

3. Controls

4. Navigation

5. Fonts

6. Use of white space

7. Use of symmetry

8. Rule of thirds

9. Positioning of navigation bar

10. usability

UX – This is the feel of the website

core features are:

  1. Usability (easy to use) (intuitive)

2. Accessibility

3. Pleasure from using the product

4. Clear and good design (not cluttered/ messy)

5. Responsive ( fast to use)

6. Easy to find/findability (no experience if it cannot be found)

 

We have all learned lots about UI and UX design, next week we should be focusing on media design and web design aspects

Assignment 3 #2

firstly, ill set a layout for my blogs, after checking the assignment criteria it will include an analysis and a reflection down at the end, but also i want to outline the steps and why i took them, most will be through research and have a bias based on experience of others.

secondly i’m doing UX so i need to start with my sections on the website, i want to start with color scheme, this is a massive part and will determine all of the other aspects of the website, from if we will use the rule of thirds, control placement, everything really, so we need to decide this first as a group before we branch off to ensure everything flows nicely,

in the brief this must be more inclined to females but also not repel males either, as its for everyone but has a stronger basis on females, so this will limit down our options here.

i start by searching fun color schemes, something both genders can appreciate and will set the mood right from here on out as we went to mix in fun but professionalism in our website.

there were only few that really made sense to us as we only really wanted stuff that suited gaming to a good degree, many designs came up like this:

c1.jpg

these designs and color schemes would be perfect… if we all were designing a old people clothing store for 1980, this was not our aim, we notices a lot of purple and yellows came up and decided to like the look of how purple would look on the website, here is a general color pallet of what i’m talking about:

c2

the yellows didn’t suit well we felt for the style we were going for, but the shades of purple was fantastic! we loved it.

then i search the leading game sites:

uplay:

c3.PNG

origin:

c4.PNG

and steam, the legendary game market!

c5.PNG

we make a decision:

so we decide the reason steam looks so much better then the rest is its simple minimalist design with well contrasting text and brilliant use of white space balanced with things big enough for ample clarity, also the general design is intuitive and everything acts the way you’d expect it to.

we end up going with a purple color scheme, a charcoal trim and white highlights, the contrast will be good against these colors, everything very easy to see and a sleek finish, the purple will be good for the gender bias as teenage to late aged gentlemen are not repelled by the color, it signifies a sense of royalty when your of the age that girls don’t have “coodies” anymore.

Reflection:

the purpose of meeting was to find a color scheme and we did just that, it took long but was eventually done, next time if we didn’t have a time limitation i would have spent up to a week researching this and everyone would come together with their findings and make a better product.

next time we will use a SDLC approach also if we had more then a month to do so, perhaps the iterative approach would be perfect for this as this type of project flourishes with countless iterations, also making a well established plan at the very start would have been nice, spending a few days deciding on which one, but once again that would be nice if we didn’t have a time limitation on all of this.

 

 

Assignment 3 #1

today we have assigned work out to everyone for the report

Heath is doing :UI design aspects

Sean is doing: Media design aspects

Dylan is doing: Web design aspects

and i am doing: UX Design

firstly we will need to do some comprehensive research on these topics for our selves, devise a solution for the client, and then finally pitch this idea to the client

i start my journey on my UX design and find out a few key topics i need to cover which are:

Usability (easy to use) (intuitive)

Accessibility

Pleasure from using the product

Clear and good design (not cluttered/ messy)

Responsive ( fast to use)

Easy to find/find-ability (no experience if it cannot be found)

 

i need to make sure these elements work seamlessly with my design and i can pitch all of these ideas out, so i start on the moodle, i see there is going to be guest speakers coming in and my topic is among the first to come along, so i plan early and get a head start and i stumble upon this:

Capture

this time i am quick to learn more about it so dive straight in, firstly i want to indentify what software we should all use as a team and this was also on moodle

https://www.axure.com/

what is handy is they also give a free student licence which is valid for life, so we can use this software legally for the duration of the course!, i check to see if ive made the right descision by checking youtube for supporting documentation on how to use, and with millions of hits this looks like its well established and is well worth the try for now.

Reflection:

so far everything is going very well and linking together nicely, we should make a plan to book each others time for meetings as this worked very well in COM501, this will indicate success to the project and everything will be dandy, not much else to say on the reflection as we have only just started.

week 10 – class 1

today we talked about user experience (UX)

this is the emotional response of the individual to the item/object,

these can be good or bad, and shows what the product needs to improve and what it does well

good user experience matters so you can attract and not repel customers, and brings loyalty

 

good UX means you talk to your customers, you need to hear what they have to say and what they want

good UX means the customer comes to you, is happy to learn and use your product, and this needs to be defined