running head: cmst 495: current trends and...

Running head: CMST 495: CURRENT TRENDS AND PROJECTS IN DIGITAL 1

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

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.


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.


5

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.


6

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.

These two

sections work

together to

provide insight

on the artist.

These sections

work together to

provide insight

on the designer.


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.


8

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.

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.


9

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

Running Header: CMST495: Trends and Projects in Digital Media 1

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

Trends and Projects in Digital Media 2

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.


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,


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


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


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


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.


8

References Art & design career options. (2014). Retrieved from http://designatsu.org/career/career-

options/

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-web-

designer-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-and-

design/graphic-designers.htm


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/

Running Header: CMST495: Trends and Projects in Digital Media 1


Degree Reflection

Shafqatullah Syed

University of MD U. College

Prof. Dr. Sheri Braxton-Lieber

20 April 2014


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.


3


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


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


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


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.


7

References

Ashraf Ali, H. M. (2009). Anthropology and the Changing World: How Can

Anthropologists Serve Humanity?. Management Science & Engineering, 3(4), 16-

26.

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-and-

web-technology-major.cfm

running head: cmst 495: current trends and...

Documents