Final Feedback

Hi everyone,

I have just finished my portfolio and I would like some feedback before i turn it in. Thanks!

http://www.hu.mtu.edu/~seingold/portfolio/about.html

Working Draft

Here is my very rough working draft for the website

http://www.hu.mtu.edu/~kjmackin/kristyna_mackinnon/kristynamackinnon_home

Portfolio Draft

I know the background image is very pixelated and I'm in the process of making my own/finding a higher quality one.

A book about making pretty websites.

In case anyone thinking about going on and might a different book to use there a book that recently came out called HTML & CSS Design and Build Websites. Also on the book website the author provides some free examples that appears to be pretty helpful.

Stock Photos

Hey guys, I'm just wondering if anyone knows of a good free stock photo site?

More specifically I am looking for a hockey rink's ice that has been skated on.

Something like this:
http://www.123rf.com/photo_13715921_ice-background-with-lines.html

If you know of a site or even a photo for what I'm looking for, it'd be great to know about it.

Thanks!

Meridith's Draft

Hey all. Here is my draft. I am looking for feedback so any advice you can give me would be much appreciated. Thank you :)

http://www.hu.mtu.edu/~mrich/activities/personal%20draft

The Spinning Spinny Circles

Okay so I went and got some feedback from one of my design employers and a few other facutly/students here about the hover effects I had on the thumbnails, and I tried out a few different options for each of them to see what they liked best.

What I tried was:
-Begin as circle, spin into larger circle (like a mini-lightbox with motion)
-Square to larger square
-Square spinning to larger square
-Circle to larger circle
-Square spin to circle
-Circle spin to square

(I've also slowed the speed of the spin down, because I think part of the craziness of the effect was it was going really really fast)

Ultimately the feedback I received was that circle spin to square was actually favorable to those I talked to, especially to one of my bosses who works with design. He thought it showcased a technical skill above and beyond the regular 'make it larger' or 'put a border' or 'change opacity', and that it wasn't "necessarily a bad thing" if they wanted to sit and hover on my images...as he said "I would be thinking 'hey that's cool, maybe I want that on my website and I should contact her about it'".

Of the changing shapes/spinning, they liked the circle to square the best because it felt like it was unraveling into its original shape, as the square "looks" larger than the circle even when they're the same size. They also liked the changing shape because it "made it look different" which made them "instinctively want to click it".

My website is updated to reflect this change, and I would really appreciate the feedback. It's not that I didn't want to listen to anyone...I've just gotten a lot of positive reviews outside of the classroom on this effect and so its hard when you have conflicting opinions to know which to listen to.

swearstudios.com/portfolio/galleries/weblayouts

Portfolio "Draft"

I will be updating and playing around with my first page for my portfolio:

Potential Portfolio (Will be updated)

Illustrator Design

So here is my very simple design for the website.

Annette's Portfolio Draft

Madeline Andrea Baron + Lesson 9

I believe I made this image a link to my draft. If not here it is again, link.
Thanks for the earlier feedback, now I'm testing out the two lines of icons.

I'm not sure I want to incorporate sounds and animation to my site, definitely some interactivity but I feel Lesson 9 makes it sound like it is a general expectation that you have animation, sound and video.
These are great ways to make a page more engaging, but I dont thinks they are absolutely necessary. As long it is a fitting response, fits into your design concept, and supports the purpose of the site then it if find, but it should just be there because it is an "expectation". I think a design can be dynamic without  animation or sound-effects.

HABAJABA!

HERE IS MY PORTFOLIO DRAFT!


HEY GUYS! THIS IS MY PORTFOLIO DRAFT... IT IS THE SAME DESIGN I WANTED TO USE FOR MY PERSONAL SITE BUT DIDN'T ACCOMPLISH! BUT NOW THAT I'M A TOTAL WEB DESIGN BALLER I FEEL I MIGHT BE ABLE TO DO IT!!!

EXAMPLES OF BALLING WEB DESIGN SKILLS (VIEW - VERY IMPORTANT!)

(please que this link up before view examples)

IMPORTANT BACKGROUND MUSIC

EXAMPLE 1
EXAMPLE 2
EXAMPLE 3
EXAMPLE 4
EXAMPLE 5

Portfolio Draft

Ok everyone, here is a link to my draft. Link to draft

Portfolio Draft

Look here!

It's a pretty rough draft, though its got a good bit for layout and color scheme. 

Let's Talk About ~*Interactivity*~

Flash, sound, and videos. This would have been a great section when we were all struggle busing our way through life on the client project; but alas, perhaps we were meant to crawl before we learned to walk (and read?).

The benefits of such features have been enumerated over and over but they bear remembering - it brings an element of engagement to an otherwise static website. You can dress your links up with all the hover bells and whistles in the world, but sometimes that just isn't enough for what your user wants to get out of your page. Sometimes the medium you need lets them have the control or lets them not only see, but hear as well.

Movies and slideshows can be supplemented with CSS by configuring motion magic voodoo if you like, but at the end of the day even the best gif/timelapse css tricks in the world can lack where audio and pause/play controls might be needed by your user.

Audio is one of those things that I feel heeds to the saying 'with great power comes great responsibility'. Audio is one of the best ways to interact with your user, possibly even while they're doing something else in another tab. It gives your website a whole additional dimension of depth that pure visual can lack. However, it definitely needs to be used sparingly to not abuse this power. I'm sure we've all been to those websites that instantly start up with that LOVELY midi beep-boop-boop music and then don't even provide you with a play/pause button to make it stop...yup, that definitely makes me want to stay on your page. I think that case right there makes my point, but it's definitely something to consider.

My rule with sound is be sparing and have a purpose with your audio. Never start it up automatically (unless the user 'knows what they're getting into'...if that makes sense; like if the music is an obvious addition not just filigree), and always, always ALWAYS give your user the control to turn it on/off, etc. The quickest way to get people to leave is to either force them to bear your audio or press mute, neither of which are incredibly appealing options.

Overall good stuff this chapter, and definitely tricks and points to consider moving forward. I'm kind of glad we worked with our multimedia before reading this chapter...I think it helps it really sink in once you've gotten your hands already a little dirty :)

"Design must be functional and functionality must be translated into visual aesthetics, without any reliance on gimmicks that have to be explained." — Ferdinand A. Porsche

PORTFOLIO DRAFT

Hey yooo,

So here is my Portfolio Draft. Feedback is much appreciated! Thanks!

Portfolio draft

Here is my portfolio draft.

Portfolio Drafting

I'm gonna be totally and completely honest, I put this together in 10ish minutes so please give as much feedback as possible!

Travis' Portfolio Draft

So it's still in that "filler text" stage...but I have a decent idea of where I'm going with the design. However, I love to get feedback because I'm sure there are many ways that it could be improved! Give me some suggestions. Please and thanks :)

Check it out!

Mixin' it up with some multimedia

Time to put my blogging pants back on; it's been a while, so let's see if they still fit! And now I'll turn off the cheese. Lesson 9 tells us about adding multimedia content to our site, which can make it more interesting and engaging to users. Whether you're into flash movies, videos, or sound, Dreamweaver's got your back. Maybe. Overall, multimedia can take a site from flat and static to a dynamic and hoppin' digital hangout. I think this is especially cool for our portfolios, since if you're savvier and have madder skills than I do (which I'm sure many are) then you probably have some videos or other interactive projects that you'd like to show off! I'm generally boring and stick to messing with words and the occasional illustrator canvas or photo.

