After Adobe Experience Design (Preview) I built my Loci Application design using my Initial designs that I had designed using Adobe Illustrator. In the prototype mode I linked all of the buttons to the correct pages (Shown Below)
I recorded the application working in prototype mode and uploaded the video on to youtube
I also shared the link to the application prototype on twitter (goo.gl/j2mH9e) and I got feedback from some of the developers who built the software Adobe Experience Design.
On Monday Adobe released the Preview Version of the Project Comet now called Adobe Experiences Design CC
This Is what adobe had to say
Introducing Adobe Experience Design CC (Preview)
On behalf of the Project Comet team, I’m thrilled to let you know that Project Comet has become Adobe Experience Design CC (Preview), or Adobe XD as we refer to it. We’re making our first preview release for Mac OS available today, with a Windows version coming later this year. Everyone can use Adobe XD for free during the preview period – you can download it from Adobe.com or through the Creative Cloud desktop app.
While our team has been working to bring you Adobe XD for some time, this really represents the start of our journey to craft an end-to-end solution for experience design, one that Adobe is committed to undertaking in partnership with the UX design community. We’ve seen how designers think beyond just the visual design of a website or app, but also on optimizing and improving the overall user experience. You can read more about Adobe’s thoughts on Experience Design as a whole here.
For Adobe XD, we’ve received great input from over 5,000 designers as part of our pre-release program and are now excited to get your feedback on our public release as we continue working on Adobe XD.
Adobe XD makes it easy to undertake wire framing, visual design, interaction design, prototyping, previewing and sharing, by bringing together the tools you need for experience design into a single solution. We’re starting by delivering a basic set of tools in each of those areas, with the feedback we receive helping to determine the ultimate set of features that you need, while continuing to ensure we don’t compromise on delivering amazing performance and a comfortable design experience.
What’s in the public preview?
In this first preview release of Adobe XD you’ll find:
Prototyping tools – define flows, triggers and transitions as part of your design
Built in sharing – create a video recording of your prototype or share a link to an interactive prototype hosted on Creative Cloud
Support for bringing in existing assets from Photoshop, Illustrator and Sketch
Blisteringly fast performance – create projects that bring together complex designs for web, mobile, tablet, watches and more, without any slow down.
As you get started with the preview release, be sure to check out the sample file available from the start screen, as well as our learn tutorials and documentation.
What’s still to come?
Being a preview release, we’re exposing a work-in-progress. This means you’re likely to find some gaps in the tools and likely wish for increased capabilities in a number of areas. We hope you’ll embrace the opportunity to join us on this exciting journey as we continue making progress on Adobe XD.
Based on the feedback we’ve already received, these are some of the areas that we’ve lined up to work on next:
Enhanced design features, including support for gradients, richer text, effects and blend modes
An improved color picker
Support for working with layers
More control over the sharing of prototype links
Authoring of scrollable content
Micro-interactions for prototyping
Real-time design preview and prototype testing on mobile devices (iOS and Android)
Reusability and sharing of design assets and styles, leveraging Creative Cloud libraries
An extensibility/API layer for plug-ins
Availability on Microsoft Windows 10 (preview release estimated for late 2016)
Our team will be delivering updates to Adobe XD every month, with a mix of new features, enhancements to existing features and bug fixes, so you’ll see us move fast to deliver these additional capabilities to you as part of Adobe XD.
I then had an Idea for my being human project to design a application that represents what my installation is and it will present the information about being human.
For My Alternative Miss World I am now going to design a live prototype of the Loci Application.
For my Mobile application I had to come up with a name for the application and then design a logo and the artwork for the application. After thinking of a name I came up with Loci because the application is about locations (LOC) and about locations you have visited making it personal to the user (I). After Filling two layout pads I looked at the locations marker and looked at making the text the outline of the location marker which looked like this:
I then used the logo and a section of the Worksop road map to design the artwork for the application.
After Creating my Coffee cup and t-shirt design I then thought about designing a mobile application for the Worksop Road Map. I started looking on google on how to design a Mobile application.
There's an invisible grid on every surface. You may not see it, but it's there to guide you.
02. Every element defines the spacing
Place an element on your canvas and you are starting to define your spacing
The moment a dot, a word, a line is placed onto a canvas/monitor/screen, you have defined your margins and padding. Every stroke defines the space you have to work with.
With that, make sure to maintain consistent widths and heights with the margins and padding. Sixty pixels in one place and 20px in another had better have a good reason behind it (like one section is a child of the other). Otherwise, all should be the same.
03. Colour creates hierarchy
Even shades of grey can create hierarchy
Colour value is used to denote purpose. Let's start with black and greyscale. If you make one button black, the next dark grey, and the third light grey, what you are in effect saying is this: "Button one is most important to the visitor, button 2 is less important, and button 3 is least important."
Colour defines customers' relationship with a brand in subtle yet effective ways
Try not make the button colours the same colour as the site or app, as it will fade away. Also, a good tip is to avoid creating "buy" or other call to actions buttons in a bright red – as that means stop in the US, and may actually prevent users from clicking it, often thinking it won't get them to their goal (see image).
Never underestimate the power of cultural conventions when it comes to colour
This brings up the next point which is that colour associations are culturally based and should be considered when defining the market. For instance, I once worked on a team that had the main 'access' button as red which we later changed to green and increased clicks twofold.
Red can mean, "stop, don't do it, are you sure? warning!" being aware of this will help you get results closer aligned to your needs.
04. Colour is not about you liking it, it's about the brand
Brand is focused on the emotional relationship you consumers or customers have with your service or product. Colour helps define that relationship in subtle yet effective ways. You don't have to like your colours for them to be effective.
05. Pink is not a shade of red
Learn the meaning behind 'shade' and 'tint' as I will be all over you for misusing it in conversation.
Colour 101: Hue is the base colour, like red, blue, green, etc. If white is added to a colour, it is a tint of that colour, if black is added, it is a shade of that colour. Got it? Thus when describing the colour of something it may have a red hue and be a shade or a tint but not both at the same time. What about Canary you ask? That's a marketing colour name used to inconsistently refer to furniture or nail polish.
I use colours like 'Robins Blue,' 'Pumpkin Pie,' and 'Baby Vomit,' when speaking with clients because it humanizes colours and gives then an appropriate association - but when speaking technically - use the words shade and tint.
Oh, and what's Baby Vomit you ask? That's a colour I've been seeing creep up in logos as of late. I've always thought it couldn't get worse when a client insist on using Corporate Blue. Well, it sure can. The new villain is Baby Vomit.
06. Logos add style but they don't make or break
A brand makes the client as much as the client makes the brand. A logo isn't going to make you a great business: but a poorly executed and thought out logo will reflect poorly on your business.
One of the things people say is that a logo is timeless. By default, design is trendy, therefore a logo cannot be timeless. Logos are stuck by the age they were created in. There's nothing wrong with that. CocaCola isn't timeless - it very much feels reminiscent of the 1920's - around the time it was designed. It's been updated to a clean vector since then, helping it feel appropriate to our sensibilities, but the essence is vintage - not modern.
07. The page title
Your user can easily get lost so...
Screen titles on websites are excellent ways to remind the user of where they are after they opened 35 tabs and don't recall the content.
... consider adding a page title to remind them where they are
In apps, they take up precious space, and real-estate here is more expensive than in Manhattan, so if you think your user won't forget which screen they're on, you can sometimes skip it, or have it disappear until refresh or scroll.
Alternatively, this space can be transformed into a search area when the user needs that function. (Although, titles do frame the screen well, and can give the design a polished look.)
08. Define elements, then repeat them
Keep your visual elements consistent throughout
If one of the 'go' buttons is the colour purple, then all 'go' buttons should be the colour purple. If one screen has 20 px padding on all side, all screens should maintain this consistency.
This is what we mean by defining elements and repeating them. Each element should be defined, as should the colours inside the app.
09. Simple tricks can be used to separate text and create hierarchy
Keep your text styles consistent throughout
All caps, title case, indent, contrast, and underline: these are all stylistic choices. None are necessarily better than any other and you can use them in any place as long as you are consistent.
10. Outdated is another word for not trendy
The left screengrab shows flat desin, the right screengrab skeuomorphism
Design is focused on trends, and currently, the trend is to move toward a more flat design. Flat design does not mean it has no texture or shadows, nor does skeumorphic mean that every aspect should have a realistic texture. Generally you should be aware of what your audience will expect to see, as they will judge you for it. If your app looks outdated – users will note that.
"Skeuomorphism is a catch-all term for when objects retain ornamental elements of past, derivative iterations - elements that are no longer necessary to the current objects' functions." (Austin Carr - design and technology writer for Fast Company)
11. Most apps are basically just lists
These apps are basically just lists; the job of the designer is to make them look like something more interesting
The majority of mobile apps (that is not a game) are basically a way to navigate lists. The job of the designer is to hide the fact that it is just a list and make it an interesting experience that is both rewarding and fun. This is why IA and proper hierarchy is so important – with the right foundation, the layout can be very varied yet convey the same information.
12. How to make a decision on a layout
Design libraries exist to help decide which layout is the best for a particular problem. Here are some good ones.
Users have an expectation that their phones will respond quickly, and efficiently to all their interactions. This isn't always the case, and developers frequently tell me that certain interactions take a long time. So you may have to find a way to fake it.
Every interaction should have feedback. For instance, when a user action (swipe, tap, click) is responded to with an animation, this gives the user feedback that they have been heard and their process is being executed on.
Think about how it works in web design: when a user hovers over a button, it changes, and then again, on click, it changes. This should occur in mobile as well. If the user refreshes, there needs to be a moving symbol. If they hit something, it should slide, or glow, or bounce – anything to let that user know that it is working.
This also gives the system time to process the original interaction or call, making it appear like it was instant. In short, a lot of interaction design is smoke and mirrors.
14. Postpone sign up
Offer sign up on one page. Have the user signup once they 'like' or 'heart' an item; allow them to get engaged first. You'll have significant user dropoff from logins, and usually the sign up doesn't offer much value to the brand anyway.
15. When to use a fancy font
Choosing the right fonts is vital
When designing comps, time can be better spent elsewhere. Most people quickly distinguish between serif, sans, decorative, or condensed but frequently think slab is serif, humanist is sans, and anything Jessica Hische is decorative. The most important considerations for selecting a font are:
Can I easily use it on mobile/web?
Is there a variety of weights?
Is it legible?
I subscribe to the belief that type design takes a lifetime to master, so if you pick a type from a good foundry, there shouldn't be much of an issue.
With your mobile apps, keep in mind that a good number of users cannot distinguish between Arial, Avenir, Roboto, or Helvetica. This means that as long as the typeface is clean and easy to read, your'e ok. The time to add in a more complexly flavored font is when you're focusing on brand, and less on usability. In this case, the new, atypical font will create a feeling of being somewhere, perhaps nostalgia, maybe even whimsy. Whether or not you do this is based on your decided priorities, but it isn't something to get hung up on.
16. Each system has visual guidelines
Users are familiar with big brands' design guidelines, even if they don't know it
Android, Windows and iOS have design guidelines that cover different design styles and are rather detailed with specific information like widths between text. They're a great resource when you're not sure how to proceed.
Which lead me to the website listed below where I got free design resources which I will use to create my mobile application.
http://www.interfacesketch.com - This gave me svg files of different electronic devices which are the correct dimension which can be edited in Adobe illustrator
http://appicontemplate.com - This gave me a PSD file for Adobe Photoshop where I will be able to design the artwork for the mobile application.
