Assignment Final #4:

After hearing the critique last week, I knew exactly what I had to do: sit down with photoshop and dreamweaver open and actually design something and put it on the web. So I did just that. 


I know fred said to stop spending so much time on the header, but to me that's my starting point and blueprint for the rest of the site. The header sets the tone for all of the linking pages. 


First I'll show you a few "sketches" that I went through to get to my final product.

Assignment 3: More Sketches, Continued

I wanted to explore the header and nav bar design a little more this week. I am spending a lot of time working with it because, with such a simple web design, there isn't a lot of room for "jump in your face" design, like a clunky flash element. The design needs to be clean and streamlined while still aesthetically pleasing. 

Here I put the nav bar to the right of the logo. I've since decided to use this salmon color as the portfolio page, but just so you get an idea:

...And the nav bar below the logo:

I wanted to get creative with my rollover. I was thinking about Fred's idea of having every link besides the one I'm rolling over become italicized, but that just might be too simple. Then I came up with the idea of the underline, but having it drawn. I used a simple brush tool in photoshop and this is what I came up with. *note that each page changes color:

I wasn't sure about what color to use for the bio page and what color to use as the homepage. I'm also concerned that perhaps the changing colors is too much? Someone did point out that this color scheme is similar to benjamin-taylor.com and I'm seeing more of that now. I guess I really like this colors!

Assignment 3: More Sketches

I wanted to delve deeper into the sketches and elaborate on some of the designs I came up with for last class in this assignment. 

To start, here are a few wireframe ideas for a homepage, including proposed layouts for the header and nav bar. Pay attention the whitespace -- I played around with the amounts here and feel like I've achieved a good balance. 

I am planning on having the dimensions set at 1,000px wide set up with three columns, all at around 300px (perhaps 320?) to leave for cell padding. 

I also wanted to work with rollovers. I'm not looking to get incredibly fancy here, still striving to keep within my simple and streamlined layout. I have decided to go with this color scheme:

http://www.colorcombos.com/color-scheme-275.html

I am leaning towards the salmon color for the rollover, but the pale blue isn't bad either. I may tone down the number of colors that I have in this color scheme, but I feel like I definitely need a bright color for the rollover. I tried seeing how a rollover would look with the dark teal color (on the far left of the watch) and it just didn't pop enough. 

Another idea I have (and may even like the best), is to have a different rollover color for each link in the navbar and have the accent color for that page be the respectful rollover color. Please see the example below. 

Just to be more clear on the changes that I am planning to make (most of which you have seen, others that are still in progress):

• The entire interface of benjamin-taylor.com will be different. The site will be virtually unrecognizable from it's old form. 
• Switch to the font "PT Sans"
• Use a minimal header (using the "ben lebowitz" header logo) and navigation bar.
• For what content will be on the pages of the site, like HOME:
• A teaser of the bio, with a link to "more" bringing you to the "bio" page. 
• A flickr widget, with a few recent photos
• Links to social media
• A twitter status widget (one that I will design, Similar to the benjamin-taylor.com widget, but with the benlebowitz.com color scheme intact)
• A brief capture of my most recent portfolio work with a link to "portfolio" to view more.
• My most recent blog post with a "...more" linking you to my blog, benflips.com
• BIO
• a well-written, 600-700 word bio, almost like a cover letter, but with less professional, corporate language. More candid.
• A picture of myself, no more than 300 x 300px
• PORTFOLIO
• My recent portfolio items
• I want them to all be in thumbnail format and when you click them, they enlarge, but not in another window or screen, just on top of the thumbnails. (see wireframe below)

• MUSIC
• I am tempted here to just link directly to "benjamin-taylor.com," but I am afraid that I am linking too much away from the site. I am stull unsure about this. 
• CONTACT
• A simple page with my contact information.

Assignment 2: Design Sketches

When I sat down to start working on assignment 2, I realized: how am I supposed to design a logo without knowing what my web address is going to be? After researching all of the portfolio websites that I did, I noticed that a lot of web designers will add a "design" after their name (i.e. benlebowitzdesign.com), but with a name like "lebowitz," I don't really want to add any unnecessary clutter to my URL. So, I am proud to announce that I purchased the rights to the domain name, "benlebowitz.com." Simple, universal and easy to remember, if you already know my name. 


