1 - UI & UX 2 - Generative 3 - Interactivity 4 - Personal Work

Transcription

1 ARTIST & DESIGNER

2 1 - UI & UX 2 - Generative 3 - Interactivity 4 - Personal Work MICHAEL WYLEGLY

3 UI&UX For this project, I worked as part of a small team to help inform the look and feel of a flexible front end on a content and learning management system. The project brief had put forth 3 requirements that were a hallmark of the existing sales strategy: 1. Provide a cohesive look that would be media agnostic, and can be used for both static content (slide, text, and image), as well as rich content (video, flash, html5). 2. Provide a means for clients to brand the content window 3. Provide a clear strategy that could help inform the look and feel for support services such as rewards and recognition

4 We started by considering the normal use case for the sofware. Since the content for the platform was primarily related to professional practice, we could make assumptions about our users in regards to what type of experiences they might be familiar with. The static documentation we needed to highlight relates to business practices, governmental requirements, and company policy. These types of documents are primarily dealt with in professional suites such as office, acrobat, and google docs. With wide scale use, we felt comfortable adapting trends related to these platforms. We didnt shy away from drop down menus, and provided a large canvas space that would center the content and make legibility easy. We standardized the position of the media player controls to the bottom of the screen, this would allow vendors to mix and match media types. We could have a text document, and set breakpoints for audio in the case of accessibility needs. We could also provide descriptive audio on important images. We used a drop down menu to the left, that when open was reminiscent of and other communication tools

5 We used material design to help build standardards for the look and feel which we could then easily apply to future products. For flash, video, and slides, we kept same layout but centered the content on the stage, keeping controls on the bottom of the screen to help standardize the experience. We then used the remaining space as a means for client branding. Additional research was put into pre-exams for learners. These exams could provide a number of indicators about the current learner and we could better design content to fit learning habits. For example, recordinig the time it takes to complete an exam might provide insights into computer literacy, engagement, and current knowledge. We could then streamline the learners content by providing condensed modules. We could also use the exam to train for industry hardware, like computer vision for a specific make and model of haultruck.

