UCONN DMD ADVANCED WEB DESIGN

https://medium.com/pixelpoint/why-i-hate-your-fake-redesign-177a626d7f95 In this Medium post the author shows a few examples of bad website/application redesigns, explains what's wrong with them, and details what to do to make sure your redesign is well-made. It even references a previous medium post I shared about redesigning Instagram! http://dmduconnadvweb.blogspot.com/2017/03/httpsmedium_7.html Highlight quote- "The designer probably used these colors because they thought it looked cool. Stop it. Make it because it’s right, because it has meaning, because it will help users solve a problem, or because it will help sell your product. Don’t do it just because it looks cool!"

Awesome background code that i would liek to use but is for money. http://codepen.io/mnmxmx/pen/PpdjPO

Just Play with the numbers http://codepen.io/iSkyxSora/pen/XMoWVO

I stumbled upon a CodePen for a "Fancy Menu Hover effect". It is a nice and understated effect that allows everything to look more professional. I made preliminary changes in order to see about trying the code out on my portfolio website, and will report back by updating this post should it be successful. My menu is vertical rather than horizontal, so it will be a tad more complicated.   https://codepen.io/tutsplus/pen/XMPQGV

http://codepen.io/Arturtle/pen/VpqwML

https://uxplanet.org/popular- web-animation-techniques- a6a467309028

https://backchannel.com/google-and-facebook-cant-just-make-fake-news-disappear-48f4b4e5fbe8 if you have ever been on facebook you will know of the plethora of fake news sources everywhere. this article goes into the issues of these fake news stories and how there maybe a chance to stop them

I found this  article  very interesting and feel as though is slacking as a whole. Voice commands can always be a little difficult to master. By that I mean is can never fully understand different accents too well. To have voice commnads such as voice search, may not be a smart idea unless it can fully understand different accents. Most of the time it can be seen as a cool gimmick, but it always ends up as something people don't use anymore because of how much it fails to listen.

Artifical Intelligence is a big part of our world. We are constantly relying on it to make our lives easier. To implement it into a website or an app is innovation at its finest. In this  article , it talks about how if we evolve AI, then we evolve with it. Whether it be for entertainment or research purposes, AI can have a great effect on how we live our daily lives.

https://medium.freecodecamp.com/the-10-github-repos-people-mention-the-most-in-freecodecamps-main-chat-room-189750600fa4

I read a very interesting post discussing the way we view the old world, this article points to a lot of things that I have always talked to friends about but they judge me as barbaric for expressing views from the old world. Basically not to sum up the article because if you are interested in the analogies the author makes you can read the article yourself of which I posted below this paragraph, but let me just give an analogy. For example today it is perfectly okay for someone who is 18 years old to date somebody that is like 50 years old but lets say that 18 year old was 16 instead and that 50 year old was 48 (in our country) that is a HUGE problem all of a sudden and by no means acceptable but some miracle thing happens as soon as that person turns 18 that suddenly makes all their decisions age appropriate for hooking up... that doesn't really make much sense but that's the way our society and government thinks. I think dating should be determined by age gaps and not by spe

How to Use Space in UI Design  by Wojciech Zielinski Despite wanting to get as much content as possible on our web pages, it's important to use space strategically.  Web pages with too much content can look cluttered, and space can add sophistication, simplicity and comfort to a design.  This idea relates to the four design principles, specifically alignment and proximity.  Web designers can utilize the way they align their content and the distance between elements to maximize the space provided and ultimately keep users interested in your page and persuades them to explore more.  

I experimented with a project on CodePen called Dancing Dots.  It's purely CSS and HTML.  I was able to change the colors as well as the frequency of the dots and their speed.   The second project I tweaked with was "Random Fractal".  It utilizes Javascript, and you're able to change the stroke width of the lines and the background color.  The Javascript is set up to randomize the fractal pattern on every mouse click.

How to Structure Your First UX Design Portfolio References Bootstrap as a great medium for creating a portfolio site (and non-coding sites such as Wix, Weebly, Squarespace) Importance of telling your story in a concise and visually appealing manner Colors, Typography, Layout few colors and clean layout  Clear navigation (Portfolio, About, Resume, Contact *optional: Blog) List the best projects at the top MUST include explanations with your images, explain your design process!! This is an example of a good portfolio site as referenced by the article: http://ivomynttinen.com/ https://colorlib.com/wp/bootstrap-portfolio-website-templates/

