We need an illustration (in corporate style… whatever that means) for Wasya Co, a software consulting company. We’re rebuilding our image, and have some ongoing graphics / illustration work. We prefer vector, but will consider great bitmap artists. Please submit your offer with the answers to these two questions, and a link to your portfolio. [1.] What is red + green? [2.] What’s the difference between a pencil and a brush? Thank you!
= Intro =
Separately from everything else, I now have permission to redesign & redo bjjcollective.com . One of the two owners agreed to give me significant control, and is reaching out to the other owner, so see if I can buy that domain from them, and completely own it. Regardless of the second owner’s decision, let’s redesign and redo this website.
BJJC (BJJ Collective) http://bjjcollective.com is an educational resource for jiu-jitsu, the “gentle” martial art characterized by grappling and sweeping / throwing, that constitutes half of MMA (mixed martial arts). the other half of MMA being the striking art. History and a lot of practice have proven that MMA is the only unarmed martial arts methodolody that gives the fighter good odds of winning. Jiu-Jitsu, therefore, is a critically important component in any combat system. bjjcollective.com is an encyclopedia of grappling technique, conveniently categorized to facilitate study. In addition, the website allows discussion, ranking content, keeping track of your own progress, and some additional study tools.
For the backend, we’ll use a custom wordpress theme, and a custom wordpress plugin. This will allow complete flexibility in implementing functionality, as well as being able to use the vast ecosystem of wordpress functionality.
The wordpress packend has been partially implemented and is available (without a design) here: http://bjjc.piousbox.com/
= The mockup requirement =
The primary piece of content is a youtube video. The piece of content – let’s call it an item – has a title, the video itself, and a description. On the new redesigned platform, the description can be quite lengthy. The description itself can have one more more embedded videos. The description can be empty.
The content is categorized in the category tree. A category has a name and a thumbnail, belongs to a category, and has many children categories.
ATTENTION: on the legacy website, there are several kinds of categories, and for example the category [[ Butterfly Guard -> Arm Drag -> Top ]] doesn’t have a thumbnail, and is always expanded into the two children categories, Back Takes and Passes. And the Back Takes doesn’t have a thumb. This complexity is unnecessary and in the new design I want just one type of category: it has the thumbnail, title, belongs to a category, and has many children.
The content of a category is a list of items. The item in this list has a title and thumbnail.
items-show :: Clicking into the item produces the panel items-show, which has: title, video, description. Example: http://bjjc.piousbox.com/technique/guards/helpful-guide-to-bjj-guards/
categories-list :: Panel categories-view has elements: hero image, breadcrumbs, subcategories (each of these has title and thumb), and an expanded text-only category tree of descendants? (this could somehow be in a separate view, I don’t know yet what’s the best way to display this). The categories-view also has the list of items in it. Here example: http://bjjc.piousbox.com/categories/technique/guards/
The 1st page, homepage, is a categories-view of the topmost category (“Technique”).
The design should be mobile-friendly, so should look like an app if possible. Later we can make a design for the desktop, see how that looks.
The complete list of necessary panels (for desktop) is:
* categories-list (combination of categories-thumblist, categories-textlist, and items-list)
On mobile, you can’t show everything at once. Maybe the bottom main menu is appropriate with buttons: testlist, thumblist, itemlist, settings.
Mobile panels possibly are:
* categories-thumblist (includes breadcrumbs)
* items-list (the content of categories-show) (includes breadcrumbs)
* settings (just blank page, you don’t need to create a mockup for this)
This is a standard request. I have mockups being created by the design team, and they need to be converted to modern HTML5/CSS3, to be used in web-based frontends. Some are mobile, some are responsive desktop. We are using Angular & Ionic to build hybrid apps, however they also get build as PWA’s for the web. This request is for only converting the mockups to HTML.
In your response, please answer the following: [1.] what’s 12 – 3/11? [2.] How do I centrally (horizontally & vertically) position a square using flex? [3.] What are your preferred frontend frameworks? How do you write HTML/CSS code that is responsive, looks good on both mobile and desktop?
Thanks. I look forward to reading your responses.