Running head: CMST 495: CURRENT TRENDS AND PROJECTS IN DIGITAL CMST 495: Current Trends and Projects In Digital Media and Web Technologies:
Storyboard Project for Syed Designs Portfolio Website
Shafqatullah Syed
University of Maryland University College
Prof. Dr. Sherri | Summer 2014
1 CMST 495: CURRENT TRENDS AND PROJECTS IN DIGITAL 2 Abstract
This paper details assets, layout, structure, and has a storyboard for a rudimentary look
and feel of Syed Designs portfolio website. It begins with a list of the assets to be
included and then a draft storyboard of the portfolio website which, will aim to create a
cohesive presentation. The main purpose of the portfolio website is to garner accurate
communication between the dsigner, Shafqatullah Syed, and prospective employers. The
15 plus years of design and technical experience. Foundational design principles
including C.A.R.P (Contrast, Repetition, Alignment, Proximity) and Gesalt Principles
(Similarity, Continuation, Closure, Proximity) will be adhered to as they translate from
print to web. It will use a responsive single page layout that scrolls from top down.
Essentially, there will be at least five sections including a homepage but the navigation
will have at three targeting links titles, About, Portfolio, and Contact. The first section
will allow downloadable documents to learn about the artist and will cover previous jobs
the portfolio will have examples including logo, infographic, website, web/mobile and
digital design. An area for testimonials, contact form, and footer links follows this
section. The draft storyboard may later be edited to accommodate additional content.
Finally, it will be coded CSS3 and HTML5 to target recent browsers for the computer
and mobile environments. All code will pass W3C validation.
CMST 495: CURRENT TRENDS AND PROJECTS IN DIGITAL
3 CMST 495: Current Trends and Projects In Digital Media and Web Technologies:
Storyboard Project for Syed Designs Portfolio Website
The proliferation of the Internet and technology has made the web portfolio very
popular. Research on how to get the portfolio to be advantageous by communicating the
right meanings to prospective employers, clients, and academia is essential. It can be the
difference to securing a new job, generating revenue, and getting into the right schools. In
his book, “Web Bloopers: 60 Common Web Design Mistake and How To Avoid Them,”
the author says, “…the Web is sorely lacking in usability,” (Johnson, 2003). As designers
one has to understand if a visitor cannot use his/her portfolio website with ease, it
highlights bad communication and has the absence of professionalism. Some designers
focus on color and design and relax on the real purpose of the portfolio with is getting the
intended communication efficiently to the visitors. In a more recent publication more
mistakes are highlighted including: creating a splash page, background music, missing
navigation, expensive/flashy design, hit counters, no SEO (Search Engine Optimization),
using stock content, missing basic information, and a call to action, (King, 2010). Syed
Designs presents a portfolio website that will attempt to solve the many problem in
portfolio web design that plague some designers.
Assets by portfolio section
Homepage
Logo, background image, and link to the portfolio.
CMST 495: CURRENT TRENDS AND PROJECTS IN DIGITAL
4 About
PDF links to important documents including: cover letter, resume,
recommendation letters, awards, writing samples, teaching statement artist statement, and
legacy portfolio
Past roles
Logos, links for previous employers, and a background graphic.
Portfolio
Three logo print designs, infographic, three website examples, three mobile/
website examples, one wireframe/mockup, one or two digital art. This list may get
expanded depending on the assets available and this section will also accommodate any
new replacement examples. Items will grouped by like examples such as logo, print,
infographic, mobile/ website, wireframes/mockups, and digital art. This area
compliments the top down scrolling by displaying each item underneath one another.
Testimonials
Quotations from professionals validating work performed, testifying character,
and a background graphic.
Contact
Contains a simple a form with JavaScript validation and some text.
Footer
More related links and a background graphic.
CMST 495: CURRENT TRENDS AND PROJECTS IN DIGITAL
Storyboard
Notes
The storyboards follow a linear layout. The portfolio website is
responsive as it will resize with the browser window and still be usable
on smaller mobile screens. In addition resizable elements it also utilizes
white space, large type, grid layout, alternative text, and high contrasting
colors where possible for to optimize for accessibility. The call to action
statement targets directly to the portfolio.
5 CMST 495: CURRENT TRENDS AND PROJECTS IN DIGITAL
These two
sections work
together to
provide insight
on the artist.
These sections
work together to
provide insight
on the designer.
Both of these areas are easily updated. The artist can make sure any
referenced documents are up-to-date for prospective employers,
recruiters and to reference personally. A legacy portfolio of all prior
work is made available and in the future the current online portfolio
will be here as a HTML5/PDF flipbook.
6 CMST 495: CURRENT TRENDS AND PROJECTS IN DIGITAL
7 The portfolio section
illustrates experience,
expertise, and skills. Each
piece is accompanied by a
short statement or
paragraph that provides
explanation as to the
purpose, use, and
audience.
The vertical scroll
portfolio makes it
efficient for both scanners
and the ones that want to
see the all the details. All
the examples scale to fit
the viewpoint/ browser
window.
CMST 495: CURRENT TRENDS AND PROJECTS IN DIGITAL
Toward the bottom
visitors can read
actual quotes form
reputable
professionals. This
is an attempt to
solidify authority. Finally, the contact form is available for direct communication with the designer. Conclusion
Web design portfolios can be plagued with bad design and fail to communicate
accurately and the misuse of design principles are at the core of their downfall. Syed
Designs hopes to be the answer to the misdirected portfolios. Following century old
design principles, using sound web skills, paying attention to user experience, and basic
professionalism will attempt to prefect but it will always be a work in progress.
8 CMST 495: CURRENT TRENDS AND PROJECTS IN DIGITAL
References
Johnson, J. (2003). Web bloopers: 60 common web design mistakes and how to avoid
them. Amsterdam, Holland: Morgan Kaufmann Publishers.
King, C. (2010). Top 10 website mistakes. Vital, 7(2), 25. doi:10.1038/vital1135
9 Running Header: CMST495: Trends and Projects in Digital Media
Trends and Projects in Digital Media (1402 CMST 4957980)
Industry Analysis
Shafqatullah Syed
University of MD U. College
Prof. Dr. Sheri Braxton-Lieber
02 May 2014
1
Trends and Projects in Digital Media
2
Abstract
This paper outlines my interests and career goals by discussing influences that shaped my
profession and touches on core technologies required to enter the web design/
development profession including: Hypertext markup language (HTML), Cascading
Style Sheets (CSS) jQuery, Asynchronous JavaScript and Extensible Markup Language
(AJAX), and JavaScript. It then briefly discusses the technologies available and used in
the profession and leaves open the opportunity to constantly learn in the dynamic field of
web design/ development. The paper closes by highlighting alternative career options
from the U.S. Bureau of Labor Statics (BLS) and a local design school. Overall the
research conducted in this paper presents careers in web design/ development are
dynamic and dependent on the development of technology.
2
Trends and Projects in Digital Media
3
Personal Field of Interest, Goals, and Development
Unemployment has provided a retrospective of my professional career and
allowed an opportunity to prioritize my life once more. The prolonged period has effected
not only financial aspects of my life but also the family and emotional. I navigated to the
web design/ development profession not because of passion but with conscious efforts.
There was always a love of technology but it needed direction and with the advancement
of computers I found cohesiveness in the digital world. The interdisciplinary approach to
education has been advantageous in learning different disciplines that communicate
together. The real-time response I received from code and designs on the visual Web
became attractive. My career choices were affected by this newfound appreciation and
the professional experience gained would compliment my interdisciplinary approach.
Web design/ development always has the potential of innovation and present interesting
solutions for problems to world as it interacts with the Web. There are countless web
pages added, taken down, or replaced to the Web every. Some pages fail to communicate
properly, have a terrible user experience, and contain no meaning. My chosen profession
hopes to fill this void and provide value to innovation for future generations of the Web.
Perhaps I am missing the passion for my profession and I do not understand what
that is. Writer Dr. Milred Culp interviewed an employee at NBC news productions and he
advises, “...others to identify what aspect of work excites them and go after it,” and adds,
“Any path has obstacles, but once a path is chosen, the destination is clear,” (Culp, 2012).
In the immediate the need to get back into the workforce is critical but I am also
exploring areas in freelancing, consulting, business ownership, and teaching. Web design/
development has allowed me to learn from my peers, exercise skills in communication,
3
Trends and Projects in Digital Media
4
critical thinking, problem solving, and learn new technologies. I had very little direction
early in my career and teaching from personal experience in technology would allow
guidance for those in early web design/ development positions. The scope of my career
widened to include professions such as graphic design, interaction design, usability, print
design and other non-coding opportunities.
Professionals get a job, become proficient at it, and sometimes a promotion or
new job opportunity comes along, (Bopp, Bing & Forte-Trammell, 2010). “Career
development is more than just the job but about employees seeking their passions, finding
meaning in their work, planning the best way to develop themselves, and finding the right
learning activities to develop expertise,” (Bopp, Bing & Forte-Trammell, 2010). My
current situation facilitates depression, lack of motivation, weight gain, and clouds
judgment. Experience in web design/ development has unearthed my interest in
technology, innovation, and helping others. The expertise developed in this profession
instills the need to assist humanity in any form that manifests. “The importance of
planning and goal setting, in addition to anticipating life stress, is critical for coping with
change,”(Brown & Lent, 2005).
Current and Emerging Technologies
Technology is part of any society’s development and globalization process:
Individuals, governments, professionals, academia, and businesses use and access the
Web for various purposes. Professionally, I have been involved in content creation and
functionality in front-end Web technologies. At its core the framework is built around
Hypertext Markup Language (HTML) and the Web “…over 20 years has developed from
a Web of more-or-less static documents to, now, a platform for applications,” (HTML5
4
Trends and Projects in Digital Media
5
Leads, 2012). Ian Jacobs, an editor at W3C, says, “There are two driving forces behind
this evolution,” (HTML5 Leads, 2012). The first being the proliferation of various
devices and browsers and the second is the Web’s embracing of social networking model,
which, allows the ability to reach many customers. This interactivity can be achieved by
jQuery and AJAX which is are lightweight versions of JavaScript containing code
libraries and Extensible Markup Language (XML) code interfacing between the HTML,
(Györödi, Györödi, Pecherle, Lorand & Alin, 2009). HTML and Cascading Style Sheets
version 3 (CSS3) are used to apply and create responsive applications and gives web
projects the latest design and development advantages for mobile devices, (LaGrone,
2013). Initially web designers and developers assumed “…the goal of the web standards
movement was to remove needless complexity and absurdity from the process of creating
websites so we could focus our attention where it should be: on design, content, and
experience,” (Zeldman, 2014). With the added complexities of the Web front-end
developers and designers find it more difficult to get hired with just a solid understanding
of HTML, CSS, and JavaScript. John Urban, a Computer Science Graduate at UCLA and
freelance web designer, outlines ten skills a web designer should posses including:
1. Optimizing graphics
2. Practicing good User Interface/Experience
3. Constructing good navigation scheme
4. Using fonts wisely
5. Understanding color accessibility
6. Learn to write code (HTML/CSS)
7. Knowing basics of search engine optimization
5
Trends and Projects in Digital Media
6
8. Applying human computer interaction
9. Aware of browser quirks
10. Make designs flexible and maintainable
(Urban, 2009).
Accessibility to the Web is increasing and people use a multitude of methods to
view and use it. Web designers/ developers constantly need to be cognizant of new
technologies such as HTML5, CSS3, mobile development, and responsive technologies,
introduced and their alternative solutions. The career professional should possess core
scripting and design principles. The attention to specific technologies warranted by the
type of interactivity required and device use create competition.
Careers Available
Working in the web field with the focus on web design/ development many
alternative digital design professions overlap. The Bureau of Labor Statistics (BLS)
publishes The Occupational Handbook (TOH), which is the U.S. governments premiere
source of career guidance. It associates fields in systems management, programming,
computer support, systems analysis, database administration, graphic design, information
security, multimedia animation, and software development with web development, (Web
developers, 2014). ("Art & design," 2014). The advisory board at Stevenson University
School of Design Visual Communication Design program consists of successful art and
design professionals, ("Faculty," 2014). They outline art and design career options for the
web design/ development to include: web programmer, content manager/ developer,
Flash developer, Information Architect, Interactive Artists, Multimedia Designer, Web
Producer, and E-Commerce Developer, (Art & Design, 2014). It is apparent from the
6
Trends and Projects in Digital Media
7
evidence that web design/ development have the potential of taking multiple career paths.
The student or adult learner can customize his/ her interests and build a passionate
profession.
7
Trends and Projects in Digital Media
8
References
Art & design career options. (2014). Retrieved from http://designatsu.org/career/careeroptions/
Brown, S. D., & Lent, R. W. (2005). Career Development and Counseling : Putting
Theory and Research to Work. Hoboken, N.J.: John Wiley.
Bopp, M., Bing, D., & Forte-Trammell, S. (2010). Agile career development: Lesson and
approaches from ibm. Boston, MA: Pearson Publishing, Inc.
Culp, M. L. (2012). Find the passion in your career and pursue it. Las Vegas Business
Press (10712186), 29(15), 19.
Faculty. (2014). Retrieved from http://designatsu.org/faculty/
Györödi, C., Györödi, R., Pecherle, G., Lorand, T., & Alin, R. (2009). Web 2.0
Technologies with jQuery and Ajax. Journal Of Computer Science & Control
Systems, 2(2), 11-15.
HTML5 Leads a Web Revolution. (2012). Communications of the ACM, 55(7), 16-17.
doi:10.1145/2209249.2209256
Urban, J. (2009, July 1). 10 things every web designer just starting out should know.
Retrieved from http://sixrevisions.com/web_design/10-things-every-webdesigner-just-starting-out-should-know/
LaGrone, B. (2013). Html5 and css3 responsive web design cookbook. Birmingham, UK:
Packt Publishing Ltd.
Web developers. (2014, January 8). Retrieved from http://www.bls.gov/ooh/arts-anddesign/graphic-designers.htm
8
Trends and Projects in Digital Media
9
Zeldman, J. (2014, January 6). It’s 2014. is web design dead?. Retrieved from
http://www.zeldman.com/2014/01/06/its-2014-is-web-design-dead/
9
Running Header: CMST495: Trends and Projects in Digital Media
Trends and Projects in Digital Media (1402 CMST 4957980)
Degree Reflection
Shafqatullah Syed
University of MD U. College
Prof. Dr. Sheri Braxton-Lieber
20 April 2014
1
Trends and Projects in Digital Media
2
Abstract
This paper is a reflection of the Digital Media and Web Technologies major offered at
University of MD University College (UMUC). The major offers three different tracks,
web development, motion graphics, and digital media. The paper attempts to familiarize
the audience of specific courses taken, why they comprehensively benefit career choices,
the positive impact professionally gained, and how they pave future development. It starts
with a progression from a young student to a professional then an adult student to a
seasoned professional. This progression is critical as it steers the reflection incorporating
real-world experience.
2
Trends and Projects in Digital Media
3
Trends and Projects in Digital Media (1402 CMST 4957980)
Degree Reflection
My initial attempt at higher education was not completed and as a result I found
an opportunity to finish at UMUC. The Digital Media and Web Technologies major
complements my previous interdisciplinary approach to education. I was in search for an
online program that I can manage with the responsibilities of my lifestyle. It needed to
accept both the education I already gained from other schools and enhance my
professional footprint. The school not only had to offer up-to-date knowledge but the
quality of instructors teaching had to be equivalent to the peers of the professional
community. Ultimately, I found UMUC to have qualities in its diverse and practical
course offerings and the level of instructorship was recognizable in the field I was
interested in.
Courses Taken and Their Found Benefits
As a creative individual I began my educational journey with conceptual art
studio, mixed media, and design courses. As technology was beginning to infiltrate
schools I quickly picked up on it and experimented with digital design. My first job was
not technology related and I realized that I required a career change and took a job as a
web designer at a startup company. At this time I completed my two-year degree and
there was not a local four-year university offering the courses directly applying to the
web design profession. Fortunately, the local university was starting a new program that
took an interdisciplinary approach and I was able to create a Multimedia Technologies
major using the full gamut of courses offered. Finally, I was able to use experience
3
Trends and Projects in Digital Media
4
gained from real world experiences and invest them in courses with the insight gained.
Unfortunately, events did not allow me to graduate but I am hopeful in completion of my
undergraduate degree at UMUC.
Having most of the preliminary and foundation courses transferred I started at
UMUC taking Interaction Design (CMST290) and Introduction to Research (LIBS150)
which allowed me to loosen the rust from my joints. CMST 290 was an introduction to
design concepts and how they can manipulate the aesthetics and interactivity of users and
LIBS150 was a requirement for the university explaining the research process and using
tools form the library and online sources, ("Libs 150:," 2014). Now, I was more
comfortable with going school after a ten-year hiatus and my next semester I followed
with two interesting courses in Cultural Anthropology (ANTH 102) and Problem Solving
and Algorithm Design (CMIS 101). Never taking an anthropology course before it
allowed me to fine-tune my critical thinking skills by in-depth discussions, and
encouraging to dig as deeply as possible, to go beyond what is immediately apparent in
order to uncover the complexities of human experiences, (Ali, 2009). Problem solving
with Python programming language unearthed my avoidance of Object-Oriented
Programming (OOP) to remind me of its power and control over design. By this time in
my career I was exposed to web technologies and knew I was not interested in getting
intimately involved with OOP. I wanted to gain more current experience to build a
cohesive portfolio, which I was missing. The next two semesters I enrolled in
Fundamentals of Digital Media (CMST295), Principles of Web Design I and II
(CMST385/386), and Illustration Graphics (CMST320). UMUC says, “The digital media
and Web technology major is designed to help prepare students for a career in the field of
4
Trends and Projects in Digital Media
5
digital design,” ("Major in digital," 2014). In doing so, the four classes are in line with its
objective and after completion of the courses it confirmed one of my goals to garner
recent knowledge and build a consistent portfolio. The content covered in these four
courses introduced current technologies and design principles that enhance
personalization of information and continue to offer rich, multimedia content, (Brooks &
Gibson, 2012). Currently, I am taking Trends and Projects in Digital Media and Web
Design (CMST495) that will help compile the content created from previous courses,
external sources, and create a communications piece that will allow employers to gain
insight not found in the resume. Per UMUC advisors, I would need to take a few electives
to complete the degree requirements and plan to investigate Image Editing (CMST325)
and Advanced Image Editing (CMST425). In the pursuit of portfolio building and career
enhancing the tools, concepts, techniques, and the legal and ethic issues discussed in
these courses will renew my understanding in digital media.
Professional Preparation
Seasoned businesses owners and career advisors, Edie Golberg and Karen Stevens say,
“A well-structured career… can be delivered via technology…” and “…we can rely on
technology to fill the gap,” (Goldberg & Gibson, 2012). My career in digital media has
progressed through frontend web technologies, digital/print media, web/graphic design,
user interfaces, usability, and user experience. As a by-product I learned skills in
communication, problem solving, time management, conflict resolution,
hardware/software administration and usage. It behooves a person to make conscious
efforts to learn in the dynamic field of web technologies and other digital media
professions. Gaining this competitive advantage can be the difference in securing
5
Trends and Projects in Digital Media
6
employment and collecting Unemployment income. UMUC courses have solidified my
marketability and my continued passion for innovation by introducing me to tools,
concepts, principles, and techniques to keeping me knowledgeable with current
technologies and foundational principles/practices in design. They have taught me to be
confident with my work and communicate intelligently.
Conclusion and Future Study
Returning to school and choosing the proper path of study was always difficult
and would need to accommodate the responsibility of a large family at an older age. The
Digital Media and Web Technologies career path offered at UMUC compliments my
professional career, invests on experience, builds a portfolio, and fosters new learning. I
am very satisfied with the education received and hope to continue additional learning at
a graduate level. A career in teaching the knowledge I have collected to benefit those in
early stages of their technology careers may be the ultimate outcome. Seeking education
again has instilled in me to keep a forward developing progressing in my career.
6
Trends and Projects in Digital Media
7
References
Ashraf Ali, H. M. (2009). Anthropology and the Changing World: How Can
Anthropologists Serve Humanity?. Management Science & Engineering, 3(4), 1626.
Brooks, C., & Gibson, S. (2012). Professional Learning in a Digital Age. Canadian
Journal Of Learning And Technology, 38(2),
Goldberg, E. L., & Stevens, K. (2013). Leveraging Technology to Improve Satisfaction with Career Management. Workforce Solutions Review, 4(6), 36-­‐38.
Libs 150: introduction to research (1 credit). (2014). Retrieved from
http://www.umuc.edu/library/libresources/libs150.cfm
Major in digital media and web technology. (2014). Retrieved from
http://www.umuc.edu/academic-programs/bachelors-degrees/digital-media-andweb-technology-major.cfm
7