MSTU 5003_Final Project documentation







Summary:


This project will be a portfolio website for Columbia University Chinese Soccer Team.


  • Personal Intention





For me, I am a sports fan and I have paid much attention to some official websites for professional football clubs I love. Additionally, as a manager of Columbia University Chinese Soccer team, creating and operating social media platforms like WeChat official account and Instagram account, as well as seeking for sponsorship are important parts of my daily work. 
For my final project of this semester, I came up with an idea of creating a portfolio website for our soccer team. On the one hand, it will be a good chance for me to introduce my soccer team to others and attract new commercial cooperations. On the other hand, I am going to graduate this semester and step into the society, so I made this website in memory of those precious time I spent with my friends. This website can be regarded as a graduation gift for both my team and myself at the time I'm saying goodbye to my school days.



  • Design Purpose


 The design purpose of this project is to make a responsive website for a sports team with simple and stylish interface. I chose the theme color blue to reflect Columbia blue. The website is composed of three sections - Home page, About and Photo. It will show basic text introduction of the team, promotional video, photo gallery, latest news link and links to other social media platforms. It is worth mentioning that all the content materials in this website are created by myself, including the introduction text, news report, logo (designed by my friend and me), photos (which I took for my team during this two years) and promotional video (directed, shot and edited by my team member and me).

 This design is expected to expand the public awareness of  Columbia Chinese Soccer Team, and to attract potential commercial cooperations for our team's sponsorship. More importantly, this website will be an interactive media record for all the team members that will remind them of the great time that we were being together. This design is for all my dear friends in our soccer team.

  • Intended Audience
students and faculty of Columbia University, people who love soccer/sports, sports club, companies who have interests in campus sports team

Design Inspiration:


I have gotten inspiration from my favorite Chinese Football Club - Beijing Sinobo Guoan FC. Here are images for this FC's official account: http://www.fcguoan.com








For the website design, I also found AC MILAN FC official website could be a good example: https://www.acmilan.com/en

Technical Execution:


I create this website mainly based on Bootstrap library for CSS and jQuery library for JavaScript. In addition to these basic frameworks, I also refer to some Bootstrap template and plugins. For example, for the home page slider for the background images, I used a jQuery swipebox plugin and adjusted some parameters in this function.

 Another meaningful try is the video background I put in home page, which is my favorite part of this website. At first, I planned to put this video in photo gallery section shown with other photos. While later I came up with a cooler idea to make this auto-playing video as a background in home page. I muted the background music and made a loop for this video, which could provide better user experience. A text layer was added on the video saying our motto "We win as a Team".

 As a student who has little coding background, I think that learning from others is necessary in designing my own website. I have browsed various well-designed websites and googled the functions they used. Moreover, as an art lover who has been learning fine arts since a very young age, I paid more attention to aesthetic design of my website. I also really appreciate that our instructor, teaching assistant and my friends who are always willing to answer my questions, offer effective help and encourage me to carry on when I met with technical difficulties.


The github repository link for my website is: 
https://github.com/XiaoxueShirley/MSTU5003-FinalProject
Here I also share a video of browsing the website.


Comments

Post a Comment

Popular posts from this blog

Session 4 Blog: Further Thoughts on Corporate Social Media Strategy

Image
Source: conversationagent.typepad.com After reading the paper Social media? Get serious! Understanding the functional building blocks of social media, I get to know more about the social media ecology and how firms can seize this opportunity using social media to improve corporate image and profits. With the development of social media, the role of consumers changed from passive listeners to active users of the Internet. According the Fader and Winer (2012), the growth of the web of social networking has resulted in user-generated content, or UGC. By analyzing the seven building blocks of social media-- identify, conversations, sharing, presence, relationships, reputation and groups, firms can develop better strategies to monitor, understand and response to different social media activities. Moreover, learning how to harness user generated content, the corporation can reach more consumers. From the corporation’s perspective, one of the most important purpose
Read more

Session 3 Blog: The Era of Big Data is Coming

Image
Are the technologies neutral? Such question came to me when I read the related papers. For the technological determinism, they believe that technologies embody ideas, needs, imagination, possibilities from specific periods and places. As far as I am concerned, technologies become somehow subjective when they interact with the social ecology. When researchers dealing with the big data, the process of interpretation is impossible to be regarded as totally objectivity and accuracy. As the instance puts in the article Critical Questions for Big Data: Provocations for a Cultural, Technological and Scholarly Phenomenon, there is a “data cleaning” process in social media case, and the researchers will make decisions on what attributes to be counted and which will be ignored. Moreover, we should also keep in mind that the big data sets from Internet sources could be unreliable sometimes, which means we cannot depend on the “facts” the data presents without social judgement. While the “Big D
Read more

Session 2 Blog: Views on Technology and Social & Communicative Aspects

Image
Source:www.business2community.com/cybersecurity Since we watched the video Web 2.0…The Web is Us/ing Us, I have been thinking about the relationship between media technology and communication content. Do we human beings define the way that the machine operates, or the technology is taking control of us? As the famous phrase puts, “the medium is the message”(Marshall McLuhan, 1967), I agree that the technologies somehow define the pattern people perceive information and how we give feedbacks. However, it doesn’t mean that we cannot adapt and use technology for our own freely determined purposes. The development of web 2.0 empowers everyone with the ability to create communication content in diversified forms, yet it also requires that we should be able to deal with the overwhelming fragmented information. Therefore, it is necessary for us to think about how we use the technology in social and communicative practice. After reading the paper Technology as Social Practice, I
Read more