I'm especially excited about sound, as I'm thinking I might record some brief descriptions of my projects to supplement my textual analyses of them. This isn't a 100% sure thing yet, so don't hold me to it. I'm just feeling ambitious and creative right now, so I'm coming up with all of these cool ideas that could either be amazing...or make me want cut a Dreamweaver. All in all, learning how to incorporate multimedia is useful even if I'm not sure that I'm going to use in my portfolio. However, who knows what the future will bring? It just might be one of those kind of random skills that comes in handy one day! Peace.

Sarah Kelly's Portfolio

Below is a draft of my portfolio.  It is definitely missing something but I'm not sure what.  Any suggestions are appreciated.  The white space is boggling my mind.


http://www.hu.mtu.edu/~smkelly/portfolio/portfoliodraft.pdf

Chapter 9

So after earlier confusion we are finally onto chapter 9. Chapter 9 is about adding Flash, Video, and Sound Content to a web site. The benefits to adding these features to a website is that it help to make a site more engaging.

By using Flash it allows us to create a variety of different interactive features inside for a website. If we would to use Flash for a website we could create an animated web banner, flashy buttons and slide shows, and of course the splashy splash page.

The next section is about adding video. Adding a video can add to and take away from a user experience with a website. Example would be if the video is a large file then it would take forever to load for those who have slow internet connection  And speaking from experience though adding a video files to a website was a lot easier then what I thought it would be... at  least if it a youtube video. It turned out all you need to do was grab the html code in order to embedded the video onto a website.

One of the other elements that the chapter focus on is about adding sound to a website.The chapter brings up the different formats of audio files that you can use on a website. Just like video files you need to pay attention to the size of the audio files as well to make sure that it will function properly.

Portfolio Design

This is what the interior pages will look like, I also plan on having a home page and different pages for different categories of work. The arrows will bring up different images of the work as well. I might lighten up the background a bit...

Let me know what you think!

Portfolio Preview!!

Here's the mock design for my portfolio :)

I actually have a few different changes I've made in the code I'm working on so far (thumbs instead of circles, words instead of arrows, buttons instead of gallery text links, and probably a few other things.

But nonetheless, here was my original concept for viewing an item in my portfolio. Let me know your thoughts :)

Everyone Cry Happy Tears with Me Okay

I just I can't even type a proper blog post my portfolio has so many categories and so many thumbs and there is so much clutter in the page I was like 'OH GEE I better think about embeding some of this stuff on external pages so that I don't have to update EVERY PAGE when I change one thing'.

And you would not believe how much effort that took okay. I knew about iframes/frames and I was going to use those and honestly if you're cool with scrollbars I'm totally suggesting USE THOSE because it will save you trouble and time and writhing on the floor in pain. It's literally just iframe src="PAGE TO LINK TO" and the close it.

BUT if you are like me and scrollbars make you lose sleep at night (no seriously I had trouble sleeping last night I think I have a problem) then you're like 'wow how do I get rid of that scrollbar' and the internet is like 'lol not gonna happen unless you wanna slash the rest of that content from existence bro' and then I'm like 'oh. okay then.'

