Personal portfolio website

Rating: No Rating

Hi yall, I'm in progress of making my own portfolio website, anyone here made their own without using template? any tip?

▶ Reply to This

Replies to This Discussion

Permalink Reply by Frank Varro on February 3, 2010 at 10:47am: I have two, a non-flash and a flash- both can be found at www.fvarro.com

The first thing is to set a way to organize the site that will make it easy to navigate both for you and your users. Along with this step comes creating a basic view of the site- where are the menu buttons, where do images go, text, ect... These will influence each other pretty heavily. the Next thing to do is figure out a design that you not only like, but that you know how to code. do you know/have flash? Do you know how to create drop-down menus? Do some basic research and make a test site to figure out both how doable it is on the front end, and how update-able it is. I didn't figure that out, and now I have my old site that is early impossible to update- thus my new, and very basic for now, flash site.

You really want to story board the whole site out- show it to people- mock stuff up either in html or even just in photoshop so you and others can really see what it will look like. ask what you should change, add,how readable it is, how easy it is to navigate. Once you do all that, then its off to building.

Lastly, don't get discouraged, and don't overly rush stuff. make sure things are done right, then post it and get it listed. The last thing you want is to have a site that hurts your chances of getting a job more than if you didn't have a site at all.; ▶ Reply to This

Permalink Reply by Tim Zhang on February 3, 2010 at 11:33am: your website looks really nice. I never done a website before so I am still experimenting, for flash all I can do is a slideshow. Took me an entire night the other day to just center some objects haha; ▶ Reply to This

Permalink Reply by Lori Molitor on February 3, 2010 at 11:45am: Mine is rather simple and presents only a sampling of my portfolio. My hope is that this gets me through the door where I would present a more complete picture of my work, customized toward the culture and values of the particular firm I am interviewing with. I'm not actively seeking a new position at this time, so this is mostly a toy. I agree that the navigation should be easy for your user.

http://www.lorimolitor.com; ▶ Reply to This

Permalink Reply by Lori Molitor on February 3, 2010 at 12:04pm: Let me clarify, while I'm not actively on the job hunt, I'm always interested in professional growth and open to discussing employment with Seattle area firms that may run across my site. =); ▶ Reply to This

Permalink Reply by Sousuke on February 3, 2010 at 9:47pm: Bluehost!

Sorry, I've used them in the past so I recognize their favicon.; ▶ Reply to This

Permalink Reply by Lori Molitor on February 4, 2010 at 10:37am: Yes, they are rather inexpensive and don't bother me with spam. I used InDesign and Image Ready, along with a little HTML to build my site.; ▶ Reply to This

Permalink Reply by Sousuke on February 4, 2010 at 11:21am: I liked them too. In fact they were easier to work with then my current host. That being said, when there is a server problem the host I have now is really really good.; ▶ Reply to This

Permalink Reply by Jennifer de Graaf, RLA on February 3, 2010 at 2:06pm: have you checked the portfolio design group?; ▶ Reply to This

Permalink Reply by Nick Aceto on February 3, 2010 at 7:28pm: Yes.

Use a template. Learn CSS and edit. We're not graphic designers. Learning how to use CSS and make a page that displays pertinent information appropriately is hard enough and really all you need to do in my opinion.

I edited a CSS template to the point that I could have just started from scratch, but it was part of a learning process-taking apart and putting back together. I wouldnt go flash crazy, but that just my opinion.

www.nickaceto.com

Pretty simple as well. I wouldnt have speant the time building it (whether the countless hours are evident or not) had I not been jobless and bored for a few months.; ▶ Reply to This

Permalink Reply by nrschmid on February 4, 2010 at 9:44am: Hey buddy, I talked with you and Amy at the ASLA expo. I like what you have for the non-flash website. I think you need to bring in a little more about yourself in the Flash version. I am going to focus more on the Flash version of the portfolio.

1. Home Page: Animations take a little long to move across the screen. I would omit the animations and just leave the roll-over images.

2. Project slide shows: You have a pause button. When I click on it, I should be able to manually move through each slide show without having to resume the slide show.

3. Project Titles: I like the use of Bank Gothic typeface, which is one of my favorites. However, the titles disappear into the image. I would crop the image right above the project tile and turn the font to a bright red. You might even move the title to the white space in the left margin. I would include the location of the project, client, etc. I use dual 11x17 monitors at my job, but I assume this was designed for 1024x768 resolution.

4. Website Hierarchy: You have a lot of different types of projects. Each project should really be on its own page. You might even organize them into subcategories. So "Civic" would include lake shore development, schools, park design, etc. You can create a drop-down menu or a sub-menu in the white space in the right margin. If you choose not to use a sub-menu, turn each image in the slideshow into a button to link to the individual project page.

5. Residential Category: Great work but I only see two projects. Is the condo rooftop garden a conceptual project? Do you have pictures of this? They are beautiful pictures, but they are very similar and I am desperately waiting for the next project to show. Show a few photos on each slide and but reduce the number of Graber Residence photos by at least 50%. People's attention span is a crucial aspect of any website design.

6. Process Category. This is a great example of a project from beginning to finish. Here's a cool alternative to showing the process:
A. On the bottom of the slide show, include all of the titles for each of the project. Horizontal-align "Design Phase", "Site Analysis", "CAD Plan", etc. Each of these titles should be on all the slides for the project. However, the titles for the slides that are not shown should be grayed out and the main slide title should be in red. For example, on the design phase slide, the "Design Phase" title is in red. The "Site Analysis", "CAD Plan", etc. are grayed out. On the CAD slide, the "CAD Plan" is in red, the "Design Phase", "Site Analysis", etc. is now grey. Again, as I mentioned in #3 above, the text for the projects should have a white background since the text is easily lost with the graphics underneath.
B. Align all of the graphics so that the football stadium is in the same place on each slide.
C. For the slide transition, don't use a fade-out/fade-in: the black is distracting. Fade in the next slide directly over the current slide. You can create an "acetate feel" of overlaying images directly on top of each other. Optional: since you are working with snapshots of the projects (not the projects themselves) bring the images into Photoshop, delete all the white space, and save as a transparent TIFF. Insert the transparent image in Flash, and then in the timeline, start at 100% transparency and then tween to 0%. You might need to do a different timeline for inserting a white rectangle underneath the new graphic. Otherwise you have a transparent TIFF on top of an existing graphic which is now too cluttered.
D. Repeat steps A-C with the Sketchup/3D Studio Max images.
E. Is the residential design studio model a different project. Did this project go beyond the modeling phase?

7. Graphics Category: Isn't your website all about graphics anyway? Each category conveys a different vision. The civic category demonstrates your design/CD skills in civic projects. The same goes for the residential category. The graphics category would include only those projects where you created graphics, whether it be a brochure design, signage, a fancy powerpoint, etc. In other words, it is really an "other" category. I see several duplicate images in the graphics category that are found elsewhere in the portfolio (one of my biggest pet peeves). If you show the same project across many different pages, bring out something distinct on each page. I think it would help if you briefly described the media to create the graphics. Sketchup? AutoCAD? Photoshop? Combination? Hand-rendered? Hand-rendering on trash overlaid on Sketchup graphic?

#8. Photos Category. Beautiful work, but where the heck are these photos located?!!!

#9. Omit the word "Thesis" in your website. You have professional quality school work that is on par with any firm. Play this up. In my resume, I did a semester-long project writing a neighborhood plan which was adopted by the college town. This was cheap unpaid labor for the local planning department. I still include the project in my resume but it is carefully crafted as a six month project manager contract job. It took 7 years for an interviewer to finally realize that it was a student project, although I didn't lie about any of the work.

Keep up the good work.; ▶ Reply to This

Permalink Reply by Nick Aceto on February 4, 2010 at 9:58am: NR-

These comments are directed at Frank I presume?; ▶ Reply to This

Permalink Reply by Sousuke on February 4, 2010 at 11:17am: I like the initial animation. You might speed it up slightly and actually (assuming you haven't done this already) use it as a part of your preload. IE. If your site takes about 5 seconds to load on an average connection and your initial animation takes 1 second you can adjust your preloader so that the site begins on the 4th second knowing that your early animation will keep people busy for that last second.

I can send you the actionscript if you like, but basically you change the total data loaded to 80%...ie if the file is 1MB you allow the site to start when 0.8MB is loaded.

I mention this because your preload is a bit long, not bad by any means but its worth doing everything you can to reduce it.; ▶ Reply to This