List Expand Codepen Played around with some more Javascript elements in this web-based app prototype on Code Pen. Navigating between the list page and the expanded page from one of the tabs. Split Slick Slider

Hello Today is free work time for you in class Please have completed the Bootstrapstudio & CodePen Studio investigations by Thursday as requested, do a screen shot an post on the blog of BOTH Bootstrap investigation and Codepen investigation PLEASE remember to be blogging your MEDIUM.com posts I will be looking for completed homework work for us to all review in class on THURSDAY. Please use this free time wisely. On Thursday we will go over the specifics of the final project for the Final I am giving you his last class to catch up with assignments and blogging before we kick into our final project(s) iterations. On Thursday, i would like to know what you plan to add to your page or enhancements/iterations you have planned for your portfolio/design [Think Javascript basics] SOMETHING That will add another level of complexity to your design. please have a basic idea of what your next steps will be for our Class meeting on Thursday. I am going to present a few group

https://blog.prototypr.io/how-to-use-space-in-ui-design-15e169127236 I'm always on the look out for all types of inspiration when it comes to web design, and stumbled upon this article. I'll give you the general jist of it but I encourage you check it out.      The main argument in the image is that as designers we should make use of white space, or empty space. This is because it can actually add to your design. One thing I found very true in the article is how many times as new-bees we tend to try to fill all the empty space possible. But, we shouldn't always have to because empty space can sometimes be more impactful if used correctly.  

  https://medium.com/springboard/the-7-questions-youll-be-asked-at-a-ux-design-interview-84f3214e0f29 So above is a really nice article outlining the type on interview questions that we might encounter as web designers.  I thought this article would be a good pick for today because many of us are beginning to approach them time where we begin to look for internships, jobs etc. As up and coming web designers, its crucial we know what we're talking about when it comes to explaining our processes, showing off out work and demonstrating we can work well with others. After all, most of the time in the real word projects will be team based.  I know recently I've begun the first steps towards an internship and one day a job. So knowing how to interact in an interview and showing my best side is crucial.

How the Internet Gave Mail-Order Brides the Power ? This article interested me and the way having an internet connection can change these womens lives is not a shock but still nonetheless miraculous. Dating sites not only gave these women a lively hood in a way, but the option to choose and say no. Arguably the more women get internet access the more competitive they become but  at least with competition there is a will to compete. 

Canada Will Pay Millions To Ensure All Citizens Have Internet https://dose.com/canada-will-pay-millions-to-ensure-all-citizens-have-internet-c519f0263f1d Here we are in the United States unable to provide free healthcare for our citizens and Canada is already working on making sure people have internet access. Now, this isn't just any  internet, oh no; Justin Trudeau is investing millions to make sure that the entire country has high speed internet. While a large majority of Canada has internet, Trudeau is focusing on rural areas where one can't rely on cell data. This is simply amazing in my opinion because it's a smart investment for the country. By having all of its people connected, Canada will have better infrastructure and stimulate the economy. Good job Canada, you're doing a much better job than the States.

No idea what the assignment was... but here is a cool fractal thing I found on Codepen. Download it Here: Fractal Tree.zip

This is what I was able to do in Bootstrap (with the demo) I honestly had no idea what I was supposed to be doing, but I hope what I did was somewhat the goal of the assignment.

Mobile Version of the Site

https://medium.com/@bankai_ux/the-elements-of-ux-ui-visualized-5140254a8b76#.585egnmcz I thought this article was pretty cool and I also thought the illustration was pretty cool. It lays out the main UI/UX elements in a neat way. I like how all the article also lists and describes all the elements most people use.

Due to the restrictions with bootstrap studio this is what I was able to make:

https://medium.com/@ryanavent_93844/the-productivity-paradox-aaf05e5e4aad#.go9yy9tzc

Wanted to make a site for real life gaming where i would display current real life games and you can buy them I find the bootstrap demo at least realyl restrictive maybe if i bout it i would enjoy it a little more.