Soooo I delved deep into the pit of the internet and literally tried EVERY. POSSIBLE. THING. Short of learning PHP. And finally I got it: server side includes. Because I care about your sanity here's a link: http://webdesign.about.com/od/ssi/SSI_Server_Side_Includes.htm (in my fit of dancing I closed the tab to the actual tutorial I used but this seems pretty similar).

It herps and derps a little at the start but once you rewire yourself it works beautifully and I'm just really happy right now and I'm gonna go curl up in a ball now okay bye guys. <3

Feedback for Maddy Please

If anyone is feeling generous over the weekend, I'd appreciate some feedback on what I've got going so far for my portfolio rough draft. Here is the link, and a pic.

Thank you and stay warm :)

Web hosting

In case you looking to host a website for yourself or if your client still looking  for something Dreamhost is offering a pretty sweet deal. They offering a year for only $20.

http://lifehacker.com/get-a-year-of-dreamhost-shared-hosting-for-20-473776212

Amazon Student

Hey everyone,

If you haven't heard, Amazon has a special deal where students can sign-up for amazon and receive special bonuses, including free shipping on certain items.  Every now and then they also have special sales.  Currently there is a sale on student software, including adobe design and web, which includes illustrator, photoshop and dreamweaver, for 33% off.  It is still $400, but if you were looking to get a copy for a better price you might consider this.

http://www.amazon.com/gp/socialmedia/promotions/springstudent/

PORTFOLIOS! PORTFOLIOS! PORTFOLIOS!

WHOA! Feels weird to be blogging again. I have to step out of my coding pants and back into my blogging shorts!

I really enjoyed these articles because they were like pictures books! And honestly who likes to read anymore?! The articles gave great examples on what to do when creating a personal portfolio and how to make it look ascetically pleasing!  Now that I have a little coding/Dreamweaver experience under my belt (relate back to pants and shorts comment above - also I'm not wearing a belt today, which i usually do!) I feel like I can start exploring more high level design options. What better way to brainstorm design ideas than these articles!

Overall I cannot wait to start my personal webpage for multiple reasons:

1. Don't have to deal with another person, all the design/content choices will be my idea!
2. I can use it as a more professional platform to display my work for possible employers!
3. It will give me more experience in DREAMWEEEEAVER!

yayayyaya! I'm excited to talk about these articles in class because I LOVE MAKING THINGS LOOK PRETTY!

Portfolios

Portfolios are an extremely important aspect of getting a job as a designer, and web portfolios are amazing tools that allow designers to reach a wider range of audiences.

Using a portfolio to showcase the work that you have already done can be taken one step further when done digitally, because it is easier to update than a print portfolio. Smashing magazine talks about using case studies within your portfolio, but taking it one step further and explaining the client, and their background, as well as, some of their feelings on your design. They also say that it is a good idea to show several photos of a design, instead of just one big picture.

Secondly, the actual design of your portfolio itself is a big deal, because you want users to be comfortable accessing your site, and you don’t want them to be overwhelmed by too much, or underwhelmed by not enough. Surprisingly, most web portfolios have a ‘safe’ layout, not taking design to too outrageous places. 

As more and more designers use web portfolios we are forced to go to greater lengths to make ours stand out of the crowd. How do we do flashy though, without overwhelming our audience?

Holy Portfoli-o (cheesy, I know)

To kick-off reading about portfolios, I check out the case studies article. This piece talked about giving a more comprehensive explanation of projects than just a screenshot. If done well, this is way more meaningful than a single screenshot of a project because it really describes what went into the project and what the design process involved. This article expanded my view of what can be done in a portfolio. I had never thought of going so in-depth about a project, but I'll definitely consider it after this.

Next I read about the current practices and design patterns of portfolios. This one had some really good stuff because I'm not gonna lie, I wasn't entirely sure what the expectations of a portfolio were. Now, I at least have something to go off of and have some ideas of things to add to my site. I was surprised that most portfolios use light and bright color schemes. I always thought of dark, elegant colors for a portfolio, but I guess everyone has different opinions. The most useful thing was seeing the different elements that are commonly found in a portfolio and how things are generally structured and laid out.

The next article I read was about navigation. More specifically, it discussed balancing aesthetics with usability in portfolio navigation. In designing a portfolio, I think it's easy to get caught up in making things as sophisticated and "cool" looking as possible, and this can leave usability on the back burner. However, it doesn't matter how pretty everything looks if the user gets frustrated and closes the page before getting through it all. What I took away is that it's fine to have a pretty site, as long as the functionality remains simple.

Finally, I took a peek at some sexy portfolio designs. All of these designs are unique, and some are quite inspirational. However, many of them seemed really busy and a bit confusing to me. I understand the allure of a lot of bright colors and dynamic, loud imagery, but too much just makes it seem crazy and almost scary. I feel like if I went to some of those pages someone would leap out of the screen and start shouting at me...not really on my agenda as it turns out. Basically, I'm getting that thinking outside of the box and being unique is a good thing, and a fun design has some benefits in attracting people to your site. It's important to keep it all in check and not go overboard though, because then all of the pretty and fun in the design can backfire in a smoking cloud of rainbow colors and metaphorical glitter. And nothing is worse than glitter. You just can't get rid of it.

Portfoli-Oh-so-pretty

Not gonna lie, it was hard to focus on the actual text and reading that we were supposed to do because all I wanted to do was scroll, click and surf through all of the beautiful web-portfolios there were. However, one section in the readings that caught my eye was the one on color choices..that 82% have a light design with neutral colors and 29% have bright vibrant colors, and the fact that dark sites have big typography and visuals...I guess for me it was interesting because I feel that a persons portfolio design and color scheme is very dependent on the type of work they have to display, and more importantly their own personal style and design tastes. BUT, it is good to keep in mind what type of colors you use as they can affect how users see your work (this is mostly applicable to photography sites- you don't want to use a bright vibrant color as a backdrop to your photographs).

I also picked up some great ideas just from browsing through all of the different layouts...as I've said about a zillion times before, I'm a very visual person, so instantly I'm drawn to visually pleasing and eye-catching designs..and like ALWAYS I tend to forget (well not forget, but just put a lot less though into) the structure and coding of the design...which when it comes to displaying your work is, as much as I hate to say it, almost more important than the visual design. I say this (through clenched teeth) because with a portfolio, the most important thing is giving people access to your work, making your work easy to find, easy to read, easy to access, not necessarily how pretty it looks surrounding your work--unless you are a web designer or graphic designer, where the user will be judging your work based on the visual design aspects of your portfolio as well. So keeping the structure in mind, I though the article that talked about the different navigation alignment, layout alignment, column use and interactive elements was very helpful, I'll definitely have to make sure I keep the structure in mind, my biggest downfall besides time managment.

Starting that Portfolio

The first article I read on Smashing Magazine was the "69 Sexy Portfolio Designs". Not gonna lie, some of these were really busy and chaotic looking. Just viewing them in the article made me a little overwhelmed. However, I really did like a few of them, and hope they could maybe serve as a little inspiration for this next portfolio project. Among my favorites featured, I liked the Alt Design, Sahar Design, Flourish Web Design, Dubai, Newrafael, Go Media, Toy.ny and friendly duck designs to name a few. The simple but fun layouts of these really appealed to me, versus the more busy designs that were full of colors and graphics like Kidd81 and MopStudio.

After reading through the top 40 questions in "Portfolio Design Study: Design Patterns and Current Practices," I gained a little more inspiration for what may result as my portfolio website. I thought it was interesting how layouts "back in the 90s" were primarily positioned on the left side, whereas more modern layouts today are in the center, or even towards the right side of the page. I've always liked the way a centered layout looks, and had difficulty achieving this in the client project (especially in the nav bar), so maybe I'll give it another shot in this project?

As for those navigation set-ups in portfolio website designs, although I found some of the "mine sweeper" and Flash navigations charming and fun, I feel as though I may be more practical when it comes to my personal design. Not only because I feel like I don't want my audience or users getting frustrated when they're forced to go on a spontaneous scavenger hunt, but more so because I'm not entirely sure I'm that experienced when it comes to web design...... However, I did enjoy Jessica Caldwell's navigation. I thought it was very creative, yet remains user friendly.

Finally, the Showcases of Case Studies in Design Portfolios. The case studies in each portfolio website features various client projects that have been accomplished. I think this is an important aspect of the portfolio websites, and I really liked how some of the examples in this article went about presenting their work. Sunrise Design was probably one of my favorites, because they really went in depth about their work, and showed various screenshots which was cool to see.

In the end, reading through these articles really made me excited for this next project, despite the ever-growing amount of projects and stuff I have to accomplish before the semester ends...... eek....

Perfect Portfolio

Creating a portfolio to showcase your work in an online space makes it easier for potential employers and everyone who would like to see what you do to check it out! The following readings we were assigned touch on many helpful and inspiring points to consider when putting together content for the site as well as design choices.

Showcase of Case Studies in Design Portfolios  This site addresses the importance of portfolios and itself features more than 30 external sites (case studies) to should you what it could look like and what you could include. It is important to understand what a portfolio site is before jumping right into design, that way you can look at what you've done and based your design off of your current work.

Be sure to include multiple examples or screenshots of each piece of work you want to include in the site, as well as contact information, related links, etc.

Portfolio Design Study: Design Patterns and Current Practices More design oriented, this Smashing Magazine article focuses on aesthetics of the portfolio website. The article included topics like light vs. dark design, columns, an introductory block (or welcome statement), layout and navigation alignment and flash elements, among other things to consider. 

Can User Experience Be Beautiful? An Analysis Of Navigation In Portfolio Websites Third, this article analyzes some example website where the navigation is somewhat confusing. Although you may want to make your site different than everyone elses' by including a funky or fancy effect, make sure you think thoroughly about the usability of that effect. Is it going to make sense to an older audience? Will they be able to understand your thought process and why you chose to do it this way? Maybe they will think its just obnoxious and annoying and won't be willing to poke around as much to see what you've accomplished (even if your stuff is really cool!!)
69 Sexy Portfolio Designs To Inspire You And finally, the fourth reading. "Today designing a unique, compelling portfolio has become a crucial task for designers, studios, companies and everyone whose business is on the Web." ALL OF US CAN MARKET OURSELVES ONLINE! Using these suggestions can definitely help. :)

Make sure to poke around on some of these example sites! They're pretty inspiring. 

Lots of Inspiration to be Had

"Portfolio websites are critical for designers who want to get exposure for their work and attract new clients" showcase of case studies in design portfolios Not surprised, I know we have gone over this in class a lot with our peers designs. We were asked, does the purpose of an online portfolio make sense? Yes, because many of us will be working and creating in digital spaces to it makes sense to promote ourselves in a digital space. I think this article of "case studies" provides good information about what is expected to be in an online portfolio, and why those elements work. 


portfolio design study design patterns and current practices
I feel it is important to understand what is going on in web portfolios before we jump into the creation process. This article answers design and content questions about what currently exists in the world of web portfolios. It lays out the rules and norms and provides their data of occurrence in percentages. I also like how they not only explain the norm but also provide examples of "broken rules" that still work.

"...enabling its users to achieve their objectives—this is ultimately what usability is all about" - an analysis navigation portfolio websites This article shows me that a personal portfolio isn't all about you and your work, it also about your audience. They focus on navigation and user orientation, and promote that it is possible to keep a unique creative personal vibe to your online portfolio without confusing or loosing your audience. 


69 sexy portfolio designs to inspire you (really title?) 
..........consider me inspired. 

Lights, Camera, Portfolio~~!

Okay no but seriously I actually was sort of awaiting the portfolio project. Despite being ridiculously hectic with my other classes, portfolio is something I really do want to work on for my website, so this project is a great springboard.

I really liked the idea in the Smashing Article about developing a client story/case study. I had drawn some mocks of what I envisioned my portfolio looking like (of course, it can always change with time!) long before we started onto our web journey, and I had always really enjoyed incorporating the concept of text and the piece; to give a background rather than just show the work out of its original context. I will definitely be looking over that article again and again as we work on our portfolios.

As for all of the design ideas and reviews...I seriously love looking at portfolio ideas. There are just so many options that some days I want to throw all my notions of what my website should look like out the window and start again with something else like 'what that guy did'. It can almost be overwhelming at times the amount of directions I could go, but regardless, portfolios are some of my favorite designs to look at. They're one of the few places I feel professional designers let themselves 'go a little crazy' and do what they REALLY want to do, and I love seeing those inspired designs come forward. My portfolio plan might be a little more professional and less exciting crazy cartoon happy colors and shapes, but maybe someday I'll develop a page like that...maybe...hopefully...

So overall I was excited to read these articles, found a lot of great content and a lot of great inspirations tucked within each of them. I put at least two (maybe three?) on bookmark, so that right there says how excited portfolio inspiration and ideas makes me. I've already started dabbling a little with my code, but I can't wait for workshop time to really jump in and devote a little more to it!

"Any sufficiently advanced technology is indistinguishable from magic." - Arthur C. Clarke

Port

So tonights readings are all about the portofolio which means it times to start working on creating an online portofolio. Which also means that the semester is close to being over only nine days of classes (not counting today) and five days of finals. It's the silver linings for the next couple weeks. So now let drive into the four articles for tonight readings.

showcase of case studies in design portfolios : The article mentions common things that we should include when we are building our web portfolio. That we should include multiple screenshots since it would be able to show off the work. If there client information the client background in order to provide more in-depth information on the project.  Of course a project overview.

portfolio design study design patterns and current practices: The article breaks up statistics about what portfolios are likely to have. According to the article most website uses lighter colors and are usually center align with few out of the box thinking. It was interesting to see all of the statistics when it comes to online portfolio. Also these statistics are worth keeping in mind in when wanting to do something that is outside of the box.

an analysis navigation portfolio websites: This article is pretty much about the usability of navigating a website. The author brings up several examples of bad navigation as well as some design that seems to somewhat work. It one of the articles worth keeping in mind because it gives us the low down on we shouldn't done with our portfolios. It pretty much one of those articles that ditters the creator from wanting to creating something flashy with navigation because more time out of none it does nto work.

69 sexy portfolio designs to inspire you: The article header gives away what the whole article is about. It is about inspiring us to create a well design website. The article show snapshots of some the best design websites. My favorite ones that I wish that I would be able to copy are ThousandMinds, Dubai, and Diego Latorre just for how beautiful they look.

So Many Portfolios!

Can User Experience Be Beautiful? An Analysis of Navigation in Portfolio Websites 
The Harry Vorsteher website was actually very creative and I didn't think it was that difficult to use. However, I have a feeling that if someone was on slower internet, this website would be incredibly hard to use. The Justin Lerner website was the only other website that I thought was actually user friendly. The rest of them were very difficult to navigate and I would not use something like that for my web portfolio because people wouldn't know how to use my website.

Portfolio Design Study: Design Patterns and Current Practices 
This page is extremely useful in finding the trends that people are using without visiting a bunch of individual websites to find out what users like to see. Most of it did not surprise me, however I thought that more people would incorporate Flash into their webpages.

69 Sexy Portfolio Designs to Inspire You 
Interesting title... I found that a lot of these websites were very creative, but the design of most of them went against what the Portfolio Design Study article talked about as being the norm. It was very unconventional, but I liked how several of the websites have the navigation menu at the bottom left of the page without a scroll.

Showcase of Case Studies in Design Portfolios 
Many portfolio websites also showcase case studies that people have done as a way to show that they have existing experience in a way that shows examples as well. They give more background about the projects that they have completed as well as client testimonials. I personally liked the DrawingArt example because, as a photographer, I thought it was a great way to showcase the type of work that I do in more than just a gallery.

updated site

I was wondering if it would be possible to get some quick feedback on my site about the changes that been done.

http://www.hu.mtu.edu/~kjmackin/lorenzo_labourdeth/lorenzolabourdeth_home

Centering a spry menu

Does anyone know how to center a spry menu?

Light boxes and the images not showing up when saved as .html

So I spent about an hour creating a light box which works fine in the dreamweaver template but when I save the page as .html extension my light box is there but my images are not.

Does anyone know how to fix this issue?

Thanks!

Interactive Features

So my plan for my second interactive feature is not going to work. What other things are people doing for interactive features?

Oh ya, Flickr!

Ok you all caught me zoning but here's the info for the Flickr slideshow!

-Create an account (if you don't have one already)
-Make a new "set"
-Then click "slideshow" once you created the set (top right of the page, see below)

-Once the slideshow is going, then click "share" in the top right corner

-Aaaand "Grab the embed HTML"

-Then copy/paste into your code!

I'm pretty sure you can play around with the settings of the slideshow too...

Hope this helps!

My favorite placeholder text generator!

Here's what I use to generate placeholder text for elements for personal (or pre-client) use. Use at your own risk. Warning: generated text is not safe for class/work.

Samuel L. Ipsum

My draft

No link due to 403 error.

Embedding fonts

Simply stick this in your CSS:

@font-face{
 font-family: inkpen;
 src: url(Inkpen2ScriptStd.otf)
}

Change the "font-family:" attribute to what you want the name of the font to be. Change the "src: url()" to the location of the font file on your server. In the case above, it's in the same folder as all my other files. Just make sure that when you use an embedded font, you still specify a full hierarchy of fonts when you set the font for an element.

Custom Fonts on Websites

I know Alex said he's posting a few links, but here's some I had on hand for how to embed a custom font:

http://www.entheosweb.com/tutorials/css/any_font.asp
http://www.cldesignz.com/using-custom-fonts-for-your-websites/

Hopefully one of those is helpful as well :)

Navigation Bar

This was a really helpful video that helped me make my navigation bar. Here's the link

It is going to be a looooong night....

There are still plenty of problems I need to fix.

Here it is.

Quick & Dirty Enlarge on Click with CSS

Okay I couldn't find a resource on this but a couple people have asked me how you could do a lightbox sort of effect without installing widgets/javascript/etc...that is, pure html/css. I think this should work.

Idea #1: Use hover attributes:
You can assign an image a div style, such as #galleryImages. Here, you could give them borders and a specific size/padding to make a really nice gallery effect when each image is displayed with this style.
(like this:
#galleryImages{
border:solid 1px #000; 
width: 15%; 
padding: 1% 1% 1% 1%;}).
To assign the image the style, use <img src="URL HERE" id="#DIVIDHERE">.