I went to fontsquirrel.com and looked for a few, clean fonts that spoke to me. I downloaded "Nobile" and "PT Sans Narrow" and you can see them in my design below. 


This first "logo" design, if you will, is a little generic and unimpressive, however it does fit in with the clean, typographic look I am going for. I have an issue with my last name being that much longer than my first name, and although I could use my whole first name, I rarely go by Benjamin and "Ben" is just more cool and casual. I feel like it could look slightly disproportionate in this first option, but that just might be me and I'd need a few more opinions. 

This second design is nothing too crazy or different, but I instead have my name butted up against each other, appearing as one word, but differentiated with the bolding and capital letters. Out of these two designs, I think I would lean more towards the below option. 

Check out the same type layout but in the PT Sans font below:

Color schemes have always been my issue. Like my closet, my room, and yes, my digital design, I am always gravitated towards the same color palette and have a hard time getting myself away from my neutral, earth-tone, safe color choices. I am also afraid that the below color scheme is a bit too paint-shop/carpet store/pharmaceutical company for me. 

Then I found this great site for finding and making color schemes called colorcombos.com. Here are a few combos that I liked:

http://www.colorcombos.com/color-scheme-275.html

http://www.colorcombos.com/color-scheme-277.html

http://www.colorcombos.com/color-scheme-5.html

Designing the Nav Bar for benlebowitz.com is perhaps the most important part of the design, for me, because it is (most obviously) on every page of the site, but I feel like it also defines the design of the site. It's the blueprint of design, for me. 

I have a few options of a nav bar (with my prospective logo) below:

The first example is a bit skewed. If I were to actually use this design for the nav bar, I would probably give a little more whitespace between the logo and the nav bar (probably about 2-300 pixels). I like this option, but it feels done and used. 

My second example stacks the logo on top of the nav bar. Keep in mind that I would most likely have a colored rollover, and am thinking about having an off-white background for the entire site, so it may look at little drab, but on the net it will come more in to life. 

The third example shows a nav bar/header look that I am in favor of after my research of other portfolio websites. I really like the idea of the nav bar, vertically stacked, along the right side of the site. I also like the whitespace it forces between the logo and the nav bar (if you were to draw a perfect square around it, much like the screen-capture).

Another example, one that is directly derived from the markboultondesign.com website. I kind of like where this is going, but on the other hand, I feel like it just might be too much "ben lebowitz" going on. 

Assignment 2: What I Like - Portfolio Web Design

Here's a few portfolio sites that really stood out to me in my research of like sites. In doing the research, I actually learned more about what I want my website to look for judging by what I am attracted to with design. The sites that are heavy with flash/pictures/moving images or animations are not the style that I am going for. The portfolio sites that are text-heavy and rich with simple design are the ones that catch my eye and will be what I base my redesign off of.

To start, let's look at jeffsarmiento.com. He's a web designer with a graphical, yet clean looking web site. I don't know how I feel about his custom drawings of underlining and arrows and you can see next to the "flickr" logo and the "we have lift off" graphic. I think it's cutesy and I'm not really going for cutesy -- I'm going for a look that says, "here's a professional recent grad who is serious about a career in ______ " (I'm not saying that Jeff's site doesn't say that -- but if it does, it's cutesy). 

I like that he has the vertical menu bar positioned on the right side. This to me was "unexpected" as fred outlined for us as something to strive towards (I hope). I am beginning to agree more with this "unexpected" take because I feel like out of all the portfolio sites I looked at, nearly 90% had the menu bar vertically positioned on the top of the site and it remained there throughout the site.

Again, keeping with his cutesy nature, Jeff has custom graphics next to each menu bar item along with a changing rollover color (which stays put while on each respective page). I am impartial to the idea of a color change, but I know I wouldn't want this many colors on my site. 

Check out jasonreeddesign.com. It's not one of my favorites, but there are some things that I like and find interesting in his design. Though it may be a tad narcissistic, the idea of a logo being your signature is kind of neat. It looks professional, in a way, and can almost give you a sense of his personality. I mean, people who study people's handwriting and would tell you that you can get a true sense for a person just off their style of writing and signature. With that said, I like the contrast of his signature with the typography and it works well with the drawing of him. 