I went in on Tuesday playing around with a more offbeat idea, as the images below display. The idea was to make a page where all the buttons for navigation appeared solely on the included images of smartphones, and were one to view on a smartphone, it's screen would become the user's screen! This idea proved too clever by a half and ultimately did not pan out. Then I made a more traditional layout for a website with the story of being for a business selling cameras consumers would appreciate for traveling purposes. Note the emphasis on photograph displays.

Bootstrap Studio seems to have a lot of potential. It's user interface is simplistic and removes the need for hard coding. The software makes website design a swift process without the hassle. However, the demo is very limiting in terms of assets and restricting in design. I found it difficult to fulfill my idea and had to resort to using the templates.

BootStrap Studio My thoughts of bootstrap studio: It is a pretty cool program, clicking and dragging nav bars, columes/rows, headers, paragraphs, and etc definitely makes designing webpages much easier.  I looked at a few tutorials on the program and I was amazed on what you can do on the full version of the program All I really did was playing around with the program and doing what I could with the program. I most likely will try to make a page again using bootstrap studio

https://docs.google.com/document/d/12IzP67H9SB1q--s4IcYqIjsIT2muPtj_stBkzT3hQE8/edit

I wanted to make the background green, but that feature was locked. Imagine the suit picture as a picture of the Triforce.

Some screenshots of a sample site I put together for the internship that I work at called Versa Prints. They are actually in the works of updating their site and perhaps Bootstrap can be the medium by which they can do that (over a Wix or WordPress site).  Just playing around with the templates and the different layouts they already provided. The demo is very limiting as expected, but the Bootstrap Studio is certainly a tool to help make the design process much easier as you can play around with visuals first and tweak the code later to your liking. 

Paul Ryan Doesn’t Know How Insurance Works Paul Ryan is the Speaker of the United States House of Representatives and he doesn’t really know how Healthcare works according to the Medium article I just read. Basically, the way the article describes a video-clip of Paul Ryan explaining healthcare, specifically Obamacare, points out how Paul basically took Obamacare and tried to shit on it because the way that Paul chose to describe Obamacare was like he was trying to separate it from how regular Healthcare works, thus, showing that Paul clearly lacks an understanding of how the regular Healthcare system or any insurance system works. I found the article to be hilarious because what Paul seems to miss is that all insurance is a policy in which most of the people who have the insurance will not need it but only have it in case they do need it, and that it doesn’t matter to them that they are paying for someone else who does end up needing that insurance because of something that happen

The Effect of Music on Our Brains I read this Medium post about how music effects our brain activity how it can boost productivity when studying or working, and how it can alter and effect our moods. I found the article to be something that is very relevant to everyone today because I feel that these things that are said about music are true and prove beneficial. I have had some experience with music improving my thinking, for example, whenever I study I like to throw on some lo-fi Hip Hop music because it is both entertaining yet subtle enough to not distract me and therefore keep me energized to get my work done. I see dramatic differences when I play music at the gym and the level of activity and output I am able to perform versus gym days where I didn’t have music playing because I didn’t bring headphones and all my sets and lifts are weak (even with a good meal beforehand), the level of output is so much worse, which is why the effect of music on the brain/body being positive f

HW for weekend: Code to.....

Here is my portfolio webpage: -My Goal for the first half of the semester:      -Refresher on HTML and CSS      -Build a portfolio page -I started out by working on the tutorials on codeacademy. -Planning for Portfolio Page:      -I first started out by looking at templates on w3schools. The template I looked at was "Architect Template" and "Coming Soon Template" -I ended up using the Architect Template at first but I did not like how it looks so I went on codepen to look at different styles of nav bar and such and such. -I was able to find a template I liked and tried to understand the code used on the page.  I was able to figure out how to get the video embedded on the banner of the page. This is what I have so far: iSkyxSora.github.io / advportfolio / home.html What I still need to do: -Need to rerender my contents to put on my page -Make contents on the page clickable so the image will enlarge or open up a new page. -Replace background of each p

Benjamin’s Notes Emanuel -   Make format and organization of site less cluttered, perhaps change color scheme to something more mellow or neutral Arturo – No feedback, good presentation Website looks good, however the orientation is inconsistent, you should fix that I love the idea, although it wouldve been nice if you went into further detail

