Click on the link below to view my ISRC portfolio:
assignments
ISRC – T-shirt designs
VERSION 1
Design 1
White t-shirt
White t-shirt on human
This particular design was targeted for ISRC members. The thought process behind this particular design and it’s targeted audience was that most ISRC members would come into contact with other UMBC members that might already know what the ISRC is and in the case that they do not, the ISRC member would be in a position to explain the same to them. I went with the ISRC logo and an active wordmark that would be small enough not to overwhelm the shirt but also noticeable enough to spark a conversation. As stated above, the goal would be for it to spark a conversation which would then be complemented by the knowledge of the ISRC that the member wearing it holds.
I picked a green line under the logo and wordmark just to keep the design consistent and looking like it belongs with the other designs I have done to date. I picked Garamond as the font as I think it adds a little bit of a formal look to the design.
Design 2
White t-shirt
White t-shirt on human
This particular design was targeted for community members. The thought process behind this particular design was that the community member wearing the t-shirt would not necessarily have knowledge about the ISRC to be able to share with other outsiders that they come into contact with. For this reason, we added in a URL as a way for these community member to have an avenue from which to get further information in case they are interested in the ISRC. The logo and wordmark within this design are much bigger, lending themselves to some discussion and possible scrutiny which might also lead community members to ask questions. In the event that it does raise some questions for them, I have placed the URL right under the spelled out name of the ISRC for them to consider visiting the website.
Just as mentioned in Design 1, I picked a green line under the logo and wordmark just to keep the design consistent and looking like it belongs with the other designs I have done to date. I picked Garamond as the font as I think it adds a little bit of a formal look to the design.
VERSION 2
I got some mixed reviews that were mostly positive about people liking the simple, clean design. I incorporated most of the changes that I thought made sense for my designs.
Some of the comments can be seen below:
“I think removing the white background for the wordmark would make it look nicer”
“Nice design”
“Try including color. The design looks bland.” (Reviewer was referring to a grayscale printout of the design)
“Good call on the website…but I feel it should be smaller than the other text or not bolded.”
“Maybe put the website on the sleeve or somewhere else. It looks cluttered.”
“Make the URL size smaller than the ISRC text”.
Both of the updated designs can be seen from the link below:
Web services for the ISRC should implement
The web services described below are four our of a potentially larger list of services that I think the ISRC should implement, in no particular order.
Events
This would be a web service showcasing different things that are happening that are affiliated with the ISRC. The ISRC would need to figure out what a reasonable timeframe of events to showcase means. Once this timeframe is agreed upon, a decision could be made regarding what events to showcase coupled with how far back in advance and how far into the future to showcase them for. This event information would also carry other necessary details such as venue, invitations to attend as appropriate, any potential costs/ benefits as well as other logistical requirements.
Resources
Under this particular web service, the ISRC could showcase it’s usability lab. The usability lab has inventory in terms of hardware and software that researchers could take advantage of to facilitate their research efforts. A catalogue of what is available for the researchers’ use could be created and displayed within the website n some appropriate format. This could then be coupled with information around what the researchers would need to do in order to get access to the inventory that they come across on this catalogue, as well as some basic instructions on how to use the resources or how to get help with the same. Other details around issues such as whether the items can be checked out of the lab space where they are found, how long a researcher could potentially use or checkout some resource and so on.
People involved
This web service would cater to the ISRC’s need to attract other partners, affiliates and researchers by illustrating who is already working with the ISRC and at what capacity. This would also need to have the necessary details around what particular research areas these people are involved in, what they are looking to do in the current/ near future a well as how to et a hold of them or look up further details regarding their work.
This particular web service section would also need to feature partnerships with people/ institutions/ organizations outside of UMBC in order to also give potential outside partners a sense of not only whom does the ISRC collaborate/ partner with, but also what that collaboration entails at a high level. There should be a point of contact listed for inquiries and clarifications around the information displayed on this web service.
Contact us
A contact us web service is also important for the ISRC. This caters to the would be general inquiries that might not be necessarily directed to any particular individual on the “people page”. This would be in the forms of a web service (form) that collects some information about the sender of the message (such as contact information, etc) as well as their actual inquiry or message.
This would be monitored primarily by one particular point of contact whom would then appropriately respond or direct any correspondence that comes through this channel.
ISRC website design
Please follow the link below to view and click through my first draft of the ISRC website design.
ISRC Website Design – v1
This was an interesting exercise for me. I had to work through the design ideas I had while also keeping the functionality of the prototyping tool in mind. I decided to use a new color scheme (outside of traditional UMBC colors) to provide a somewhat fresh and unique identity for the ISRC. The header and footer within the template that must accompany the webpages will clearly illustrate affiliation with the university, while the light green will uniquely identify the ISRC.
My designs have always been very iterative, with heavy involvement with the users and stakeholders. This particular one will be treated in the same manner. Version 1 will be take into account all of the feedback and critique garnered from peers during the critique process and reflect how those are incorporated within the second version.
Feedback
Some of the feedback garnered from my peers regarding the v1 design of the ISRC website is listed below:
- Move logo to the right side of the banner
- Try sans-serif font to match header/ footer
- Highlight more teal words in mission statement for balance
- Make word in buttons slightly bigger
- Make page titles slightly bigger than text within page
- Try people names centered with the picture
- Put mission statement away from the home page. Have mission statement on people page
- Change color to more reflect language and identity
- Make something dynamic on the first page
- Use first color in more areas. Use second one as an accent to the first.
- Some kind of yellowish brown might come up to complement the green and red.
- Make more cohesive – umbc vs ISRC lab. Needs to come across as one design
- Make the highlighted text bold for readability
- Maybe change the people page to show what the cursor is hovering over with a highlight
- Consider a consistent typeface
Please follow the link below to view and click through version 2 of the ISRC website design.
Identity Systems
I attempted to make this design very simple and minimalistic. I stayed away from adding any unnecessary items on the designs and also opted out of using color. I believe that black and white, when applied appropriately, can make a very powerful design similar to the one I encountered and presented in my inspiration post this week. The postcard was one of the more challenging designs during this assignment with one of the reasons being the seemingly heavy amount of text that needed to be accounted for as the faculty member’s bio. The flyer also seemed to suffer from the same issue with the wordy mission statement that needed to be incorporated.
I opted to incorporate both the ISRC logo and my designed wordmark (active concept) on each of the assets in an attempt to create some uniformity while also testing for scalability across the different elements.
Version 1
Business Card front and Business Card back
Letterhead
Flyer front and Flyer back
Post Card front and Post Card back
After some feedback from other designers, I incorporated some changes into the identity system design that can be seen by following the links below.
Version 2
Business Card
Letterhead
Flyer front and Flyer back
Post Card front and Post Card back
ISRC Icon Set
For this exercise, I took to brainstorming and timing my sessions for each of the concepts that I had selected to create an icon for. Some brainstorming session ended up lasting a bit longer than other simply because sometimes the time would run out before I was able to illustrate all the ideas I had on paper. I then took pictures of my illustrated hand-drawings (picking the icon I considered most representative of the concerned concept) and converted them into vector-based images within the Inkscape tool. I found myself having an easier time with illustrating some of the concepts for which I had already seen illustrations made by others (eg. haptics, search and health), while other concepts such as culture, tended to take a little bit more time to illustrate.
I captured some of what I did during my brainstorm sessions in the images below.
In creating version 1 of this design exercise, my main focus is particularly on whether someone can grasp concept I am trying to represent by the accompanying graphic, a first glance. In other words, is the resulting icon effective or not. I will then work on other aspects beyond that initial recognition task in later versions.
The resulting ISRC icon set can be viewed from the link below:
ISRC Icon Set
ISRC Icon Set – V2
Based on the feedback above, I played around with the thickness of the stroke of the different icons in order to give them a more uniform feel. I also played around with adding color as suggested by some peers but decided to stay with black and white.
The resulting icon set for v2 can be seen at the link below:
ISRC Icon Set – v2
I ended up deciding on a new color scheme and illustrated some of that in the subsequent iterations of the icon set design. The results of that can be viewed via the link below:
ISRC Icon Set – v3
ISRC – people pages
Flat Structure
isrc-flat
In this initial layout, all the pictures are given a similar amount of screen real-estate. The “profiles” of all of the members of the ISRC represented have the same amount of space within which to display their picture and any other overview type of biographical information on this people page. There is no particular order or hierarchy being represented and we take their pictures as they are.
isrc-flat-option2
In this layout, the ISRC members are distributed across the space in alphabetical order by last name. There is no hierarchy illustrated as the members get an equal amount of screen real-estate to display their information. Some of the pictures in this design have been cropped some in order to lay focus squarely on the member’s face, or just on the member’s face and the device they are interacting with as is the case for one of the members. I have also applied a background color to the layout to imply some sort of ISRC member grouping or relationship.
Hierarchical Structure
isrc-hierarchy
In this design, there is an attempt to represent hierarchy within the members of the ISRC from a couple of different dimensions. The position displays hierarchy as the Director is placed at the top-left corner of the page, followed down the page by Faculty, Postdocs and PhD students in that order. The different groups (eg. Faculty, Postdocs, PhD students) have also been visually illustrated by applying a background color which also implies a border around them.
isrc-hierarchy-option2
In this design, a couple of different dimensions have been applied to illustrate hierarchy within the ISRC members. The position displays hierarchy as the Director is placed at the top-left corner of the page, followed down the page by Faculty, Postdocs and PhD students in that order. A line separating each of the different groups (eg. Faculty, Postdocs, PhD students) as well as titles for each of the groups have also been implemented to illustrate the existent hierarchy.
Critiques
After incorporating a majority of the changes suggested by other designers and adopting a new color scheme in subsequent iterations, the resulting people page design can be seen by following the link below:
ISRC – people pages – V2
working with images – powerpoint template
Version 1
The second iteration of the powerpoint template can be seen by following the link below. I have incorporate more content based on the examples shown in class and also adopted a new color scheme:
Version 2
working with icons – logo pages
Logo page with a white background
This design was one that was relatively simple to do. Having the logos sit on a white background makes them stand out and be seen in the form they were initially designed without having to worry about any color interactions, or so, that might make them be perceived differently. Once I learned how to use some tools to remove the background color from the logo, I did so and just took the logo and placed it onto the page which acted as the needed white background.
Logo page with a non-white background
This design was a little trickier than the one before. I had to look for a background color that would interact with the colors of the logos in a way that does not take away from the meaning initially intended by the logo. It also needed to be soft enough in order not to distract from the foreground or logo, where I want the audience’s attention to primarily lie.
Critiques
Logo page with a white background
Some of the comments were:
“Too much white space”
The I “looks like it’s part of the logo page. Need to separate it part of template”
The I “needs to be a little smaller”
Logo page with a non-white background
Only had one comment “Can try and change to sans serif”
grids – in class assignment
During this in-class assignment, we traced grids used in a magazine. This was an interesting assignment since it made me pay attention to design attributes that I may not usually pay close attention to. I usually notice column grids when reading content both in print and digital content but don’t usually pay attention to other details above that. During this exercise, I was able to notice things such as gutters and modules that I normally would not. From looking at the tracing done by other students as well, it seems as if a lot of the design of grids might start from figuring out the columns. At least that is how I would start my grid design, from which point I would decide how to incorporate things such as modules, spatial zones and gutters as dictated by the concerned content and also the visual and conceptual perceptions of the content that I would be trying to convey to the user/ audience.
graphic design reflections 