From this point, you could utilize #galleryImages:hover to set the width to a larger size when the image is hovered on. That is, the code could look like #galleryImages:hover{width: 100%}. Since the image already has the id of galleryImages, it would inherit any hover, active, visited, etc. properties you give it.

Idea #2 Open on a blank page using hyperlinks
You can also wrap the image thumbnails in a hyperlink that open the images into a new page/tab (or, if you prefer, the existing page, but then the user has to use the back button...).
Set up your code so that it looks like <a href="URL TO FULL SIZE IMAGE HERE"><img src="URL OF THUMBNAIL HERE" border = "0"></a>. (the border = 0 removes the hyperlink border that image links normally get).
Right after your url in the a href but before the bracket, you can define a target attribute for what page the link should open in. target="_blank" opens the link in a new tab/window. So your code should look like:
<a href="URL TO FULL SIZE IMAGE HERE" target="_blank"><img src="URL OF THUMBNAIL HERE" border = "0"></a>.
If you want the image to open in the same tab (so they have to use the back button), use target="_self".

I wrote these ideas up on the fly so the code might need a little bit of rearranging/fixing, and obviously the styles might need to be changed to suit your needs.  However, the concepts should be solid and hopefully they can help someone out!!

Conditional Comments

This is a technique that will make your code technically invalid, but it can be fun.


<![if !IE]>
<a href="http://www.hu.mtu.edu/~wkzander/hu3650/sp12/?q=node/18#requirement" id="widthlimiting" title="Click to see the requirements for this class project"><img class="scaling" src="firstworld.png" alt="I dont't get to relax on a friday night because I had to turn in a website for class."></a>
<![endif]>
<!--[if IE]>
<a href="http://www.google.com/chrome" id="widthlimiting" title="Click to go get a real browser"><img class="scaling" src="zoidberg.png" alt="Your browser is bad and you should feel bad."></a>
<![endif]-->

The <![if !IE]> and <![endif]> tags are read as invalid, and just get passed over by every browser that isn't internet explorer. IE ignores what's in between them and gets triggered to look for the next set of comment tags, <!--[if IE]> and <![endif]--> (which do validate), then treats them as though the contents aren't a comment. This is a process called conditional commenting. It's a simple, if invalid, way of making things appear differently in IE.

Maddy's Draft

Baron Log

How the Quote Randomization works

The text randomization in the header of my page is a simple piece of javascript.

<script type="text/javascript">
	var textarray = [
	"Jazz is known all over the world as an American musical art form and that's it. No America, no jazz. I've seen people try to connect it to other countries, for instance to Africa, but it doesn't have a damn thing to do with Africa. - Art Blakey",
	"I'm always thinking about creating. My future starts when I wake up every morning... Every day I find something creative to do with my life. - Miles Davis",
	"I believed in studying just because I knew education was a privilege. It was the discipline of study, to get into the habit of doing something that you don't want to do. - Wynton Marsalis",
	"To be a true artist you have to play the way you feel - not the way others think you should feel. - Don Ellis",
	"I say, play your own way. Don’t play what the public wants. You play what you want and let the public pick up on what you’re doing? even if it does take them fifteen, twenty years. - Thelonius Monk",
	"Let my children have music! Let them hear live music. Not noise. My children! You do what you want with your own! - Charles Mingus",
	"But, I don't think any arranger should ever write a drum part for a drummer because if a drummer can't create his own Interpretation of the chart and he plays everything that's written, he becomes mechanical; he has no freedom. - Buddy Rich" // No comma after last entry
	];
	function RndText() {
	var rannum= Math.floor(Math.random()*textarray.length);
	document.getElementById('ShowText').innerHTML=textarray[rannum];
	}
	onload = function() { RndText(); }
	</script>