Link to powerpoint presentation with updates on my website! Website is currently running through MAMP with all the files on my personal computer. https://docs.google.com/a/uconn.edu/presentation/d/161JhGJrgotPaYDi1cXGef7MDpRmmyTmCyxZwOfPndGo/edit?usp=sharing

https://drive.google.com/file/d/0B8QTBMv1JxmwTVFBbVVYQ0tHWXc/view?usp=sharing If you don't want to see my slides check out my web site: ronniesanchez.github.io/Portfolio_vs

https://medium.freecodecamp.com/the-cia-just-lost-control-of-its-hacking-arsenal-heres-what-you-need-to-know-ea69fc1ce38c#.714z6q1g0 this article is kind of scary as well as interesting apparently today, the CIA lost control of all of its cyber attack capabilities. this is very scary

https://drive.google.com/open?id=0B7ECkzt_Cw5iblkybFVrUUtfaDA

https://medium.freecodecamp.com/my-journey-to-becoming-a-web-developer-from-scratch-without-a-cs-degree-2-years-later-and-what-i-4a7fd2ff5503#.uwh7eyh89 Very useful insight full. Gives a great idea of how things are and the competitiveness in the field. Huge inspiration for me as a person with no clear idea of how to land jobs, internships etc...

https://uxplanet.org/the-ultimate-ux-design-reading-list-db767977c855#.66t34xvs2 List of tons of good reads for designers. I believe its important to know the design atmosphere and gaining a grasp on it. As designers we should know and study different styles, inspirations, and practices in the field. This article helps us gain more knowledge about the world of design and gives us some pretty good books to read. REMEMBER KNOWLEDGE IS KEY !

https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e#.jl9oh2d89 Very useful for anyone trying to make there page flow from a color perspective. Choosing the right color pallets can be tricky and incorporating them can be even harder. The article explains basic rule of thumbs and things to think about when choosing color. In my opinion its always useful to look at other sites and how they use color.

v https://uxplanet.org/3-key-uses-for-animation-in-mobile-ui-design-4d7c482dd84b#.3p0xvb9y      So over the past few weeks I've been doing a lot of reading on animations and uses for animation on web.  To me being able to make a website or app feel like it's alive is a great feeling. It adds so much to the interactivity. By simply adding small animations the page suddenly feels alive. It can also make the user experience better overall.      An example is the use of animated loading screens or progress indicators. Using a creative progress indicator reduces the user perception of time. Animations can also make the sit or app seem better than it really is.  Another really useful time to use animations is when drawing the users attention. A good example of this is in notifications.  By animating the notification you can draw the users attention more easily. Overall animations should be used in most websites and can add a lot of value to the user and the creator.

After reading this article,  I was blown away by how Zuckerberg’s AI “Jarvis” processed commands and improved its own performance. Jarvis can do much more than just play music, turn on lights, and manage the home’s alarm system, which is what similar systems on the market can do. Zuckerberg has developed this impressive software to take commands via text, entertain his one-year-old daughter, understand who commands are coming from, and even learn patterns from its users in order to continuously perform with greater accuracy. This technology sounds like it would need support from a house filled with IoT devices, however, Jarvis does not require the home alarm or the thermostat to be connected to the internet, making this technology less intrusive and more secure. https://phys.org/news/2016-12-zuckerberg-software-butler-home.html

https://medium.freecodecamp.com/i-wanted-to-see-how-far-i-could-push-myself-creatively-so-i-redesigned-instagram-1ff99f28fa8b#.iwfeo34wh This post is an interesting account of one person's attempt to fundamentally redesign Instagram to become more intuitive and usable. It breaks down the various UX/UI changes they make, but the why might be the most interesting part. As it turns out, many people who regularly use the site/app don't even realizing what swiping on mobile does or where certain features are located. As a result, many functions are changed to be in a more intuitive spot, even when users might not be aware the change is needed. Also, the Chris Nyland visit a couple weeks ago was very informative and interesting. He introduced us to him and his company, explained why college students are such an active/lucrative market base, and showed off some of his more successful campaigns.

This article  talks about the advantages of using "cards" to simplify and clean up the look of a website or mobile app—highlighting the do's and don't's of card design. Below are some examples of card etiquette that one should follow: