7

Ask DN: What's your suggestions for a Portfolio website width(mainly a fix-width )?

5 years ago from , https://www.instagram.com/ohgoodgoodsshop/

(First, I wanna say, I'm not a native English guy, so sorry about my English. If there has something you don't understand or any syntax error, please point it out, thanks advance ;-)

So I'm a graphic designer, recently I start working on website design projects, I'm totally a newbie in this field. But here is the problem, I'm really have no idea how to set the website pages width. This is a portfolio site, the client is in interior industry, it's almost a static website, and all design in photoshop. So I prefer to know your tips for fix-width? I have searched and most answers are 1024px for page width? Currently my page width is 1440px, is this too large? My client said it's look large on her notebook, so I'm not sure how should I do. I also have asked others they said 1368px is common. In addition, I don't code, only design, and only design in PSD currently.

So question 1: could you please give my some ideas? and how to describe this part with developer/coder?

Btw, about the interact part, how do you explain the interactive part for your developer(assuming you don't use code, and any other interact prototype tools)? (things like the Nav bar menu button changed to another shape when clicked etc.) I mean I'm also don't know how to do interact part now(just learning tho), but in my current website page, I have added some interactive effect for menu button, so do you know how to explain this to developer so they can understand what kinds of effect I want to achive? Is there any other way except make a interact prototype(because this page already not in initial phase(not wireframe and prototype), it almost finished)? If I write the interact process in words file, does this help? I know it's too old school, but I have no time to learn a interact design now.

So question 2: how to explain this interact process and effect to developer?

Questions 3: As well as some tips for web font and image used, that more helpful.

Hope these stupid questions won't make you boring =-), I'm just a totally start in web so I'm a little confused.

Thanks so much, I'm really appreciate!

14 comments

  • Jake FlemingJake Fleming, 5 years ago

    Question 1:

    You're going to need to design a for a few breakpoints at the very least. This means you will probably have a few Photoshop files. Highly recommend switching from Photoshop to Sketch if you're making the switch to web/ui design. Your site HAS to be responsive, meaning your design is readjusting based on different screen widths. I usually start my projects at 1024px x 1024px. This is a very constrained width, but it is also the width of an iPad so if your design fits within this constraint you can guarantee that it will fit on a laptop as well.

    Question 2:

    There are lots of cheap and free tools out there for prototyping. I use Marvel for simple interactions. Flinto is $99 and is pretty great for fine tuned interactions.

    There are SO many prototyping tools out there and each is good/bad for something.

    Cooper does a great job of breaking a lot of them down for us.

    Question 3:

    Not sure I understand what you're asking here. There are sites out there that you can grab free to use images like Unsplash

    You can also use high quality fonts from Typekit if you're an Adobe CC user. As well as Google fonts.

    Hope this helps a bit. Good luck!

    7 points
    • Dan SimDan Sim, 5 years ago

      +1 on the 1024 x 1024 starting point. You have to start somewhere and it makes it a bit easier on yourself to design in and out from that middle-ground. Plus you have something you could launch straight away and then iterate on.

      0 points
    • Niki Yu, 5 years ago

      Hi Jake, Thanks for your detailed reply, it's helpful. Fe image, I mean is there any rules/requirement for web image? i.e. the formarts must png? Is there any image size requirement?

      Thanks so much,

      0 points
      • Alfonse SurigaoAlfonse Surigao, 5 years ago

        For images, there are usually 4 options to use, each with their own caveats.

        JPEG: Best to use for images with lots of colors, gradients, shadows, or images such as photographs.

        PNG: Best to use for images that have solid colors and images that require transparency.

        GIFs: Best to use with images that require a short animation, though be careful with GIFs that are large in filesize.

        SVG: Best for use to scale images, such as logos. Usually images that have solid colors.

        Also, it's best to use image compression to reduce the filesize on your images. My favorite service is https://compressor.io/. There is also https://tinypng.com/ for png images.

        You want to keep image file sizes as low as possible while still keeping acceptable image quality.

        1 point
  • David Steelcart, 5 years ago

    420px

    2 points
  • Alex CampAlex Camp, 5 years ago

    All your answers are probably in the comments already but I'll share my quick and dirty...

    960px wide can be divisible evenly by many different column combinations, so I usually start there. My design mockups will usually be 1160px so you can see some of the background but the actual website content will fall between 800-980px.

    Until you have a strategy for breakpoints in the code, a static website should never exceed 1024px or people will get horizontal scroll bars = the most annoying thing on the planet.

    0 points
    • Niki Yu, 5 years ago

      Hi Alex,

      Thanks for your insights, it's obviously useful and helpful. Just a little confused, you mean never exceed 1024 px is the whole page width or the actual content width?

      And plus one question ;) the current website homepage is designed for just fit one screen length, so the length I set was 768px, is this correct?

      Thanks so much for your sexy dirty =-)

      0 points
      • Alex CampAlex Camp, 5 years ago

        Except for 100% elements (flush side-to-side in the browser), don't make the actual website content wider than 1024px - until you or the coder has a strategy to implement break points. In fact I don't even like making the website content that wide, I keep it around 900 to 1000px absolute max and centered so there is always a little padding on the sides.

        0 points
  • Vishal Gangadin, 5 years ago

    Hi,

    Question 1:

    As our fellow designers already said, you will need to clarify the breakpoints of the design so the developer knows how the website will behave when the screen is smaller. You can use a 1440 width for your page, but use a grid that will keep you within the boundaries for, let's say 1280(w).

    Question 2:

    I'm not a code expert, I can't make sexy animations in after effects, but I can mock them into some sort of storyboard for the developer. If that's not clear enough I sometimes make a quick gif animation with Photoshop to show the core of my idea for animation.

    Question 3:

    • Fonts: Typekit when CC user, Google Fonts or buy fonts on myfonts.com.

    • Images: I recommend this blogpost by Ultralinx. They made a long list with all kinds of design assets you can use for free or paid. Some real cool stuff in there!

    Goodluck with you project!

    0 points
    • Niki Yu, 5 years ago

      Hi Vishal,

      Thanks for your sexy input =-) I think your"I can mock them into some sort of storyboard for the developer." is fit my current situation, may I ask how do you do this ? Could you please explain more clearly? If this just like something in comis create process?

      And for the image, I mean if there has any rule/requirement for web image? Like the format(PNG)? If there has any size requirement?

      Thanks so much.

      0 points
      • Vishal Gangadin, 5 years ago

        Hey Niki, sorry for the late response!

        Animation storyboard: I usually mockup the core-steps of the animation. If you want an element to rotate or move to another side, make some steps where the element is moved along the way, maybe add some motion blur to it for emphasis

        It's like cutting an actual animation in 4 pieces, but those 4 pieces explain the way it animates well enough.

        Images: I think someone here already explained it well for you ;)

        0 points
  • Tony Jones, 5 years ago (edited 5 years ago )
    1. If you are creating a fixed width design then 1280px window will do just fine. If you are doing a responsive design, you will want to design the screens at around 4 different breakpoints(Large Desktop - 1280px, Desktop - 1024px, Tablet - 600px, and Phone - 360px). All the developer will need to know is the breakpoints I just mentioned.

    2. Depends on what you need to explain to the developer. Some things just use paper and pencil. If they don't understand then make an artboard in Photoshop called "interactions" that give a visual breakdown of how it works. If it's something like an animation that they need to see, then use something like Invision.

    3. You can find tons of resources here: http://growth.supply/free/design-code/

    0 points
    • Niki Yu, 5 years ago

      Hi Tony,

      Thanks for your help. Just little confused, because the client is in interior industry, and the site actually is a portfolio site, I'm not sure where her customers come from and how to view her website, so I assuming most of her clients are mainly using desktop and laptop to view her website. So if this means I just only need to design one size 1280px which fit for desktop? And the website homepage is just fit one screen length, so the length I set was 768px, is this correct?

      Thanks so much .

      0 points