To make it work, you put each possible string in quotes and separate them by commas. To determine the ID you need to get the stuff to display, you fill in the variable in document.getElementID('ShowText'). I just left it with ShowText, but you could change it if you want to. Stick all that in the head of your code.

To make it display, you enter <div id="showtext"></div> somewhere in the body of your code. In my page, it's inside another div used to contain it.

The code itself generates a random number, multiplies it by the number of elements in the array, and then uses that result to pick a number out of the array.

You should be able to just copy/pasta the code above and fill in your own text.

Harbor View Draft

My site

My Draft

Click here to see my site. Note: please ignore the way the header jumps around; I've already decided to change it into an image.

My real question is how I can make the content of my the site look more aesthetically pleasing without taking away from the readability of it.

To go along with last discussion

Here are two things that I witness just about everyday that help to take away my stress when the semester gets to insane.

http://www.youtube.com/watch?v=hBhGMafMpwE&list=HL1365516300&feature=mh_lolz

2 pages down 3 to go...

So, first off- this took WAY too long, and I'm pretty sure I spent over three hours trying to figure out how to code hover's and mouseovers...and I was making absolutely no sense to the computer. BUT, after 4392348392 hours, I have FINALLY figured out how to add some magic to my page.

Here is my draft...only 3...more...pages.....

CHARLIE KANG'S WEBSITE (draft)

Client Website Draft

http://www.hu.mtu.edu/~kewaara/Sleeping%20Cat%20Jewelry/home.html

There's the link to my client site!! Lookin' for some feedback here, people!!

A Little Laugh to Lighten the Evening :)

Since I've seen a few motivation posts lately I figured I'd put up this one I found the other day that made me giggle:

A Depiction of College with Disney Gifs
Language on one of the gifs but...it's pretty accurate and funny!

Hope it can give you guys a couple laughs and make your evening go better - carry on everyone; we can do this! :)

Motivational Maybe

I received a package in the mail with polish tea and bubble wrap = stress relief 

Given our recent motivational class session, I figured I'd share. :)

Question about expandable lists

Hey everyone! So I'm trying to create an expandable list on my website. To clarify, I want to list the names of some researchers and then make it so that when a user clicks on a name, a list of publications slides down.

Before any clicks:
-name
-name
-name
-name

After click:
-name
          -publication
          -publication
-name
-name
-name

Does anyone have any advice, places to look, words to google?...does this even make sense?

Thanks!

Draft of Client Site

I just wanted to post a draft of what I plan for the site to look like. I have done a few drafts and have shown them to my client, this is the one that she liked the best. And now i would like to know what you think.

Client Draft

Did Anyone Else Not get 25 Points for Submitting their Personal Webpage Draft in Illustrator?

Hello everyone! Is there anyone who submitted their personal webpage draft online(Blog post) but did not submit it on canvas? Well, I was one of them... and losing 25 points is pretty crappy! So I emailed Wendy, and she said if I posted the link to the blogpost, in the comments section for the canvas assignment, I could get points for the work!! Pretty sweet huh? This post is to tell you that You can do it tooooo!! :) Thanks, Armando Flores Strugglebus Driver

oh hey here's my rough draft

Here's my rough draft for my client! 

I'm trying to figure out how to center the nav bar... any suggestions?

Also, not sure if I'm just brain dead or what but I can't get my links to work.

Please give me any other feedback too!

Michigan Tech Jazz Association website draft

http://www.hu.mtu.edu/~abslepak/mtuja/

Helpful Links for Solving Problems with Coding

I hope these posts are useful aaannnnddd allows for some points. I obviously need some points. http://stackoverflow.com/questions This site is cool because it lets people ask questions and the coding community collaborates and provides different solutions. http://www.reddit.com/r/web_design/search?q=web+design&sort=relevance&restrict_sr=on&t=all Gotta love Reddit, they are pretty much the same thing. I found this on like the third link: CMS: http://drupal.org http://www.joomla.org/ http://wordpress.org/ Templates: http://csszengarden.com http://www.freecsstemplates.org/ http://www.csstemplates.net/ Editors: Notepad++ (Windows) Textmate (Mac) Ecplise (Any) Other tools: Firefox's web developer toolbar Firefox's Firebug Javascript libraries: jQuery Mootools Tutorials / References http://www.w3schools.com/html/default.asp http://stackoverflow.com/ http://www.csstutorial.net/ You might also want to setup a local web server for testing purpose XAMPP (All distros, but best on Windows) MAMP (Mac) Look at what others do. Check out the pages' source. You will, in no time, you will be able to pull something nice Others, please feel free to contribute

