Site to explain how to do what is wanted: SPOTIFY PLAY BUTTON
Something that I would like to learn would be how to incorporate a spotify playlist onto a website to offer the viewer some music to listen to. I feel like this could really liven up the site, add some uniqueness, while also giving the viewer a better idea of who you are through music interests.
The site I have linked directly from spotify shows how to link up a spotify playlist into a website in a quick and easy way. It seems the creators of spotify also have the same interest in allowing users to experience music in sites.
Because spotify is a downloadable program there is no true way to just embed all of a persons spotify into a website or link to a spotify because the music and profile are on the application. So the process is as simple as making a set playlist of music, clicking on the drop down feature ON SPOTIFY to copy the HTML code link, and then just pasting it into the html code of a site. Spotify also has a play button modifier in order to change the look of the button so it fits in better with a site.
There are many different reasons for why the experience a user has on a mobile site is different than that of a user on a desktop site. Firstly the scale is a big part. The size of a mobile phone is much smaller than that of a desktop so already the design of the site has to accommodate the amount of space provided. This tends to make mobile sites much more simplistic and “symbol based” due to the lack of space provided.
Another different is the way the devices are used. Desktop sites tend to be controlled by a mouse where as the mobile site is controlled by user touch in the form of a touch screen. This really affects how key it is for sites to be responsive depending on the way they’re being used.
A third difference is on desktop sites when navigating it often times feel better to go between pages where as on mobile it can be quite frustrating to go from page to page on a site due to how tedious and unstable touch devices can be.
A fourth difference is more of an umbrella idea in that both versions of a site should be very easy to tell as being the same. For example facebook does a great job of this. Both the app and website are very consistent in how they display their information as well as it’s visual theme. Personally I also find that the mobile app is a much better user experience than that of the desktop which is another topic that relates with desktop vs mobile sites. Often times there will be on that is superior to the other and this just depends on the subject of the site and what it’s used for/can do.
For this project I want to loosely base my layout on this design. More noticeable and obvious reasons is because everything is fairly easy to read. This is due to the overall theme being pretty “standard” and not having that much personality but also because of the general layout. The actual layout of the information has really nice borders and boxes to make each piece of information accessible and easy to read. For my overall design concept I have a risk of making the overall page messy and hard to read because of the overall intense color pallet I am going to be going for. The actual CSS of the cite is very simple and tries to maximize the least amount of repeated textures in the coding and having stable and steady images. There also seems to be a pattern of everything either being fixed in an “absolute” or “relative” state depending on what is being used. This should be easy for mine due to the background only being a grid which should in theory be easy to repeat as well as my main images just being simple vectors with not many details aside from what’s in the shape of the fruit. Overall this will be a pretty useful template for my own design but will still manage to look vastly different from my own design.
Good 1) http://www.csszengarden.com/143/
Good 2) http://www.csszengarden.com/213/
Bad 1) http://www.csszengarden.com/221/
Bad 2) http://www.csszengarden.com/202/
For the first good design at first it may seem very visually boring and not all that great, but once you take a closer look there are subtle details that really make it a great design. Firstly the overall way the information on the cite is displayed is very easy to follow and read. This is achieved by the overall hierarchy in the design succeeding. Secondly the actual design theme is overall fairly good as a whole theme but it is like I said a bit boring.
For the second good design this is a much more visually interesting and appealing theme. The theme is very cohesive but also the actual layout of information works very well. It’s centered making it easier to read on the web and it also has a nice overlay of images at the bottom which adds a sense of depth to the overall design.
For the first bad design the actual theme and visual style of it isn’t that bad I actually kind of like it. But the display of information doesn’t work very well in a web browser. Everything feels very spread out across the page and as you scroll down it becomes very easy to get lost and a bit confusing to follow.
For the second bad design, again the actual theme and visual style of it isn’t bad and overall it looks pretty great with the subtle moving overlay to make it look like vintage movie film. However when you start to actual scroll through the information the type layout is pretty horrendous. especially because the designer already limited the amount of space they were using in the initial grid of the design.
For my first type combination I went with the typeface “Raleway” and “Merriweather”. I first chose “Raleway” because the logo I created actually used this typeface so this was a good starting point. Raleway as a typeface has a very sleek and modern look to it while also being inviting unlike some modern looking typeface that can feel cold and inhuman. Next I felt that I needed a typeface that had some sort of serif in order to ground the whole resume from a type perspective. This is why I chose Merriweather. The Merriweather typeface acts and feels like a “regular/common” typeface used in everyday life, specifically for reading books or lengths of text, this made it perfect for my resume. Overall I feel that these 2 typefaces work well together especially when changing the size for each different section of the actual resume.
My second combination I went with used the typefaces “Bebas Neue” and “Source Code Pro”. I chose these two because I felt they had really strong character especially when working together. Bebas Neue being very bold and big and all caps really draws attention. I hesitate with this because it has such a big character to it but it felt very fitting for myself as a designer. The second typeface Source Code Pro also works really well with it adding as a light airy contrast to the harshness of Bebas Neue. Overall I feel both typefaces have a very digital and contemporary tone to them which is very fitting for me as a designer. Overall I feel the first type combination is stronger but this is a close second.
HTML is a way that people are able to build websites and bring something to life digitally. The best way to think of it is as if you’re a mad scientist bringing to life a monster! However, rather than various human parts and a dead persons brain, it’s lines of code and a server bringing to life a website rather than a monster. At first HTML can seem like a scary thing but once you understand how it works it really isn’t that bad, in fact it can be quite enjoyable. The actual process though is very much by the books, because if there is even the tiniest error, everything could fall apart. When using HTML it’s best to stay very organized and on top of how you display the actual coding. A messy process makes a messy code, and a messy code makes a messy site.
This site http://alvarotrigo.com/fullPage/#firstPage about full screen rolling websites really excited me when I saw it. I personally really enjoy when a website has a scrolling feature or some sort of visually pleasing way of viewing the website. This holds especially true to me when viewing websites on phones due to the fact that sliding and swiping are natural ways of navigating on a phone. There is just something super pleasing about scrolling or swiping through a website without seeing the scroll bar. Once we get to the portfolio project I definitely want to implement it into my website just because I feel that it will personally reflect what I like as a designer!
So a little bit about myself, my name is Billy Jo Molinari and i’m studying at Edinboro University to get my BFA in graphic and interactive design and I am also considering getting a minor in art history. Some more personal information about me, i’m from Pittsburgh and have lived their my whole life. Growing up there I was thankful to have a really good art education in high school and had a great opportunity to work with museums like “The Warhol” and “The Mattress Factory” as well.
When it comes to design i’m still really figuring myself out and how I fit into that world. I’m not necessarily sure where i’d see myself but i’m excited to find out. Ideally I think it would be really cool to work in magazines or fashion but i’d also be fine working in a firm or a museum or anything like that.
I have a lot of hobbies and interests that could probably go on for pages and pages but a few of them summed up are my love of film/television, gaming, world building/roleplay, design, art history, politics, travel and so much more.
Overall that’s a basic introduction to who I am and i’m really excited to take this interactive design course because I think it’s a great first step into a more technical and coding based realm of design and business in general!