6 Dolor Amet Dolor Amet My Account My Account My Account Log Out Log Out Log Out Dolor Amet Accumsan Ligula Sed fringilla Donec Molestie Praesent ACCUMSAN My Account Etiam augue velit, tincidunt at gravida vitae, rutrum eu purus Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra in mauris ut egestas. Aenean viverra pretium orci. Mauris sagittis tempus lorem sed feugiat. Vivamus a dui lectus. Praesent aliquam tellus eu cursus commodo. Log Out DOLOR AMET CONSECTETUR Over the past two years, we still utilize similar concepts and design decisions but have worked hard to extend the customization options. Lorem ipsum dolor sit amet. Donec sollicitudin nibh id leo mollis viverra. Proin ante urna, viverra sit amet rutrum. Nulla id eros pharetra, tempus ante et, tristique nibh. Pellentesque in dolor consectetur, tincidunt nibh quis, PRETIUM METUS SED FRINGILLA Nam luctus ipsum et velit iaculis, ac porttitor dui cursus. Maecenas orci eros, luctus in ante ut, varius rhoncus nisi. Vivamus at sapien nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut quis diam et sem purus id metus. Vivamus a diam consequat, pharetra sem faucibus, placerat tortor. Phasellus porttitor nisl lectus, id auctor erat maximus vitae. Aenean maximus risus a augue mollis lobortis. Previous Next LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. Download Here UT PRETIUM Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut tincidunt lacus, pulvinar rhoncus elit. Aliquam sed diam quis felis facilisis porta vitae nec dolor. Phasellus pulvinar. Morbi nisi dui, mollis vel nunc at, tincidunt ptesque tortor. Pellentesque ut erat lacus. Curabitur rutrum dui vitae turpis dapibus, vitae laoreet dui aliquam. Ut sit amet odio vel leo hendrerit semper ac sed lacus. Nam volutpat libero aliquet augue dictum, at lacinia est placerat. Ut semper enim odio, et vehicula risus ultricies vel. Mauris vel Suspendisse facilisis magna eros, eget fringilla quam tincidunt vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget ex eu sapien cursus cursus. DOLOR AMET Phasellus tristique ligula at urna placerat gravida. Phasellus vel libero non dui luctus blandit sed eget lectus. Dolor Amet 2/15 Complete Fusce in orci tincidunt, placerat tellus a, lacinia risus. Duis pellentesque risus in quam b ibendum tincidunt. Proin volutpat nunc at sapien tempor hendrerit. Maecenas varius est vel nibh luctus fermentum. Donec Mauris et Ante Maecenas Sed Fringilla Duis eu ligula sed ipsum aliquet fermentum. Posuere Lobortis Level 1 Posuere Lobortis Level 2 Posuere Lobortis Level 3 Amet Ultricies Donec Faucibus How many fingers are on the human hand? A. 5 B. 10 C. 6 D. All of the above CORRECT!!! Vestibulum Posuere Lobortis Level 4 Donec Lobortis Ut Pretium Metus Aenean Eget Metus Vel Metus Posuere Lobortis - Level 5 SUSPENDISSE SUBMIT Dolor Amet 2 0/23 Complete Donec Lobortis 0/12 Complete Aenean Molestie 8/8 Complete Vestibulum 0/19 Complete Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut tincidunt lacus, pulvinar rhoncus elit. Aliquam sed diam ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vestibulum ut justo id pulvinar. Morbi nisi dui, mollis vel nunc at, tincidunt ptesque tortor. Pellentesque ut erat lacus. Curabitur rutrum dui vitae turpis dapibus, vitae laoreet dui aliquam. Ut sit amet odio vel leo hendrerit semper ac sed lacus. Nam volutpat libero aliquet augue dictum, at lacinia est placerat. Ut Nam posuere posuere ante nec porta. Duis magna nulla, ullamcorper ultricies feugiat sed, porttitor in velit. Suspendisse facilisis magna eros, eget fringilla quam tincidunt vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget ex eu sapien cursus cursus. Phasellus tristique ligula at urna placerat gravida. Phasellus vel libero non dui luctus blandit sed eget lectus. ALIQUAM SED DIAM QUIS FELIS FACILISIS PORTA VITAE. LITORA TORQUENT PER CONU BIA NOSTRA, PER INCEPTOS HIMENAEOS. DONEC VESTIBULUM UT JUSTO. PHASELLUS SEMPER EFFICITUR EX, AT ALIQUET ODIO. TINCIDUNT PTESQUE TORTOR. PELLENTESQUE UT ERAT TORQUENT LACUS. Praesent eu tempus libero. Aliquam sit amet purus metus. Sed sapien neque, finibus vitae scelerisque ut, sodales sed massa. Duis semper tristique lectus, id eleifend metus bibendum vitae. Etiam massa metus, auctor congue imperdiet id, consectetur ac elit. Vestibulum libero mi, facilisis eu sem a, fermentum sollicitudin felis. DONEC MAURIS ET ANTE LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. Maecenas Sed Fringilla Nam euismod lacus sed elit euismod blandit. Donec sed turpis non eros lacinia egestas. Nullam vel ornare nunc. Vivamus semper lacus libero, sit amet blandit arcu commodo et. Posuere Lobortis Level 1 Posuere Lobortis Level 2 Posuere Lobortis Level 3 Hendrerit, metus leo imperdiet dolor, in gravida nulla mauris ut enim. Etiam rhoncus, justo et dapibus laoreet, nunc. Consectetur libero, sit amet dignissim tortor erat nec lectus. Pellentesque habitant morbi tristique senectus et netus. Malesuada fames ac turpis egestas. Suspendisse elit nisl, suscipit nec erat consequat, porta vulputate lacus. Sed ut. AMET ULTRICIES DONEC FAUCIBUS Morbi rutrum feugiat mattis. Aenean aliquam enim sed dapibus sagittis. Duis et tempus leo. Aenean ac quam maximus, placerat urna in, elementum ante. Pellentesque vel fringilla justo. Duis non dapibus neque. Vestibulum Posuere Lob DUIS ET EST LACUS. SED IN NIBH DIAM. ICON LOREM IPSUM NUBIA NOSTRA, PER INC Nullam ut tincidunt lacus, pulvinar rhoncus elit. Taciti sociosqu ad litora Aliquam sed diam quis felis facilisis porta vitae nec dolor. aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vestibulum ut justo id pulvinar. Morbi nisi dui, mollis vel Donec Loborti UT PRETIUM METUS AENEAN EGET METUS VEL METUS POSUERE Praesent ultricies, diam sed eleifend dignissim, augue est cursus odio, ac aliquam eros mi quis neque. Praesent consequat feugiat libero ut pretium. Nam semper dolor ut vulputate lacinia. Nam vel est aliquam, molestie risus ut, feugiat risus. Mauris porta gravida rutrum. Integer scelerisque diam id neque ultrices, vitae dictum urna pretium. Nunc eu mi risus. Suspendisse vulputate, dui a Hendrerit, metus leo imperdiet dolor, in gravida nulla mauris ut enim. Etiam rhoncus, justo et dapibus laoreet, nunc. Consectetur libero, sit amet dignissim tortor erat nec lectus. Pellentesque habitant morbi tristique senectus et netus. Malesuada fames ac turpis egestas. Suspendisse elit nisl, suscipit nec erat consequat, porta vulputate lacus. Sed ut. Aenean pellentesque, sapien at dignissim aliquam, elit libero ultrices felis, vel mollis risus orci eu est. NUNC ELIT LEO, FRINGILLA QUIS LECTUS VITAE, CONVALLIS TEMPUS AUGUE. TEXT WITH ICON nunc at, tincidunt ptesque tortor. Pellentesque ut erat lacus. Vestibulum malesuada at nisi vel viverra. Aliquam erat volutpat. Mauris id scelerisque nisi. Aliquam interdum vehicula sagittis. Praesent tellus dolor, vestibulum a sem at, laoreet consequat sem. Aenean feugiat molestie erat, eu dapibus dui. Etiam fringilla est ut dolor vehicula congue. Previous Next

7 Why It s Important How Do We Do It? Let s See It Into Action Why It s Important How Do We Do It? Let s See It Into Action Why It s Important How Do We Do It? Let s See It Into Action Why It s Important How Do We Do It? Let s See It Into Action Quality What it is... Why It s Important How Do We Do It? Why It s Important Introduction Setting Commitments Individualized Performance Summary Difficult How Do We Do It? Let s See It Let s See It Into Action What it is... Quality Into Action Lesson Name You heard me. A quality conversation doesn t have to be about just one thing. One discussion may cover many bases. When was the last time you talked about: Quality Career Aspirations Ongoing Performance Collaboration Disney Disney UI&UX Disney Courseware Quality What it is... Quality What it is... Quality Career Aspirations Ongoing Performance Collaboration For this project I worked in tandom with an illustrator to help build out and refine the art direction. I designed and implemented various interactive elements, including the captioning system, in lesson ui elements and the main menu. To the right are colour options and main menu designs which we had provided to the client for the final build. Lesson Name You heard me. A quality conversation doesn t have to be about just one thing. One discussion may cover many bases. When was the last time you talked about: Disney Quality What it is... Lesson Name You heard me. A quality conversation doesn t have to be about just one thing. One discussion may cover many bases. When was the last time you talked about: Disney Lesson Name You heard me. A quality conversation doesn t have to be about just one thing. One discussion may cover many bases. When was the last time you talked about: Disney Quality What it is... Lesson Name You heard me. A quality conversation doesn t have to be about just one thing. One discussion may cover many bases. When was the last time you talked about: Disney Introduction Setting Commitments Individualized Performance Summary Difficult Each lesson required a menu with four options and a button to reveal and hide captioning. One would be a filmed sequence created by a third party vendor, the clients documentation, along with 2 animated and voiced sequences created in house. The illustrator refined the look and feel of the animated work and icons, while I worked out the menu, closed captioning system, and designed the document viewer and video player. Commitment Setting Career Quality Ongoing Performance Difficult Collaboration Individualized Performance Summary Introduction Individualized Performance Summary Quality Ongoing Performance ons Setting Commitments Difficult Collaboration oratio Career

8 UI&UX Samples

9 Generative

10 Generative I m a huge fan of procedual and generative visuals. During my bachelors I was lucky enought to begin working with large scale projections and installations. We had access to a 3 projector set up, and I would use processing or patch based tools like touch designer, max msp, or vvvv to create work. By using software solutions and procedual systems I didnt have to make sacrifices for quality. While video required a lot of tweaking, I could simply output a live feed at the exact resolution required with no loss in quality. Additionally I could manipulate the visuals in real time, either through senor inputs or audio. I also really appreciated the random and unique nature of generative visuals. While the overall look of a particle system might be the same, there were always beautiful unique qualities that meant the experiences was different every time.

11 The Convergence Lab was a 1 week residency that involved brainstorming and building of a projection mapped outdoor space. We used a firepit and sensor data to build 3 different scenes which talked about our relationship with nature, technology and storytelling. In this project, I was responsible for building out some of the generative visuals. The first scene was meant to act as a siren call to guests. Reflecting the cool tone of the fire, a crying siren song was used to ask people to bring wood and give the fire life and warmth. The second scene revolved around the firepit as a gathering point, and encourged a more lively and talkative feel. We mimiced the dancing of the fire with a projected particle system, and included some of the talent from the dancers who were also parcipating at the center. The final scene returned to more subdued visuals which were meant to draw viewers to focus around the fire, and talk. Additionally we incorporated audio that would pop and distort the natural sounds of the fire into a soundtrack. We created our own closed circut channel with all of the fire data so guests could tune in at any time and bring the fire more wood. The first few days involved planning out the projection rig and working with the sensor data, while the rest was spent on preparing for the conference. + NATURE

12 Scoping out the space, building the projector rig. Exploring some of the sensors, brainstorming, and testing different projection materials. Some prototyping, testing, and our sensor system. Did I mention it was winter, with massive snowfalls.

13

14 Generative web Processing released a javascript version for web development, so I began to play with porting generative work to javascript. To the left are some samples of a text generator using the rita library, above are some perlin noise explorations. For the text project, I had saved all of my papers and essays from school and combined it with with social media, and journal entries. I was trying to categorize different personalities, some of which were more artsy, others more scholarly, etc. I also wanted to practice using gestures and mobile interactions, so the generative text piece can be swiped from pane to pane like a book.

15

16 Interactive Many of the installations I have built revolved around different forms of interactivity; cameras, kinects, microphones, etc. I usually think about interactivity as an interpretation, and that an interface can be partner in an experience rather than just a means to an end. I think theres a growing need to humanize technology, and gestures like a swipe can convey emotive qualities when paired with the right interaction. For the project above I tracked a tablet with a camera and projected onto a table filled with risks related to our relationship with technology. Dropping a phone in water, shattering a screen, using cases to protect from dust and dirt. As you placed the tablet over the content, the visuals would update.

17 Interactive games I think videogames are awesome. I ve been an avid gamer since I was a kid and I always liked how games could combine different technologies and strategies for storytelling. I ve participated in a couple of different game jams, but I ve also spent a lot of time working on my own projects. In the above project I helped create graphics using sketchup, and provided some help on coding the different interactions. The game was composed of different cutscenes relating to memory and growth. Since then, I ve worked with a number of different editors including unity, construct, hammer, and unreal, however my personal projects are usually made in javascript.

18 For this personal project I needed to learn a lot about designing games and creating a design pattern that made sense for what I was trying to accomplish. I began by creating a number of different simple prototypes where I could test specific ideas and concepts one at a time. I started by making a side-scrolling shooter, learning how to implement my own physics for gravity and managing sprites and states. I also began thinking about how the level can be used to inform the player. The second prototype I had made was a simple game where you launched a rocket ship, and the further it went, the more research points you got. Those could be spent on parts that would make the ship go further, or change the UI. Additionally I moved my focus more towards mobile platforms using the gyroscopes and swipe gestures. The goal was to get a better understanding of how economics might work for microtransactions, and how to properly scale the rate for which new unlocks would become available.

19 On the left is an example of an in game shop, trying to come up with some menu designs, in the middle are some initial sketches, and a javascript prototype for the game, and on the right is a concept of the game in play. It s a simple game, every 10 seconds an attack gets made and depending on the board and weapon card(which has a durability counter), you apply different effects. There are some additional aspects for outside the main game loop, like taking quests and stuff, standard rpg stuff. There s still a lot of work to be done on the project, but it s been fun getting it to the state its in now. On the next page there are a couple of examples of the game in unity. Additionally there are some low poly concept art and a couple of levels I ve created in unity.

20

21 Personal

22 Painting Painting and traditional art have always been a big influence on my art practice. I love museums and sketching with ink or marker. I use my paintings to get down colour combinations, forms and base much of my digital work off of my traditional compositions. Normally I paint at a larger scale, around 4-8ft. I usually start out with marker sketches and experiments, and I often layer on paint to help build a texture. I use a more iterative approach, and I ll often wipe out a painting and start completely new if things aren t working. Painting lets me experiment and I ve often used my generative programs to influence my paintings.

23 Architecture While doing my undergraduate at the Alberta College of Art + Design, I was able to participate in a call for the colleges main mall redesign. My proposal involved opening up the space and creating a wall from horizontal wooden slats. This would allow for the flow of air from the vents, but give more potential for harnessing the air and creating more unique installations. Since then I ve done calls for submissions in Edmonton and Calgary. To the left is one of the projects I did for infills in edmonton with my brother. The idea was to create pathways between neighborhoods to increase foot travel. I enjoy thinking about how to break down the specific needs of a space, and feel that studying architecture has given me a better undnerstanding of installation, vr, ar, and larger scale work.

24 emcamp Emerging media at the Creative Assembly of Media Practitioners (emcamp) is an international art collective created by artists Manuel Ermecheo, Kelly-Ann Desouza and Michael Wylegly. We first met in 2011 while taking the Media Arts program at the Alberta College of Art + Design and through collaborating on projects we found admiration in each others work. After graduation, we moved on to different career paths but lacked the opportunity to push our work with creative and artistic merit. emcamp has been a way for us to reconnect, share, and stay active. This project has been a huge eye opener in the amount of work required to set up a web venture but has been a blast.

25 Thank You For more stuff check out: My artist profile at emcamp: Contact : michael.wylegly@gmail.com