Clean up your dirty CSS Code

This site makes our dirty CSS, BEAUTIFUL! http://www.codebeautifier.com/ It's fabulous! www.youtube.com/watch?v=XVhweK1tuiI

I'm falling asleep behind the wheel of the struggle bus!!!!!!!!!!!!!!!!

Hi. I am on the struggle bus right now! My GPS has run out of batteries. I cannot tell the difference between dreamland and dreamweaver. I hope some points fall from this magical pinata. Thanks, Armando P.S. I am glad there was no reading today.

NEEDS SOME ALIGNMENT WORK (among other things) BWHAHHAAH

http://www.hu.mtu.edu/~mlang/client/index.html

Color site that you might find helpful

http://www.colorhexa.com/

Here's my rough draft

Here it goes... No Here it goes

Extreme rough draft

so right now I have just the appearance and the menu bar up and operating.
http://www.hu.mtu.edu/~kjmackin/lorenzo_labourdeth/lorenzo_labourdeth_home

Very Rough Draft

Well It's a Rough Draft

I don't have any real content yet, but my pages are set up and ready for content.
I'm actually really proud of it this far!

WiCS Client Site Link!

Here's the link to the client page I'm working on:
hu.mtu.edu/~bcbettin/wics

The internal links don't have content yet, but they should by tomorrow (that's what I'm working on now!)
:)

Gradients in CSS

Hi Everyone:
This might be useful in making your site pretty with gradients.

http://gradients.glrzad.com/

Link to Client Site

Hello! Here is my working (ehhh. well mostly) draft of my client website. A couple of the pages just say in progress for now, but 4 are fully functional.

Client Website HTML Draft

Client Website draft

Hey all. Above is the link to my Client website draft. It is VERY rough still... I do have other pages created, but they are limited in content so far. I am also unable to get my links to work for the other pages.

Late night... studying for an 8am exam and T-Bell (yeah... I know)... Wish me luck. See you in class!

for your listening pleasure

for every stressed web designer in the lab tonight, this goes out to you:

http://www.youtube.com/watch?v=Ftu5ZpAk8dM

deep breaths.

Lightbox or image gallery

have anyone figured our how to do an image gallery or lightbox? If so do you know of any good tutorials?

DIV ID CONTAINER

Does anyone know how to center a DIV ID container?

Facebook Share Button

I know there must be a way to add it but I would like to make it so that a visitor to the site can share an image on Facebook. I'm assuming it's a widget or something but I'm not sure where to start. Any ideas?

Myths debunked about Adobe Creative Cloud

Just in case you are still on the fence about getting Adobe Creative Cloud here is a list of 5 Myths that are debunked about it.

5 Myths about Adobe Creative Cloud

Terry White, Creative Cloud evangelist, debunks popular myths about the Creative Cloud. The essence of the original article is being posted here. For the complete article, click this link.

Myth #1 : I will have to run my applications in a web browser

While that may be the case with other cloud offerings, it’s not the case with Creative Cloud. Creative Cloud members download and install their Apps as Adobe customers always have. The Apps like Photoshop , Illustrator, InDesign and even the new app Muse runs from your Hard Drive, not from the cloud.

Myth #2: I have to be constantly connected to the Internet to use Adobe applications from the cloud

Your Apps not only install on your hard drive, but they also can very much run offline. Your computer does have to connect to the internet once a month to verify that your membership is still current, but that’s it. Once that check has happened you can disconnect and run all of your Creative Cloud apps OFF-line.

Myth #3: I cannot share file with friends that are not subscribed to the cloud

You can share your files with friends that are not subscribed to the Creative Cloud. Once you decide to share a file you can email a link to your colleagues or clients and they will be able to view your file in their web browser even if they’ve never heard of Creative Cloud or the Adobe applications you used to create them.

Myth #4: I lose access to my files in the Creative Cloud as soon as I unsubscribe

While you won’t have access to your Creative Cloud applications anymore, you’ll be able to open your files on any previous version of the software on your computer. This is provided that you’ve saved your files to compatible formats with your older applications or other 3rd party Applications. If you decide to re-join Creative Cloud you’ll have access to the latest Creative Apps again and you’ll be able to continue working on YOUR files.

Myth #5: I will be forced to always run the latest version of the software

You are not forced to upgrade. You can continue to run which ever versions of the software that you want until YOU are ready to upgrade. This is crucial for workflows that involve working with clients or vendors that may not be on the latest versions of the software. You can continue using your current version of the product for one full year after the subsequent version is released.

Bonus myth: I will have to buy two separate subscriptions for my Windows and Apple computers

Actually not only is this not true, but it’s one of the best benefits of Creative Cloud. With Creative Cloud you’re allowed to install the software on up to TWO of your computers. Just like you are able to do with the Creative Suite applications. However, unlike Creative Suite, Creative Cloud allows you to download and install either the Mac or Windows versions for each computer. This is great for people that have say a Windows PC at work, but a Mac at home. 

website: http://blogs.adobe.com/dreamweaver/2013/03/5-myths-about-adobe-creative-cloud.html