This happens to be the only design aspect I like on Jason's site. I don't care for his interface (each page kind of flips by like a card in a stack) and I don't think his social media links are prominent enough.  

digitalmash.com is a prime example of a site that solely uses typography and it is still visually appealing. I like the typography and color scheme and although it can be confusing/unclear as to what you should click or what exactly you are clicking on the colored links, the basic nav bar on the top right will bring you to more cohesive and organized links. 

When you do click a link, it stays its respective color and the rest of the links dim to light gray and you are brought to the page (as seen below). I like how the links and the one colored indicator link remain at the top as a sort of header and design element. This site is really well done, in my opinion. 

markboultondesign.com uses another typography rich angle of design and is, again, incredibly effective while remaining visually appealing and professional. Besides the pumpkin/sweet potato color choice (I think it's forgettable), I like the header, with the oversized "De Standard" as the background to the nav bar and logo. With that said, I think it can be confusing to find the nav bar right away, though when you rollover the links, you get a nice, cream colored box that comes up behind each link to make them easier to read and more enticing to click, I think. 

I like Mark's portfolio page, again heavy with text and minimal with graphics, I think it looks professional and I like that they did not keep the oversized "De Standard" as the header throughout the site. This idea kind of sparks some interest in me when thinking about the design of my own site. It would be interesting to play around with a design where the homepage header is lager (perhaps more visually enticing) and then downgrades to a simpler nav bar and logo on the rest of the pages on my site. 

As I mentioned before, exploring and critiquing other successful portfolio websites has helped me garner more of an opinion and a few ideas as to what I want my website to look like. 

Assignment 1: The Proposal

For my final project, I would like to redesign and overhaul my current personal website, benjamin-taylor.com, which up until now primarily functions as a showcase for my music. While I do feel that I still need a website for my music, I am coming to terms with the idea that it would be better to format the site differently to be more of a complete portfolio website, with a cleaner, more text-based design, that would include my music under a tab rather than monopolizing the entire site. 


Here's a look at the design of my current site:

It's no secret that my site is photo-rich and colorful. For my new site, I am going for a more professional feel, with minimal photo usage (however there will still be a photo or two of myself, because I feel that is important. 

I really like the design of this blog.reybango.com (pictured below). Although this site is primarily a blog, I still like the clean and minimal formatting. I like that his header is just his name and that the nav bar is nothing flashy or colorful: just a simple rollover from light grey to dark. However,  I don't like the colorful widgets he has on the side, including the color photo of himself. I feel like if he wanted to include the picture on the homepage, he should have made it black and white to better fit into the schematics of the site. 

Take a look at this rollover pop-up for "Browse." Although some of the text is broken (the alignment), I love this look. 

As of now, my site's nav bar is comprised of the following:

• Home
• Music
• Bio
• Events
• BenFlips (blog)
• Contact

As I previously mentioned, I am going to consolidate all of this information into one tab, "Music," on my new portfolio website. However, I will be keeping a tab for the benflips.com blog, which will just link to my tumblr (unless I can play around with an API and mount the blog directly into my site, because I'm sure this is possible. I am not 100% positive as to what my new nav bar will contain, but I'm assuming it will look something like this:

• Home
• Resume (or "Work")
• Design
• Music
• Bio
• Links (which will probably not be a tab, rather just displayed on the homepage) 

I would like my homepage to be a sampling of the rest of the site. Perhaps a screen capture of my resume, a recent video from my youtube, my tweets, link to my linked in, etc. 


I would like my logo to be text-based and simple. Again, I am really going for a streamlined, professional look. The same will apply to the nav bar. I am more concerned with the nav bar being effective and text-based and useful rather than flashy/graphic and button-based. 



What has really inspired me to even redesign my site (which I only created 5 months ago), is this class and what we have learned thus far. I want my site to be based off of style sheets and have the ability to change the color of a rollover by merely specifying so in the style sheet rather than having to overhaul the graphics and using the method of making two different graphics in photoshop. I am going to move away from clunky webdesign and attempt to make a minimal, clean and fast site.